### File

`src/notification/toast.component.ts`

### Description

Toast messages are displayed toward the top of the UI and do not interrupt user’s work.

See demo

../../iframe.html?id=notification--toast

### Extends

`Notification`

### Implements

`OnInit`

### Metadata

selector | `ibm-toast`

template

    <ibm-icon-error-filled16
    		*ngIf="notificationObj.type === 'error'"
    		class="bx--toast-notification__icon">
    	</ibm-icon-error-filled16>
    	<ibm-icon-warning-filled16
    		*ngIf="notificationObj.type === 'warning'"
    		class="bx--toast-notification__icon">
    	</ibm-icon-warning-filled16>
    	<ibm-icon-checkmark-filled16
    		*ngIf="notificationObj.type === 'success'"
    		class="bx--toast-notification__icon">
    	</ibm-icon-checkmark-filled16>
    <div class="bx--toast-notification__details">
    	<h3 class="bx--toast-notification__title" [innerHTML]="notificationObj.title"></h3>
    	<p class="bx--toast-notification__subtitle" [innerHTML]="notificationObj.subtitle"></p>
    	<p class="bx--toast-notification__caption" [innerHTML]="notificationObj.caption"></p>
    </div>
    <button
    	class="bx--toast-notification__close-button"
    	type="button"
    	[attr.aria-label]="notificationObj.closeLabel"
    	(click)="onClose()">
    	<ibm-icon-close16 class="bx--toast-notification__close-icon"></ibm-icon-close16>
    </button>

### Index

###### Properties

- Protected _notificationObj
- componentRef
- Protected defaultNotificationObj
- notification

###### Methods

- ngOnInit
- destroy
- onClose

###### Inputs

- notificationObj
- notificationObj

###### Outputs

- close

###### HostBindings

- attr.id
- attr.role
- class.bx--toast-notification
- class.bx--toast-notification--error
- class.bx--toast-notification--info
- class.bx--toast-notification--success
- class.bx--toast-notification--warning
- attr.id
- attr.role
- class.bx--inline-notification
- class.bx--inline-notification--error
- class.bx--inline-notification--info
- class.bx--inline-notification--success
- class.bx--inline-notification--warning

###### Accessors

- isExperimental

### Constructor

`constructor(notificationDisplayService: NotificationDisplayService, i18n: I18n, experimental: ExperimentalService)`
Defined in src/notification/toast.component.ts:69

Parameters :

Name | Type | Optional
notificationDisplayService | `NotificationDisplayService` | No
i18n | `I18n` | No
experimental | `ExperimentalService` | No

### Inputs

`notificationObj` | Can have `type`, `title`, `subtitle`, and `caption` members. `type` can be one of `"error"`, `"info"`, `"warning"`, or `"success"` Type : `ToastContent`
Defined in src/notification/toast.component.ts:56

`notificationObj` | Can have `type`, `title`, and `message` members. `type` can be one of `"info"`, `"warning"`, `"error"`, `"success"` `message` is the message to display Type : `NotificationContent`
Inherited from `Notification`
Defined in Notification:61

### Outputs

`close` | Emits on close. `$event` Type: `EventEmitter<any>`
Inherited from `Notification`
Defined in Notification:74

### HostBindings

attr.id
`attr.id: ```
Default value : `"notification"`
Defined in src/notification/toast.component.ts:58

attr.role
`attr.role: ```
Default value : `"alert"`
Defined in src/notification/toast.component.ts:60

class.bx--toast-notification
`class.bx--toast-notification: ```
Default value : `true`
Defined in src/notification/toast.component.ts:59

class.bx--toast-notification--error
`class.bx--toast-notification--error: ```
Defined in src/notification/toast.component.ts:62

class.bx--toast-notification--info
`class.bx--toast-notification--info: ```
Defined in src/notification/toast.component.ts:63

class.bx--toast-notification--success
`class.bx--toast-notification--success: ```
Defined in src/notification/toast.component.ts:64

class.bx--toast-notification--warning
`class.bx--toast-notification--warning: ```
Defined in src/notification/toast.component.ts:65

attr.id
`attr.id: ```
Default value : `"notification"`
Inherited from `Notification`
Defined in Notification:80

attr.role
`attr.role: ```
Default value : `"alert"`
Inherited from `Notification`
Defined in Notification:82

class.bx--inline-notification
`class.bx--inline-notification: ```
Default value : `true`
Inherited from `Notification`
Defined in Notification:81

class.bx--inline-notification--error
`class.bx--inline-notification--error: ```
Inherited from `Notification`
Defined in Notification:84

class.bx--inline-notification--info
`class.bx--inline-notification--info: ```
Inherited from `Notification`
Defined in Notification:85

class.bx--inline-notification--success
`class.bx--inline-notification--success: ```
Inherited from `Notification`
Defined in Notification:86

class.bx--inline-notification--warning
`class.bx--inline-notification--warning: ```
Inherited from `Notification`
Defined in Notification:87

### Methods

ngOnInit
`ngOnInit()`
Defined in src/notification/toast.component.ts:78
Returns : `void`

destroy
`destroy()`
Inherited from `Notification`
Defined in Notification:106
Returns : `void`

onClose
`onClose()`
Inherited from `Notification`
Defined in Notification:102
Emits close event. Returns : `void`

### Properties

Protected _notificationObj
`_notificationObj: `NotificationContent``
Type : `NotificationContent`
Default value : `Object.assign({}, this.defaultNotificationObj)`
Inherited from `Notification`
Defined in Notification:95

componentRef
`componentRef: `ComponentRef<Notification>``
Type : `ComponentRef<Notification>`
Inherited from `Notification`
Defined in Notification:76

Protected defaultNotificationObj
`defaultNotificationObj: `object``
Type : `object`
Default value : `{ title: "", message: "", type: "info", closeLabel: this.i18n.get("NOTIFICATION.CLOSE_BUTTON") }`
Inherited from `Notification`
Defined in Notification:89

notification
`notification: ```
Decorators : `@ViewChild('notification')`
Inherited from `Notification`
Defined in Notification:78

### Accessors

isExperimental
get `isExperimental()`
Defined in src/notification/toast.component.ts:67

    import {
    	Component,
    	Input,
    	OnInit,
    	HostBinding
    } from "@angular/core";

    import { ToastContent } from "./notification-content.interface";
    import { Notification } from "./notification.component";
    import { ExperimentalService } from "./../experimental.module";
    import { NotificationDisplayService } from "./notification-display.service";
    import { I18n } from "./../i18n/i18n.module";

    /**
     * Toast messages are displayed toward the top of the UI and do not interrupt user’s work.
     *
     * [See demo](../../?path=/story/notification--toast)
     *
     * <example-url>../../iframe.html?id=notification--toast</example-url>
     */
    @Component({
    	selector: "ibm-toast",
    	template: `
    		<ibm-icon-error-filled16
    				*ngIf="notificationObj.type === 'error'"
    				class="bx--toast-notification__icon">
    			</ibm-icon-error-filled16>
    			<ibm-icon-warning-filled16
    				*ngIf="notificationObj.type === 'warning'"
    				class="bx--toast-notification__icon">
    			</ibm-icon-warning-filled16>
    			<ibm-icon-checkmark-filled16
    				*ngIf="notificationObj.type === 'success'"
    				class="bx--toast-notification__icon">
    			</ibm-icon-checkmark-filled16>
    		<div class="bx--toast-notification__details">
    			<h3 class="bx--toast-notification__title" [innerHTML]="notificationObj.title"></h3>
    			<p class="bx--toast-notification__subtitle" [innerHTML]="notificationObj.subtitle"></p>
    			<p class="bx--toast-notification__caption" [innerHTML]="notificationObj.caption"></p>
    		</div>
    		<button
    			class="bx--toast-notification__close-button"
    			type="button"
    			[attr.aria-label]="notificationObj.closeLabel"
    			(click)="onClose()">
    			<ibm-icon-close16 class="bx--toast-notification__close-icon"></ibm-icon-close16>
    		</button>
    	`
    })
    export class Toast extends Notification implements OnInit {
    	/**
    	 * Can have `type`, `title`, `subtitle`, and `caption` members.
    	 *
    	 * `type` can be one of `"error"`, `"info"`, `"warning"`, or `"success"`
    	 */
    	@Input() notificationObj: ToastContent;

    	@HostBinding("attr.id") toastID = "notification";
    	@HostBinding("class.bx--toast-notification") toastClass = true;
    	@HostBinding("attr.role") role = "alert";

    	@HostBinding("class.bx--toast-notification--error") get isError() { return this.notificationObj["type"] === "error"; }
    	@HostBinding("class.bx--toast-notification--info") get isInfo() { return this.notificationObj["type"] === "info"; }
    	@HostBinding("class.bx--toast-notification--success") get isSuccess() { return this.notificationObj["type"] === "success"; }
    	@HostBinding("class.bx--toast-notification--warning") get isWarning() { return this.notificationObj["type"] === "warning"; }

    	get isExperimental() {
    		return this.experimental.isExperimental;
    	}

    	constructor(
    		protected notificationDisplayService: NotificationDisplayService,
    		protected i18n: I18n,
    		protected experimental: ExperimentalService) {
    		super(notificationDisplayService, i18n);
    	}

    	ngOnInit() {
    		if (!this.notificationObj.closeLabel) {
    			this.notificationObj.closeLabel = this.i18n.get().NOTIFICATION.CLOSE_BUTTON;
    		}
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""