Angular PrimeNG Button Link Buttons Component
Last Updated :
02 Aug, 2022
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 Link Buttons Component.
A Button component is used for carrying out some action when clicked. The Link button has a transparent background and is styled as a link (<a> tag). To style a button as a link the p-button-link class is used.
Angular PrimeNG Button Link Buttons Component Properties:
- label: This property of the button component is used to set the text of the button.
- icon: The icon property of the button is used to set the icon to display in the button.
Angular PrimeNG Button Link Buttons Component Styling:
- p-button-link: This class is used to style the button as a link.
Syntax:
<button pButton type="button"
label="Link Button"
class="p-button-link">
</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 p-button-link to create a simple link button.
app.component.html
< div class = "header" >
< h2 >GeeksforGeeks</ h2 >
< h3 >Angular PrimeNG Button
Link Buttons Component
</ h3 >
</ div >
< div class = "buttons" >
< 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 { 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: In this example, we used the icon property of the button component to display an icon with the link button.
app.component.html
< div class = "header" >
< h2 >GeeksforGeeks</ h2 >
< h3 >Angular PrimeNG Button Link Buttons Component</ h3 >
</ div >
< div class = "buttons" >
< button pButton type = "button" label = "Link Button"
class = "p-button-link"
icon = "pi pi-check" >
</ button >
< button pButton type = "button" label = "Link Button"
class = "p-button-link"
icon = "pi pi-hashtag" >
</ button >
< button pButton type = "button" label = "Link Button"
class = "p-button-link"
icon = "pi pi-moon" >
</ 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 { 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
Share your thoughts in the comments
Please Login to comment...