Severities in EJ2 TypeScript Message control

10 May 20234 minutes to read

The severity denotes the importance and context of the message to the user. The message contains different severity types. Use the severity property to display the messages with different severity levels.

The available severity types are Normal, Success, Info, Warning and Error. The default severity type for messages is Normal.

The following example demonstrates the severity of the messages.

import { Message } from '@syncfusion/ej2-notifications'

    let msgDefault: Message = new Message({
        content: "Editing is restricted"
    });
    msgDefault.appendTo('#msg_default');

    let msgInfo: Message = new Message({
        content: "Please read the comments carefully",
        severity: "Info"
    });
    msgInfo.appendTo('#msg_info');

    let msgSuccess: Message = new Message({
        content: "Your message has been sent successfully",
        severity: "Success"
    });
    msgSuccess.appendTo('#msg_success');

    let msgWarning: Message = new Message({
        content: "There was a problem with your network connection",
        severity: "Warning"
    });
    msgWarning.appendTo('#msg_warning');

    let msgError: Message = new Message({
        content: "A problem occurred while submitting your data",
        severity: "Error"
    });
    msgError.appendTo('#msg_error');
<html>

<head>
    <title>Essential JS 2 Message control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Message control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="msg-default-section">
            <div class="content-section">
                <div id="msg_default"></div>
                <div id="msg_info"></div>
                <div id="msg_success"></div>
                <div id="msg_warning"></div>
                <div id="msg_error"></div>
            </div>
        </div>
    </div>
    <style>
        /* Sample level styles */
        .msg-default-section .content-section {
            margin: 0 auto;
            max-width: 450px;
            padding-top: 10px;
        }
    
        .msg-default-section .e-message {
            margin: 10px 0;
        }
    </style>
</body>

</html>