Angular PrimeNG Button Basic 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 see Angular PrimeNG Button Basic Component.
A Button component is used for carrying out some action when clicked. The basic button refers to the simplest button provided by PrimeNG. These basic buttons are a simple button, a disabled button, and a link button.
Angular PrimeNG Button Basic Component Properties:
- label: The label property is used to set the text of the button component.
- disabled: This is an optional boolean property used to disable a button.
Angular PrimeNG Button Basic Component Styling:
- p-button-link: This class is used to style the button as a link.
Syntax:
<button pButton type="button" disabled="true | false" label="..." class="..."> </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:
Run the below command to see the output.
ng serve --open
Example 1: This example shows the use of the Angular PrimeNG Button Basic Component using the simple, disabled, and link buttons.
app.component.html
< div class = "header" > < h2 >w3wiki</ h2 > < h3 >Angular PrimeNG Button Basic Component</ h3 > </ div > < div class = "buttons" > < button pButton type = "button" label = "Simple Button" > </ button > < button pButton type = "button" label = "Disabled Button" disabled = "true" > </ button > < button pButton type = "button" label = "Link Button" class = "p-button-link" > </ button > </ div > |
app.component.css
div{ display : flex; align-items: center ; justify- content : center ; flex- direction : column; } .header h 2 { 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 { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { AppComponent } from './app.component' ; import {ButtonModule} from 'primeng/button' @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ButtonModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Example 2: This is another example that shows the use of Angular PrimeNG Button Basic Component using different colors.
app.component.html
< div class = "header" > < h2 >w3wiki</ h2 > < h3 >Angular PrimeNG Button Basic Component</ h3 > </ div > < div class = "buttons" > < button pButton type = "button" label = "Simple Button" class = "p-button-secondary" > </ button > < button pButton type = "button" label = "Simple Button" class = "p-button-warning" > </ button > < button pButton type = "button" label = "Simple Button" class = "p-button-info" > </ button > < button pButton type = "button" label = "Disabled Button" class = "p-button-success" disabled = "true" > </ button > < button pButton type = "button" label = "Disabled Button" class = "p-button-danger" disabled = "true" > </ button > < button pButton type = "button" label = "Disabled Button" class = "p-button-help" disabled = "true" > </ button > < button pButton type = "button" label = "Link Button" class = "p-button-link" > </ button > </ div > |
app.component.css
div{ display : flex; align-items: center ; justify- content : center ; flex- direction : column; } .header h 2 { 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 { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { AppComponent } from './app.component' ; import {ButtonModule} from 'primeng/button' @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ButtonModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Reference: http://primefaces.org/primeng/button