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:
Example 1: This example shows the use of the loading property to create a loading button.
< 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 >
|
div{ display : flex;
align-items: center ;
justify- content : center ;
flex- direction : column;
} .header h 2 {
margin-bottom : 0 ;
color : green ;
} button{ margin-bottom : 10px ;
} |
import { Component } from '@angular/core' ;
@Component({ selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
}) export class AppComponent {} |
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.
< 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 >
|
div{ display : flex;
align-items: center ;
justify- content : center ;
flex- direction : column;
} .header h 2 {
margin-bottom : 0 ;
color : green ;
} button{ margin-bottom : 10px ;
} |
import { Component } from '@angular/core' ;
@Component({ selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
}) export class AppComponent {} |
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