Angular PrimeNG Badge Component

Angular PrimeNG is an open-source framework with a rich set 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 know how to use the Badge component in Angular PrimeNG.

Badge component: It is used to represent the text as a status indicator or number as a badge.

Properties:

• value: It is used to define the value to display inside the badge. It is of string data type, the default value is null.
• severity: It is used to set the severity type of the badge. It is of string data type, the default value is null.
• size: It is used to define the size of the badge, valid options are “large” and “xlarge”. It is of string data type, the default value is null.
• style: It is used to set the Inline style of the component. It is of object data type, the default value is null.
• styleClass: It is used to define the style class of the component. It is of string data type, the default value is null.

Styling:

• p-badge: It is a badge element.
• p-overlay-badge: It is a wrapper badge and its target.
• p-badge-dot: It is a badge element with no value.
• p-badge-success: It is a badge element with success severity.
• p-badge-info: It is a badge element with info severity.
• p-badge-warning: It is a badge element with warning severity.
• p-badge-danger: It is a badge element with danger severity.
• p-badge-lg: It is a large badge element.
• p-badge-xl: It is extra-large badge element.

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.

Example 1: This is the basic example that shows how to use the badge component.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Badge Component</h5>
<div class="badges">
  <p-badge [value]="89" styleClass="p-mr-2" severity="success"></p-badge>
  <p-badge [value]="26" styleClass="p-mr-2" severity="info"></p-badge>
  <p-badge [value]="65" styleClass="p-mr-2"></p-badge>
  <p-badge [value]="33" styleClass="p-mr-2" severity="danger"></p-badge>
  <p-badge [value]="12" styleClass="p-mr-2" severity="warning"></p-badge>
</div>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { BadgeModule } from "primeng/badge";

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

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {}

Output:

Example 2: In this example, we will know how to insert an icon in the message component.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Badge Component</h5>
<i
  class="pi pi-bars p-mr-3"
  pBadge
  style="font-size: 2rem"
  value="10"
  styleClass="p-mr-5">
</i>
<i
  class="pi pi-chevron-left p-mr-3"
  pBadge
  severity="danger"
  style="font-size: 2rem"
  value="34">
</i>
<i
  class="pi pi-chevron-right"
  pBadge
  severity="success"
  style="font-size: 2rem"
  value="47">
</i>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { BadgeModule } from "primeng/badge";

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

app.compnent.ts

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

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

Output:

Reference: https://primefaces.org/primeng/showcase/#/badge