### 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 [innerHTML]="notificationObj.title" class="bx--inline-notification__title"></p>
    		<p [innerHTML]="notificationObj.message" class="bx--inline-notification__subtitle"></p>
    	</div>
    </div>
    <button
    	(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

###### Methods

- destroy
- 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--success
- class.bx--inline-notification--warning

###### Accessors

- notificationObj

### Constructor

`constructor(notificationDisplayService: NotificationDisplayService, i18n: I18n)`
Defined in src/notification/notification.component.ts:95

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:61

### Outputs

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

### HostBindings

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

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

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

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

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

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

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

### Methods

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

onClose
`onClose()`
Defined in src/notification/notification.component.ts:102
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:95

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

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

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

### Accessors

notificationObj
set `notificationObj(obj)`
Defined in src/notification/notification.component.ts:64

Parameters :

Name | Optional
obj | No

Returns : `void`

    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 } 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 [innerHTML]="notificationObj.title" class="bx--inline-notification__title"></p>
    				<p [innerHTML]="notificationObj.message" class="bx--inline-notification__subtitle"></p>
    			</div>
    		</div>
    		<button
    			(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 {
    	/**
    	 * 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";
    	@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"; }

    	protected defaultNotificationObj = {
    		title: "",
    		message: "",
    		type: "info",
    		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();
    	}

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

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""