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:
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 >w3wiki</ 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 h 2 { 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 >w3wiki</ 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 h 2 { 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