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 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: 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 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 { }