Angular PrimeNG Button ButtonSet 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 see Angular PrimeNG Button ButtonSet Component.

A Button Component is used to perform some action when it is clicked by the user. To group the buttons side-by-side, the ButtonSet is used. We can create a button set by wrapping the buttons in a container having the class p-buttonset.

Angular PrimeNG Button ButtonSet Component Properties:

• label: The label property is used to set the text of the button.
• icon: The icon property is used to set an icon for the button.

Angular PrimeNG Button ButtonSet Component Styling:

• p-buttonset: This class is used on a container containing more than one button to group the buttons side-by-side.

Syntax:

<div class="p-buttonset">
    <button 
        pButton 
        type="button" 
        label="...">
       </button>
</div>

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

After following the above steps, the project structure will look like the following:

Project Structure

Run the below command to start the app:

ng serve --open

Example 1: This example shows the use of the p-buttonset class to create a buttonset.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
          Angular PrimeNG Button
          Buttonset Component
      </h3>
</div>

<div class="example-container">
    <div class="p-buttonset">
        <button pButton
                type="button"
                label="Left">
          </button>

          <button pButton
                type="button"
                label="Middle">
          </button>

          <button pButton
                type="button"
                label="Right">
          </button>
    </div>
</div>

app.component.css

div.header, div.example-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

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

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 { BrowserAnimationsModule }
      from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
      ButtonModule,
      BrowserModule,
      BrowserAnimationsModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
    declarations: [AppComponent]
})

export class AppModule {}

Output:

Example 2: In this example, we created a buttonset containing buttons with icons.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
          Angular PrimeNG Button
          Buttonset Component
      </h3>
</div>

<div class="example-container">
    <div class="p-buttonset">
        <button pButton
                type="button"
                label="Left"
                icon="pi pi-check">
          </button>

          <button pButton
                type="button"
                label="Middle"
                icon="pi pi-home">
          </button>

          <button pButton
                type="button"
                label="Right"
                icon="pi pi-info">
          </button>
    </div>
</div>

app.component.css

div.header, div.example-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

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

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 { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';

@NgModule({
  imports: [
    ButtonModule,
    BrowserModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  declarations: [AppComponent]
})

export class AppModule {}

Output:

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