Getting Started

The following section explains the steps required to create a simple badge component using styles and its basic usage.

Setup Angular Environment

You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.

npm install -g @angular/cli

Create an Angular Application

Start a new Angular application using below Angular CLI command.

ng new my-app
cd my-app

Adding Syncfusion Badge package

All the available Essential JS 2 packages are published in npmjs.com registry.

To install Badge component, use the following command.

npm install @syncfusion/ej2-angular-notifications --save

Adding CSS reference

The Badge component CSS files are available in the ej2-notifications package folder. This can be referenced in your application using the following code.

[src/styles.css]

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

Add Badge component

Modify the template in [src/app/app.component.ts] file to render the badge component.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div id='element'><h1>Badge Component <span class="e-badge">New</span></h1></div>`
})

export class AppComponent {}

Run the application

Use the following command to run the application in browser.

ng serve --open

The following example shows a basic badge component.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div id='element'><h1>Badge Component <span class="e-badge">New</span></h1></div>`
})

export class AppComponent {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);