The message supports templates that allows the user to customize the content with a custom structure. The content can be a string, paragraph, or any other HTML element. The template can be rendered through the content property or added directly to the HTML element.
In the following sample, the Message component content is customized with HTML elements and Angular Button components, which are directly added to the HTML element.
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { MessageComponent } from '@syncfusion/ej2-angular-notifications';
@Component({
selector: 'app-root',
template: `<div class="msg-template-section">
<div class="content-section">
<button ejs-button #showBtn id='showBtn' content='Show pull request' cssClass="e-outline e-primary e-success msg-hidden"
(click)="showClick()"></button>
<ejs-message #msg_template id="msg_template" severity="Success" (closed)="closed()">
<ng-template #content>
<h1>Merged pull request</h1>
<p>Pull request #41 merged after a successful build</p>
<button ejs-button id='commitBtn' cssClass='e-link' content='View commit'></button>
<button ejs-button #closeBtn id='closeBtn' cssClass='e-link' content='Dismiss' (click)="dismissClick()"></button>
</ng-template>
</ejs-message>
</div>
</div>`
})
export class AppComponent{
@ViewChild('showBtn') private showBtn: ButtonComponent;
@ViewChild('msg_template') private msgTemplate: MessageComponent;
public showClick(): void {
this.msgTemplate.visible = true;
this.showBtn.element.classList.add('msg-hidden');
}
public dismissClick(): void {
this.msgTemplate.visible = false;
}
public closed(): void {
this.showBtn.element.classList.remove('msg-hidden');
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, MessageModule, ButtonModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 Message Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Toolbar Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</body>
</html>