src/notification/toast.component.ts
Toast messages are displayed toward the top of the UI and do not interrupt user’s work.
OnInit
| selector | cds-toast, ibm-toast |
| template | |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
|
Accessors |
constructor(notificationDisplayService: NotificationDisplayService, i18n: I18n)
|
|||||||||
|
Defined in src/notification/toast.component.ts:74
|
|||||||||
|
Parameters :
|
| notificationObj | |
Type : ToastContent
|
|
|
Defined in src/notification/toast.component.ts:53
|
|
|
Can have
|
|
| close | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseNotification
|
|
|
Defined in
BaseNotification:41
|
|
|
Emits on close. |
|
| attr.id |
Type : string
|
Default value : `toast-${Toast.toastCount++}`
|
|
Defined in src/notification/toast.component.ts:65
|
| class.cds--toast-notification |
Type : boolean
|
Default value : true
|
|
Defined in src/notification/toast.component.ts:66
|
| class.cds--toast-notification--error |
Type : boolean
|
|
Defined in src/notification/toast.component.ts:67
|
| class.cds--toast-notification--hide-close-button |
Type : boolean
|
|
Defined in src/notification/toast.component.ts:74
|
| class.cds--toast-notification--info |
Type : boolean
|
|
Defined in src/notification/toast.component.ts:68
|
| class.cds--toast-notification--info-square |
Type : boolean
|
|
Defined in src/notification/toast.component.ts:69
|
| class.cds--toast-notification--low-contrast |
Type : any
|
|
Defined in src/notification/toast.component.ts:73
|
| class.cds--toast-notification--success |
Type : boolean
|
|
Defined in src/notification/toast.component.ts:70
|
| class.cds--toast-notification--warning |
Type : boolean
|
|
Defined in src/notification/toast.component.ts:71
|
| class.cds--toast-notification--warning-alt |
Type : boolean
|
|
Defined in src/notification/toast.component.ts:72
|
| attr.role |
Type : string
|
|
Inherited from
BaseNotification
|
|
Defined in
BaseNotification:34
|
|
Set role attribute for component
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/notification/toast.component.ts:80
|
|
Returns :
void
|
| destroy |
destroy()
|
|
Inherited from
BaseNotification
|
|
Defined in
BaseNotification:90
|
|
Returns :
void
|
| onClick | ||||||
onClick(action, event)
|
||||||
|
Inherited from
BaseNotification
|
||||||
|
Defined in
BaseNotification:79
|
||||||
|
Parameters :
Returns :
void
|
| onClose |
onClose()
|
|
Inherited from
BaseNotification
|
|
Defined in
BaseNotification:75
|
|
Emits close event.
Returns :
void
|
| toastClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--toast-notification')
|
|
Defined in src/notification/toast.component.ts:66
|
| Private Static toastCount |
Type : number
|
Default value : 0
|
|
Defined in src/notification/toast.component.ts:47
|
| toastID |
Default value : `toast-${Toast.toastCount++}`
|
Decorators :
@HostBinding('attr.id')
|
|
Defined in src/notification/toast.component.ts:65
|
| Protected _notificationObj |
Type : NotificationContent
|
Default value : Object.assign({}, this.defaultNotificationObj)
|
|
Inherited from
BaseNotification
|
|
Defined in
BaseNotification:65
|
| componentRef |
Type : ComponentRef<BaseNotification>
|
|
Inherited from
BaseNotification
|
|
Defined in
BaseNotification:44
|
| Protected defaultNotificationObj |
Type : NotificationContent
|
Default value : {
title: "",
message: "",
type: "info" as NotificationType,
showClose: true,
closeLabel: this.i18n.get("NOTIFICATION.CLOSE_BUTTON"),
role: "status"
}
|
|
Inherited from
BaseNotification
|
|
Defined in
BaseNotification:56
|
| Readonly iconDictionary |
Type : object
|
Default value : {
"error": "error--filled",
"info": "information--filled",
"info-square": "information--square--filled",
"success": "checkmark--filled",
"warning": "warning--filled",
"warning-alt": "warning--alt--filled"
}
|
|
Inherited from
BaseNotification
|
|
Defined in
BaseNotification:47
|
| notificationObj | ||||||
getnotificationObj()
|
||||||
|
Defined in src/notification/toast.component.ts:60
|
||||||
setnotificationObj(obj: ToastContent)
|
||||||
|
Defined in src/notification/toast.component.ts:53
|
||||||
|
Can have
Parameters :
Returns :
void
|
| isError |
getisError()
|
|
Defined in src/notification/toast.component.ts:67
|
| isInfo |
getisInfo()
|
|
Defined in src/notification/toast.component.ts:68
|
| isInfoSquare |
getisInfoSquare()
|
|
Defined in src/notification/toast.component.ts:69
|
| isSuccess |
getisSuccess()
|
|
Defined in src/notification/toast.component.ts:70
|
| isWarning |
getisWarning()
|
|
Defined in src/notification/toast.component.ts:71
|
| isWarningAlt |
getisWarningAlt()
|
|
Defined in src/notification/toast.component.ts:72
|
| isLowContrast |
getisLowContrast()
|
|
Defined in src/notification/toast.component.ts:73
|
| isCloseHidden |
getisCloseHidden()
|
|
Defined in src/notification/toast.component.ts:74
|
import {
Component,
Input,
OnInit,
HostBinding
} from "@angular/core";
import { isObservable, of } from "rxjs";
import { ToastContent } from "./notification-content.interface";
import { NotificationDisplayService } from "./notification-display.service";
import { I18n } from "carbon-components-angular/i18n";
import { BaseNotification } from "./base-notification.component";
/**
* Toast messages are displayed toward the top of the UI and do not interrupt user’s work.
*
* [See demo](../../?path=/story/components-notification--toast)
*/
@Component({
selector: "cds-toast, ibm-toast",
template: `
<svg
[cdsIcon]="iconDictionary[notificationObj.type]"
size="20"
*ngIf="notificationObj.type"
class="cds--toast-notification__icon">
</svg>
<div class="cds--toast-notification__details">
<h3 *ngIf="!notificationObj.template" cdsToastTitle [innerHTML]="notificationObj.title"></h3>
<div *ngIf="!notificationObj.template" cdsToastSubtitle>
<span [innerHTML]="notificationObj.subtitle"></span>
</div>
<p *ngIf="!notificationObj.template" cdsToastCaption [innerHTML]="notificationObj.caption"></p>
<ng-container *ngTemplateOutlet="notificationObj.template; context: { $implicit: notificationObj }"></ng-container>
</div>
<button
*ngIf="!isCloseHidden"
class="cds--toast-notification__close-button"
type="button"
[attr.aria-label]="notificationObj.closeLabel | async"
(click)="onClose()">
<svg cdsIcon="close" size="16" class="cds--toast-notification__close-icon"></svg>
</button>
`
})
export class Toast extends BaseNotification implements OnInit {
private static toastCount = 0;
/**
* Can have `type`, `title`, `subtitle`, and `caption` members.
*
* `type` can be one of `"error"`, `"info"`, `"info-square"`, `"warning"`, `"warning-alt"`, or `"success"`
*/
@Input() set notificationObj(obj: ToastContent) {
if (obj.closeLabel && !isObservable(obj.closeLabel)) {
obj.closeLabel = of(obj.closeLabel);
}
this._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);
}
get notificationObj(): ToastContent {
return this._notificationObj as ToastContent;
}
@HostBinding("attr.id") toastID = `toast-${Toast.toastCount++}`;
@HostBinding("class.cds--toast-notification") toastClass = true;
@HostBinding("class.cds--toast-notification--error") get isError() { return this.notificationObj.type === "error"; }
@HostBinding("class.cds--toast-notification--info") get isInfo() { return this.notificationObj.type === "info"; }
@HostBinding("class.cds--toast-notification--info-square") get isInfoSquare() { return this.notificationObj.type === "info-square"; }
@HostBinding("class.cds--toast-notification--success") get isSuccess() { return this.notificationObj.type === "success"; }
@HostBinding("class.cds--toast-notification--warning") get isWarning() { return this.notificationObj.type === "warning"; }
@HostBinding("class.cds--toast-notification--warning-alt") get isWarningAlt() { return this.notificationObj.type === "warning-alt"; }
@HostBinding("class.cds--toast-notification--low-contrast") get isLowContrast() { return this.notificationObj.lowContrast; }
@HostBinding("class.cds--toast-notification--hide-close-button") get isCloseHidden() { return !this.notificationObj.showClose; }
constructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {
super(notificationDisplayService, i18n);
}
ngOnInit() {
if (!this.notificationObj.closeLabel) {
this.notificationObj.closeLabel = this.i18n.get().NOTIFICATION.CLOSE_BUTTON;
}
}
}