Angular PrimeNG Button Loading State Component

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Button Loading State Component.

A Button component is used for carrying out some action when clicked. A loading button is used to give the user a signal that something is loading in the background. To convert a button into a loading button the loading property is used. When the button is in a loading state it will fade out a bit.

Angular PrimeNG Button Text Buttons Component Properties:

• loading: This property is used to set the loading state of the button to true or false.
• loadingIcon: This property is used to change the default loading button icon.

Syntax:

<button 
    pButton
    type="button" 
    label=" ... " 
    [loading]="true">
</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 loading property to create a loading button.

app.component.html

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

<div class="buttons">
      <button pButton type="button"
        label="Default Button">
      </button>

      <button pButton type="button"
        label="Loading Button" [loading]="true">
      </button>
</div>

app.component.css

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

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

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'

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

Run the below command to see the output.

ng serve --open

Output:

Example 2: The loading icon can be changed using the loadingIcon property. In this example, we changed the loading icon to the check icon.

app.component.html

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

<div class="buttons">
      <button pButton type="button"
        label="Default Loading Icon"
        [loading]="true">
      </button>

      <button
        pButton
        type="button"
        label="Custom Loading Icon"
        loadingIcon="pi pi-spin pi-sync"
        [loading]="true">
      </button>
</div>

app.component.css

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

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

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'

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

Output:

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