### File

`src/notification/notification.component.ts`

### Description

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

See demo

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

### Metadata

selector | `ibm-notification`
template |
    <div class="bx--inline-notification__details">
    	<ibm-icon-error-filled16
    		*ngIf="notificationObj.type === 'error'"
    		class="bx--inline-notification__icon">
    	</ibm-icon-error-filled16>
    	<ibm-icon-warning-filled16
    		*ngIf="notificationObj.type === 'warning'"
    		class="bx--inline-notification__icon">
    	</ibm-icon-warning-filled16>
    	<ibm-icon-checkmark-filled16
    		*ngIf="notificationObj.type === 'success'"
    		class="bx--inline-notification__icon">
    	</ibm-icon-checkmark-filled16>
    	<div class="bx--inline-notification__text-wrapper">
    		<p ibmNotificationTitle [innerHTML]="notificationObj.title"></p>
    		<p ibmNotificationSubtitle [innerHTML]="notificationObj.message"></p>
    		<ng-container *ngTemplateOutlet="notificationObj.template"></ng-container>
    	</div>
    </div>
    <div *ngFor="let action of notificationObj.actions">
    	<button
    		(click)="onClick(action, $event)"
    		ibmButton="ghost"
    		size="sm"
    		class="bx--inline-notification__action-button"
    		type="button">
    		{{action.text}}
    	</button>
    </div>
    <button
    	*ngIf="showClose"
    	(click)="onClose()"
    	class="bx--inline-notification__close-button"
    	[attr.aria-label]="notificationObj.closeLabel | async"
    	type="button">
    	<ibm-icon-close16 class="bx--inline-notification__close-icon"></ibm-icon-close16>
    </button>

### Index

###### Properties
Protected _notificationObj componentRef Protected defaultNotificationObj notification Private Static notificationCount
###### Methods
destroy onClick onClose
###### Inputs
notificationObj
###### Outputs
close
###### HostBindings
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
notificationObj showClose

### Constructor

`constructor(notificationDisplayService: NotificationDisplayService, i18n: I18n)`
Defined in src/notification/notification.component.ts:114
Parameters :
Name | Type | Optional
notificationDisplayService | `NotificationDisplayService` | No
i18n | `I18n` | No

### Inputs

`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`
Defined in src/notification/notification.component.ts:74

### Outputs

`close` | Emits on close. `$event` Type: `EventEmitter<any>`
Defined in src/notification/notification.component.ts:87

### HostBindings

attr.id
`attr.id: ```
Default value : ``notification-${Notification.notificationCount++}``
Defined in src/notification/notification.component.ts:93

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

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

class.bx--inline-notification--error
`class.bx--inline-notification--error: ```
Defined in src/notification/notification.component.ts:97

class.bx--inline-notification--info
`class.bx--inline-notification--info: ```
Defined in src/notification/notification.component.ts:98

class.bx--inline-notification--low-contrast
`class.bx--inline-notification--low-contrast: ```
Defined in src/notification/notification.component.ts:101

class.bx--inline-notification--success
`class.bx--inline-notification--success: ```
Defined in src/notification/notification.component.ts:99

class.bx--inline-notification--warning
`class.bx--inline-notification--warning: ```
Defined in src/notification/notification.component.ts:100

### Methods

destroy
`destroy()`
Defined in src/notification/notification.component.ts:136
Returns : `void`

onClick
`onClick(action, event)`
Defined in src/notification/notification.component.ts:125
Parameters :
Name | Optional
action | No
event | No
Returns : `void`

onClose
`onClose()`
Defined in src/notification/notification.component.ts:121
Emits close event. Returns : `void`

### Properties

Protected _notificationObj
`_notificationObj: `NotificationContent``
Type : `NotificationContent`
Default value : `Object.assign({}, this.defaultNotificationObj)`
Defined in src/notification/notification.component.ts:114

componentRef
`componentRef: `ComponentRef<Notification>``
Type : `ComponentRef<Notification>`
Defined in src/notification/notification.component.ts:89

Protected defaultNotificationObj
`defaultNotificationObj: `object``
Type : `object`
Default value : `{ title: "", message: "", type: "info", showClose: true, closeLabel: this.i18n.get("NOTIFICATION.CLOSE_BUTTON") }`
Defined in src/notification/notification.component.ts:107

notification
`notification: ```
Decorators : `@ViewChild('notification')`
Defined in src/notification/notification.component.ts:91

Private Static notificationCount
`notificationCount: `number``
Type : `number`
Default value : `0`
Defined in src/notification/notification.component.ts:66

### Accessors

notificationObj
set `notificationObj(obj)`
Defined in src/notification/notification.component.ts:77
Parameters :
Name | Optional
obj | No
Returns : `void`

showClose
get `showClose()`
Defined in src/notification/notification.component.ts:103

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	ComponentRef,
    	ViewChild,
    	HostBinding
    } from "@angular/core";

    import { NotificationContent } from "./notification-content.interface";
    import { I18n } from "./../i18n/i18n.module";
    import { NotificationDisplayService } from "./notification-display.service";
    import { of, isObservable, Subject } from "rxjs";

    /**
     * Notification messages are displayed toward the top of the UI and do not interrupt user’s work.
     *
     * [See demo](../../?path=/story/notification--basic)
     *
     * <example-url>../../iframe.html?id=notification--basic</example-url>
     */
    @Component({
    	selector: "ibm-notification",
    	template: `
    		<div class="bx--inline-notification__details">
    			<ibm-icon-error-filled16
    				*ngIf="notificationObj.type === 'error'"
    				class="bx--inline-notification__icon">
    			</ibm-icon-error-filled16>
    			<ibm-icon-warning-filled16
    				*ngIf="notificationObj.type === 'warning'"
    				class="bx--inline-notification__icon">
    			</ibm-icon-warning-filled16>
    			<ibm-icon-checkmark-filled16
    				*ngIf="notificationObj.type === 'success'"
    				class="bx--inline-notification__icon">
    			</ibm-icon-checkmark-filled16>
    			<div class="bx--inline-notification__text-wrapper">
    				<p ibmNotificationTitle [innerHTML]="notificationObj.title"></p>
    				<p ibmNotificationSubtitle [innerHTML]="notificationObj.message"></p>
    				<ng-container *ngTemplateOutlet="notificationObj.template"></ng-container>
    			</div>
    		</div>
    		<div *ngFor="let action of notificationObj.actions">
    			<button
    				(click)="onClick(action, $event)"
    				ibmButton="ghost"
    				size="sm"
    				class="bx--inline-notification__action-button"
    				type="button">
    				{{action.text}}
    			</button>
    		</div>
    		<button
    			*ngIf="showClose"
    			(click)="onClose()"
    			class="bx--inline-notification__close-button"
    			[attr.aria-label]="notificationObj.closeLabel | async"
    			type="button">
    			<ibm-icon-close16 class="bx--inline-notification__close-icon"></ibm-icon-close16>
    		</button>
    	`
    })
    export class Notification {
    	private static notificationCount = 0;
    	/**
    	 * Can have `type`, `title`, and `message` members.
    	 *
    	 * `type` can be one of `"info"`, `"warning"`, `"error"`, `"success"`
    	 *
    	 * `message` is the message to display
    	 */
    	@Input() get notificationObj(): NotificationContent {
    		return this._notificationObj;
    	}
    	set notificationObj(obj: NotificationContent) {
    		if (obj.closeLabel) {
    			obj.closeLabel = of(obj.closeLabel);
    		}
    		this._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);
    	}

    	/**
    	 * Emits on close.
    	 */
    	@Output() close: EventEmitter<any> = new EventEmitter();

    	componentRef: ComponentRef<Notification>;

    	@ViewChild("notification") notification;

    	@HostBinding("attr.id") notificationID = `notification-${Notification.notificationCount++}`;
    	@HostBinding("class.bx--inline-notification") notificationClass = true;
    	@HostBinding("attr.role") role = "alert";

    	@HostBinding("class.bx--inline-notification--error") get isError() { return this.notificationObj.type === "error"; }
    	@HostBinding("class.bx--inline-notification--info") get isInfo() { return this.notificationObj.type === "info"; }
    	@HostBinding("class.bx--inline-notification--success") get isSuccess() { return this.notificationObj.type === "success"; }
    	@HostBinding("class.bx--inline-notification--warning") get isWarning() { return this.notificationObj.type === "warning"; }
    	@HostBinding("class.bx--inline-notification--low-contrast") get isLowContrast() { return this.notificationObj.lowContrast; }

    	get showClose() {
    		return this._notificationObj.showClose;
    	}

    	protected defaultNotificationObj = {
    		title: "",
    		message: "",
    		type: "info",
    		showClose: true,
    		closeLabel: this.i18n.get("NOTIFICATION.CLOSE_BUTTON")
    	};
    	protected _notificationObj: NotificationContent = Object.assign({}, this.defaultNotificationObj);

    	constructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {}

    	/**
    	 * Emits close event.
    	 */
    	onClose() {
    		this.close.emit();
    	}

    	onClick(action, event) {
    		if (!action.click) {
    			return;
    		}
    		if (isObservable(action.click)) {
    			(action.click as Subject<{event: Event, action: any}>).next({event, action});
    		} else {
    			action.click({event, action});
    		}
    	}

    	destroy() {
    		this.notificationDisplayService.close(this);
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""