Angular PrimeNG Badge Component - GeeksforGeeks

24 Aug, 2021
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 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 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
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
Angular-PrimeNG
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular PrimeNG Messages Component
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills