Angular PrimeNG Button Badges Component

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 Button Badges Component.

A Button component is used for carrying out some action when clicked. A badge can be used to show some extra information to the user. Badges come in four severity levels: success, danger, info, and warning. The badge can be used with a button by using the badge property of Button.

Angular PrimeNG Button Button Badges Component Properties:

• badge: The badge property shows the badge with the button. The value of badge property is shown inside the badge.
• badgeClass: The badgeClass property is used to change the styling of the badge.
• label: The label property of the Button component is used to set the button’s text.

Angular PrimeNG Button Button Badges Component Styling:

• p-badge-danger: This is used as the value of badgeClass property to set the styling of the badge to danger.
• p-badge-success: This is used as the value of badgeClass property to set the styling of the badge to success.
• p-badge-info: This is used as the value of badgeClass property to set the styling of the badge to info.
• p-badge-warning: This is used as the value of badgeClass property to set the styling of the badge to warning.

Syntax:

<button pButton type="button" label="Bookmarks" badge="8"></button>

Creating Angular Application and Installing the Module:

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: Finally, Install PrimeNG in your given directory.

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

The project Structure will look like this after following the above steps:

Project Structure

Example 1: This example shows the use of the badge property to show a badge inside a button.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Button Badges Component</h3>
</div>
<div class="buttons">
    <p-button label="Requests" badge="18"></p-button>
    <p-button label="Approved" badge="8"></p-button>
</div>

app.component.css

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.header h2{
    margin-bottom: 0;
    color: green;
}

p-button{
    margin-bottom: 10px;
}

app.component.ts

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

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {ButtonModule} from 'primeng/button'
import {BadgeModule} from 'primeng/badge';

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

Run the below command to see the output.

ng serve --open

Output:

Example 2: In this example, we used the badge styling classes to change the styling of the badge.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Button Badges Component</h3>
</div>
<div class="buttons">
    <p-button label="Requests" badge="18"
        badgeClass="p-badge-danger">
      </p-button>
    <p-button label="Requests" badge="18"
        badgeClass="p-badge-success">
      </p-button>
    <p-button label="Requests" badge="18"
        badgeClass="p-badge-info">
      </p-button>
    <p-button label="Requests" badge="18"
        badgeClass="p-badge-warning">
      </p-button>
</div>

app.component.css

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.header h2{
    margin-bottom: 0;
    color: green;
}

p-button{
    margin-bottom: 10px;
}

app.component.ts

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

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {ButtonModule} from 'primeng/button'
import {BadgeModule} from 'primeng/badge';

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

Output:

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