How to get started easily with Syncfusion Angular 11 Badge?

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 the command below. 

ng serve 

Adding Angular 11 Badge

Since the badge is a CSS component, you just need to import the required CSS style files into 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 the .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 notifications 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, as shown below, when you run the application.

Conclusion

We hope you enjoyed learning about how to get started easily with Syncfusion Angular 11 Badge.

You can refer to our Angular Badge feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular badge example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!