Angular PrimeNG Button Styling
Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will be seeing the Button Styling in Angular PrimeNG.
The Button component in PrimeNG is used to carry out an action when it is clicked. There are 3 structural style classes for the button component: p-button, p-button-icon, and p-button-label. These classes will be applied to the button, the icon, and the label respectively, and can be used to change the properties of these elements according to our needs.
Angular PrimeNG Button Styling Properties:
- label: The label property of the button is used to set its text.
- icon: The icon property is used to set the icon for the button.
Angular PrimeNG Button Styling Classes:
- p-button: This class is applied to the button by the PrimeNG library.
- p-button-icon: This class is applied to the button icon by the PrimeNG library.
- p-button-label: This class is applied to the button label by the PrimeNG library.
Syntax:
<button pButton type="button" label="..." icon="..."></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
Project Structure: The project Structure will look like this after following the above steps:
Project Structure
Example 1: In this example, we used the p-button-label class to change the font-size of the Button label.
app.component.html
<div class="header"> <h2>GeeksforGeeks</h2> <h3>Angular PrimeNG Button Styling</h3> </div> <div class="example-container"> <button pButton type="button" label="Hello" icon="pi pi-check"> </button> </div> |
app.component.css
div.header, div.example-container { display: flex; align-items: center; justify-content: center; flex-direction: column; } .header h2 { margin-bottom: 0; color: green; } |
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: [ButtonModule, BrowserModule, BrowserAnimationsModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} |
styles.css
button .p-button-label { font-size: 40px; } |
- Run the below command:
ng serve --open
Output:
Example 2: In this example, we used the p-button-icon class to change the font-size and the color of the button icon.
app.component.html
<div class="header"> <h2>GeeksforGeeks</h2> <h3>Angular PrimeNG Button Styling</h3> </div> <div class="example-container"> <button pButton type="button" label="Hello" icon="pi pi-check"> </button> </div> |
app.component.css
div.header, div.example-container { display: flex; align-items: center; justify-content: center; flex-direction: column; } .header h2 { margin-bottom: 0; color: green; } |
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: [ButtonModule, BrowserModule, BrowserAnimationsModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} |
styles.css
button .p-button-icon { font-size: 30px; color: red; } |
Output:
Reference: http://primefaces.org/primeng/button
