Primeng button Angular tutorials|p-button examples


This post covers an integrating primeng button with examples.

First see this tutorial how to
(Integrate primeng into Angular)[2018/07/primeng-with-angular-6-example-from.html] for doing below things.

  • create a angular application using ng cli command
  • Integrate primeng into Angular application

Import ButtonModule into Angular application

In Application Module file ie app.module.ts

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

app.module.ts:

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';

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

Primeng button example

In HTML template, You can add button in two ways

  • p-button element
  • pButton directive

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

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

pButton directive allows to add primeng behavior to existing html button element

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

app.component.html

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

Primeng button color and styles

primeg provides different button variations with 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 icon to primeng button?

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

icon to button are aligned using iconPos, 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 primeng button

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

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

<h1>{{title}}</h1>
<button pButton type="button" [disabled]="isDisabled" label="Disabled Button"></button>

In Typescript Component, Define class variable binded to disabled attribute.

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

@Component({
  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 typescript component, Define even bind function

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

@Component({
  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 event binding function

In Template html component:

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

In typescript component:

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

Issues

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

button label is not working

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

  "styles": [
        "src/styles.scss",
         "node_modules/primeng/resources/themes/saga-blue/theme.css",
         "node_modules/primeng/resources/primeng.min.css",
         "node_modules/primeicons/primeicons.css",
]

Second, Check button module is imported into app

import { ButtonModule } from 'primeng/button';

@NgModule({
   imports: [
      ButtonModule
   ]
THE BEST NEWSLETTER ANYWHERE
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
Subscribe
You'll get a notification every time a post gets published here.