How to get started easily with Syncfusion Angular 7 Badges?
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 7 project with minimal code.
Prerequisites
Before starting, the following tools and SDK need to be installed in your machine:
- Node.js (v8.10.0 or above)
- Angular 7
- Angular CLI
Installation and application creation
You can install Angular CLI 7 using the following command.
npm install -g @angular/cli@7.0.5 |
If you need to follow and run the application in Angular 6 or earlier version, replace the CLI command version with your preferred version and install it. |
npm install -g @angular/cli@<CLI VERSION> |
Create an Angular 7 application
ng new badge-angular7 cd badge-angular7 |
Installing EJ2 Badge
npm install @syncfusion/ej2-angular-notifications |
Serve the application
ng serve --open |
Your application will open in a browser in the http://localhost:4200. Refer to following screenshot for Angular 7 version.
Adding Angular 7 Badge
Since the badge is a CSS component, you need to just import the required CSS styles files to the style.css file.
- 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'; |
- 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>
|
- 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 7 Badge from the following links:
GitHub repository of the code used in this article can be found here.
Checkout Angular 7 Badge features.
Checkout Angular 7 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!
|
|
|
