diff --git a/src/notification/notification-content.interface.ts b/src/notification/notification-content.interface.ts index 587071091e..41409769a6 100644 --- a/src/notification/notification-content.interface.ts +++ b/src/notification/notification-content.interface.ts @@ -8,11 +8,13 @@ export interface NotificationContent { [key: string]: any; type: NotificationType; title: string; + titleHtml?: string; target?: string; duration?: number; smart?: boolean; closeLabel?: any; message?: string; + messageHtml?: string; showClose?: boolean; lowContrast?: boolean; template?: TemplateRef; diff --git a/src/notification/notification.component.ts b/src/notification/notification.component.ts index b8dc34aac8..795e0b7900 100644 --- a/src/notification/notification.component.ts +++ b/src/notification/notification.component.ts @@ -9,6 +9,7 @@ import { I18n } from "carbon-components-angular/i18n"; import { NotificationDisplayService } from "./notification-display.service"; import { isObservable, of } from "rxjs"; import { BaseNotification } from "./base-notification.component"; +import { DomSanitizer, SafeHtml } from "@angular/platform-browser"; /** * Notification messages are displayed toward the top of the UI and do not interrupt user’s work. @@ -29,11 +30,21 @@ import { BaseNotification } from "./base-notification.component";
+ +
+
+ + {{ notificationObj.title }} +
- + + + + + {{ notificationObj.message }} +
@@ -65,6 +76,12 @@ export class Notification extends BaseNotification { obj.closeLabel = of(obj.closeLabel); } this._notificationObj = Object.assign({}, this.defaultNotificationObj, obj); + if (this._notificationObj.titleHtml) { + this.safeNotificationTitleHtml = this.sanitizer.bypassSecurityTrustHtml(this._notificationObj.titleHtml); + } + if (this._notificationObj.messageHtml) { + this.safeNotificationMessageHtml = this.sanitizer.bypassSecurityTrustHtml(this._notificationObj.messageHtml); + } } notificationID = `notification-${Notification.notificationCount++}`; @@ -79,7 +96,10 @@ export class Notification extends BaseNotification { @HostBinding("class.cds--inline-notification--low-contrast") get isLowContrast() { return this.notificationObj.lowContrast; } @HostBinding("class.cds--inline-notification--hide-close-button") get isCloseHidden() { return !this.notificationObj.showClose; } - constructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) { + protected safeNotificationTitleHtml: SafeHtml; + protected safeNotificationMessageHtml: SafeHtml; + + constructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n, protected sanitizer: DomSanitizer) { super(notificationDisplayService, i18n); } } diff --git a/src/notification/notification.stories.ts b/src/notification/notification.stories.ts index 131c04db9d..5126126ff5 100644 --- a/src/notification/notification.stories.ts +++ b/src/notification/notification.stories.ts @@ -243,3 +243,22 @@ export const CustomContent = CustomTemplate.bind({}); CustomContent.args = { showClose: true }; + +const HtmlTemplate = (args) => ({ + props: args, + template: ` + + + + ` +}); + +export const HtmlContent = HtmlTemplate.bind({}); +HtmlContent.args = { + showClose: true +};