Primeng button Angular tutorials|p-button examples

Primeng Angular 13 Button click event example

This post covers an How to add primeng button to Angular component with examples.

First, see this tutorial on how to Integrate primeng into Angular for doing the below things.

  • create an angular application using the ng CLI command
  • Integrate primeng into the Angular application

Import ButtonModule into the Angular application

In the Application Module file ie app.module.ts

  • import ButtonModule from the primeng library
  • Added ButtonModule to import section of app module.


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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Primeng button example

In an HTML template, You can add buttons in two ways

  • p-button element
  • pButton directive

p-button element is a new element that we can add as seen below.

<p-button label="Reset"></p-button>

pButton directive allows adding primeng behavior to existing HTML button element

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


<span><button pButton type="button" label="Submit">
  <p-button label="Reset"></p-button>

Primeng button color and styles

primeng provides different button variations with a CSS selector.

  • p-button-primary
  • p-button-secondary
  • p-button-success
  • p-button-info
  • p-button-warning
  • p-button-help
  • p-button-danger

Here is an example

<button pButton type="button" label="Primary Button" class="p-button-primary"></button>
<button pButton type="button" label="Secondary Button" class="p-button-secondary"></button>
<button pButton type="button" label="Success Button" class="p-button-success"></button>
<button pButton type="button" label="Info Button" class="p-button-info"></button>
<button pButton type="button" label="Warning Button" class="p-button-warning"></button>
<button pButton type="button" label="Help Button" class="p-button-help"></button>
<button pButton type="button" label="Danger Button" class="p-button-danger"></button>

Output: primeng button angular 12 tutorial with examples

How to add an icon to the primeng button?

primeng button has an icon attribute, These icons can be primeng or font awesome icons.

icon to the button is aligned using iconPos, the default position is left.

<button pButton type="button" label="Edit" icon="pi pi-user-edit"></button>
<button pButton type="button" label="Delete" icon="pi pi-trash"></button>

How to disable the primeng button

One way, thedisabled attribute can be added to make it button disabled.

Another way is to use attribute binding [disabled] with the expression , These expressions evaluated to truthy or false values

<button pButton type="button" [disabled]="isDisabled" label="Disabled Button"></button>

In Typescript Component, Define the class variable bound to the disabled attribute.

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {
  title = 'primeng button disabled example';
  public isDisabled: boolean;
  constructor() {
    this.isDisabled = true;


primeng button sizes

It provides different sizes

  • regular or default size
  • small button using p-button-sm
  • large button using p-button-lg

Here is an example

<button pButton type="button" label="Regular" class="p-button-sm"></button>

<button pButton type="button" label="small" class="p-button-sm"></button>
<button pButton type="button" label="large" class="p-button-lg"></button>

primeng button event click example

You can add onClick event to p-button element or HTML button element with pButton directive.

<p-button label="Click" (onClick)="clickEvent()"></p-button>

In the typescript component, Define even bind function.

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {

  clickEvent(event) {
    console.log("Click Event fired");


you can also pass parameters to the event-binding function

In Template HTML component:

<p-button label="Click" (onClick)="clickEvent($event)"></p-button>

In the typescript component:

  clickEvent(event: any) {
    console.log("Click Event fired");


Initially, I encountered a lot of issues using buttons in my angular application.

button label is not working

To use the primeng button in the angular application, you have to import the Button module into the angular app. First, Please make sure that primeng and icon styles are configured correctly in angular.json.

  "styles": [

Second, the Check button module is imported into the app.

import { ButtonModule } from 'primeng/button';

   imports: [
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.