How to get started easily with Syncfusion Angular 8 Badge?
Prerequisites
Before starting, the following tools and SDK need to be installed in your machine:
- Node.js (v8.10.0 or above)
- Angular 8
- Angular CLI
Installation and application creation
You can install Angular CLI 8 using the following command.
npm install -g @angular/cli@8.1.1 |
If you need to follow and run the application in Angular 7 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 8 application
ng new badge-angular8 cd badge-angular8 |
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 8 version.
Adding Angular 8 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.
Conclusion
I hope you enjoyed learning about how to get started easily with Syncfusion Angular 8 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, Direct-Trac, or feedback portal. We are always happy to assist you!
|
|
|
