Icons in Angular Message component

27 Apr 20249 minutes to read

This section explains the message with no icons, how to show or hide the close icon and add the custom severity icon to the message.

No Icon

By default, severity icons can be displayed according to the severity types to make it more understandable to the user by visual information rather than text. To hide the severity icons, set the showIcon property to false.

The following example demonstrates the different severity messages without the severity icons.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MessageModule } from '@syncfusion/ej2-angular-notifications'




import { Component } from '@angular/core';

@Component({
imports: [
         MessageModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="msg-default-section">
        <div class="content-section">
            <ejs-message id="msg_default" content="Editing is restricted" [showIcon]="false"></ejs-message>
            <ejs-message id="msg_info" content="Please read the comments carefully" severity="Info" [showIcon]="false"></ejs-message>
            <ejs-message id="msg_success" content="Your message has been sent successfully" severity="Success" [showIcon]="false"></ejs-message>
            <ejs-message id="msg_warning" content="There was a problem with your network connection" severity="Warning" [showIcon]="false"></ejs-message>
            <ejs-message id="msg_error" content="A problem occurred while submitting your data" severity="Error" [showIcon]="false"></ejs-message>
        </div>
    </div>`
})
export class AppComponent{
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom Icon

By default, the severity icons can be displayed according to the severity type to make it more understandable to the user by visual information rather than text. If the user wants to customize these icons, it can be achieved through the cssClass property.

The following example demonstrates how the default message is rendered with a custom severity icon.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MessageModule } from '@syncfusion/ej2-angular-notifications'




import { Component } from '@angular/core';

@Component({
imports: [
         MessageModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="msg-custom-section">
        <div class="content-section">
            <ejs-message id="msg_icon" cssClass="custom">Essential JS 2 is a modern JavaScript UI Controls library that has
            been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no
            external dependencies. It also includes complete support for Angular, React, Vue, ASP.NET MVC and ASP.NET
            Core frameworks.</ejs-message>
        </div>
    </div>`
})
export class AppComponent{
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Close Icon

The message can be rendered with or without the close icon. The close icon is used to hide the message, either by manually clicking the close icon or through keyboard interaction.

By default, the close icon is not rendered in the message. To show the close icon, set the showCloseIcon property to true.

In the following example, the messages are rendered with the close icon.

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 { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { Button, ButtonComponent, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';
import { Message, MessageComponent } from '@syncfusion/ej2-angular-notifications';
import { getComponent } from '@syncfusion/ej2-base';

@Component({
imports: [
         MessageModule, ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="msg-icon-section">
        <div class="content-section">
            <button #btn1 ejs-button content="Show Default Message" cssClass="e-outline e-primary msg-hidden" (click)="defaultClick()"></button>
            <ejs-message #msg_default_icon id="msg_default_icon" [showCloseIcon]="true" (closed)="defaultClosed()">Editing is restricted</ejs-message>
            <button #btn2 ejs-button content="Show Info Message" cssClass="e-outline e-primary e-info msg-hidden" (click)="infoClick()"></button>
            <ejs-message #msg_info_icon id="msg_info_icon" severity="Info" [showCloseIcon]="true" (closed)="infoClosed()">Please read the comments carefully</ejs-message>
            <button #btn3 ejs-button content="Show Success Message" cssClass="e-outline e-primary e-success msg-hidden" (click)="successClick()"></button>
            <ejs-message #msg_success_icon id="msg_success_icon" severity="Success" [showCloseIcon]="true" (closed)="successClosed()">Your message has been sent successfully</ejs-message>
            <button #btn4 ejs-button content="Show Warning Message" cssClass="e-outline e-primary e-warning msg-hidden" (click)="warningClick()"></button>
            <ejs-message #msg_warning_icon id="msg_warning_icon" severity="Warning" [showCloseIcon]="true" (closed)="warningClosed()">There was a problem with your network connection</ejs-message>
            <button #btn5 ejs-button content="Show Error Message" cssClass="e-outline e-primary e-error msg-hidden" (click)="errorClick()"></button>
            <ejs-message #msg_error_icon id="msg_error_icon" severity="Error" [showCloseIcon]="true" (closed)="errorClosed()">A problem has been occurred while submitting your data</ejs-message>
        </div>
    </div>`
})
export class AppComponent{
    @ViewChild('btn1') private defaultBtn?: ButtonComponent;
    @ViewChild('btn2') private infoBtn?: ButtonComponent;
    @ViewChild('btn3') private successBtn?: ButtonComponent;
    @ViewChild('btn4') private warningBtn?: ButtonComponent;
    @ViewChild('btn5') private errorBtn?: ButtonComponent;
    @ViewChild('msg_default_icon') private msgDefault?: MessageComponent;
    @ViewChild('msg_success_icon') private msgSuccess?: MessageComponent;
    @ViewChild('msg_warning_icon') private msgWarning?: MessageComponent;
    @ViewChild('msg_error_icon') private msgError?: MessageComponent;
    @ViewChild('msg_info_icon') private msgInfo?: MessageComponent;

    public defaultClick(): void {
        this.show(this.msgDefault as MessageComponent, this.defaultBtn as ButtonComponent);
    }

    public defaultClosed(): void {
        this.defaultBtn?.element.classList.remove('msg-hidden');
    }

    public infoClick(): void {
        this.show(this.msgInfo as MessageComponent, this.infoBtn as ButtonComponent);
    }

    public infoClosed(): void {
        this.infoBtn?.element.classList.remove('msg-hidden');
    }

    public successClick(): void {
        this.show(this.msgSuccess as MessageComponent, this.successBtn as ButtonComponent);
    }

    public successClosed(): void {
        this.successBtn?.element.classList.remove('msg-hidden');
    }

    public warningClick(): void {
        this.show(this.msgWarning as MessageComponent, this.warningBtn as ButtonComponent);
    }

    public warningClosed(): void {
        this.warningBtn?.element.classList.remove('msg-hidden');
    }

    public errorClick(): void {
        this.show(this.msgError as MessageComponent, this.errorBtn as ButtonComponent );
    }

    public errorClosed(): void {
        this.errorBtn?.element.classList.remove('msg-hidden');
    }

    public show(message: Message, btn: Button): void {
        message.visible = true;
        btn.element.classList.add('msg-hidden');
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));