### 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 ibmToastTitle [innerHTML]="notificationObj.title"></h3>
    	<p ibmToastSubtitle [innerHTML]="notificationObj.subtitle"></p>
    	<p ibmToastCaption [innerHTML]="notificationObj.caption"></p>
    	<ng-container *ngTemplateOutlet="notificationObj.template"></ng-container>
    </div>
    <button
    	*ngIf="showClose"
    	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
Private Static toastCount Protected _notificationObj componentRef Protected defaultNotificationObj notification Private Static notificationCount
###### Methods
ngOnInit destroy onClick 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--low-contrast 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--low-contrast 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:74
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:59

`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:74

### Outputs

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

### HostBindings

attr.id
`attr.id: ```
Default value : ``toast-${Toast.toastCount++}``
Defined in src/notification/toast.component.ts:61

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

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

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

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

class.bx--toast-notification--low-contrast
`class.bx--toast-notification--low-contrast: ```
Defined in src/notification/toast.component.ts:69

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

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

attr.id
`attr.id: ```
Default value : ``notification-${Notification.notificationCount++}``
Inherited from `Notification`
Defined in Notification:93

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

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

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

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

class.bx--inline-notification--low-contrast
`class.bx--inline-notification--low-contrast: ```
Inherited from `Notification`
Defined in Notification:101

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

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

### Methods

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

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

onClick
`onClick(action, event)`
Inherited from `Notification`
Defined in Notification:125
Parameters :
Name | Optional
action | No
event | No
Returns : `void`

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

### Properties

Private Static toastCount
`toastCount: `number``
Type : `number`
Default value : `0`
Defined in src/notification/toast.component.ts:53

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

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

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

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

Private Static notificationCount
`notificationCount: `number``
Type : `number`
Default value : `0`
Inherited from `Notification`
Defined in Notification:66

### Accessors

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

    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 ibmToastTitle [innerHTML]="notificationObj.title"></h3>
    			<p ibmToastSubtitle [innerHTML]="notificationObj.subtitle"></p>
    			<p ibmToastCaption [innerHTML]="notificationObj.caption"></p>
    			<ng-container *ngTemplateOutlet="notificationObj.template"></ng-container>
    		</div>
    		<button
    			*ngIf="showClose"
    			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 {
    	private static toastCount = 0;
    	/**
    	 * 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 = `toast-${Toast.toastCount++}`;
    	@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"; }
    	@HostBinding("class.bx--toast-notification--low-contrast") get isLowContrast() { return this.notificationObj.lowContrast; }

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

    	constructor(
    		protected notificationDisplayService: NotificationDisplayService,
    		protected i18n: I18n,
    		protected experimental: ExperimentalService) {
    		super(notificationDisplayService, i18n);
    		// disable inline notification styles
    		this.notificationClass = false;
    	}

    	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 ""