Angular PrimeNG Badge Properties

Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will be seeing Angular PrimeNG Badge Properties.

The Badge Component is used as an indicator for other elements like icons and avatars. It is generally used to display the notification count and status info. 

Angular PrimeNG Badge Properties:

• value: It defines the value to display inside the badge. The default value is null.
• severity: It defines the severity level of the badge component. It accepts string values and the default value is null.
• size: This property defines the size of the badge. The accepted values are “large” and “xlarge”.
• style: It is the inline style of the component.
• styleClass: It is the style class of the component.

Syntax:

<p-badge 
    value="..." 
    size="..." 
    severity="...">
</p-badge>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: It will look like the following:

Project Structure

Example 1: In this example, we used the severity property of the badge to display it in different colors.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Badge Properties</h3>

<p-badge
    value="2"
    severity="warning"
    class="mr-2">
</p-badge>
<p-badge
    value="GeeksforGeeks"
    severity="success"
    class="mr-2">
</p-badge>
<p-badge
    value="is"
    severity="info"
    class="mr-2">
</p-badge>
<p-badge
    value="Love"
    severity="danger">
</p-badge>

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {

}

app.module.ts

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

import { BadgeModule } from 'primeng/badge';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BadgeModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: This example shows the use of the size property to change the size of the badge.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Badge Properties</h3>

<p-badge
    value="GeeksforGeeks"
    severity="success"
    size="xlarge"
    class="mr-2">
</p-badge>
<p-badge
    value="is"
    severity="info"
    size="large"
    class="mr-2">
</p-badge>
<p-badge
    value="Love"
    severity="danger">
</p-badge>

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {

}

app.module.ts

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

import { BadgeModule } from 'primeng/badge';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BadgeModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/badge