How to get started easily with Syncfusion Angular 11 Badge?

The Essential JS2 Angular Badge component is used to provide alerts to users on new or unread messages, notifications, and additional information to the content. This KB article explains how to easily get started with EJ2 Badge component in the Angular 11 project with minimal code.

Prerequisites

Before starting, the following tools and SDK need to be installed in your machine:

• Node.js
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Installation and application creation

1. You can install Angular CLI 11 using the following command.

npm install -g @angular/cli@11.2.3

2. Create an Angular 11 application

ng new angular11-app

cd angular11-app

3. Installing EJ2 Badge

npm install @syncfusion/ej2-angular-notifications

4. Serve the application using below command.

ng serve 

Your application will open in a browser in the http://localhost:4200. Refer to following screenshot for Angular 11 version.

Adding Angular 11 Badge

Since the badge is a CSS component, you need to just import the required CSS styles files to the style.css file.

1. Import the CSS styles of the Badge component.

[style.css]

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/material.css';

2. Add the Badge component in the template file.

[app.component.html]

<h1>API List type <span class="e-badge e-badge-danger">Deprecated</span></h1>

3. Run the application using the command, and you can see the following represented output of the EJ2 Angular Badge component.

ng serve --open

Badge styles

Badge has the following predefined styles that can be used with .e-badge class to change the appearance of a badge.

• e-badge-primary - Represents a primary notification.
• e-badge-secondary - Represents a secondary notification.
• e-badge-success - Represents a positive notification.
• e-badge-danger - Represents a negative notification.
• e-badge-warning - Represents notification with caution.
• e-badge-info - Represents an informative notification.
• e-badge-light - Represents notification in a light variant.
• e-badge-dark - Represents notification in a dark variant.

[app.component.html]

<h1>Badge type <span class="e-badge e-badge-primary">Primary</span></h1>

<h1>Badge type <span class="e-badge e-badge-secondary">Secondary</span></h1>

<h1>Badge type <span class="e-badge e-badge-success">Success</span></h1>

Now, you can see the Badges when you run the application.

Notifications

The badge style can be applied to notification by adding the modifier class .e-badge-notification to the target element. Notification badges are used when content or a context needs special attention.

When using the notification badge, set the parent element to position: relative.

[app.component.html]

<span style="position: relative;font-size: 22px;">Notification Count

<span class="e-badge e-badge-primary e-badge-notification">99</span>

</span>

Now, you can see the changes like below when you run the application.

Summary

You can learn more about the Angular 11 Badge from the following links:

Checkout Angular 11 Badge features.

Checkout Angular 11 Badge documentation.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!