Angular PrimeNG Form ToggleButton Styling

Angular PrimeNG is an open-source front-end UI framework developed by PrimeTek for developing efficient and scalable angular applications. Using PrimeNG in their projects helps developers cut down the development time and focus on other important application areas. In this article, we will be seeing the Angular PrimeNG Form ToggleButton Styling.

The ToggleButton component is used to take input of boolean value from the user. Its label can be changed based on its current state using the onLabel and offLabel properties. The ToggleButton triggers only one event, that is, onChange. 

Angular PrimeNG Form ToggleButton Styling Classes:

• p-togglebutton: It is the container element of the ToggleButton.
• p-button-icon-left: It is the left icon element of the ToggleButton.
• p-button-icon-right: It is the right icon element of the ToggleButton.
• p-button-text: It is the text element of the ToggleButton.

Syntax:

// app.component.html
<p-toggleButton
    [onLabel]="'...'"
    [offLabel]="'...'"
    ...
    [(ngModel)]="...">
</p-toggleButton>

// app.component.css
:host ::ng-deep .structural-class{
    // Custom CSS
}

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 article, we used to “p-togglebutton” styling class to change the color of the togglebutton to green color.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    ToggleButton Styling Component
</h3>

<p-toggleButton
    [onLabel]="'Switched On'"
    [offLabel]="'Switched Off'"
    [(ngModel)]="isOn">
</p-toggleButton>

• app.component.css:

CSS

:host ::ng-deep .p-highlight.p-togglebutton,
:host ::ng-deep .p-highlight.p-togglebutton:hover {
    background: green;
    border: none;
    color: white;
}

:host ::ng-deep .p-togglebutton:focus {
    box-shadow: 0 0 0 0.2rem #07c700fb;
}

• app.component.ts:

Javascript

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    isOn = false;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ToggleButtonModule } from 'primeng/togglebutton';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ToggleButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In this article, we used the icon styling classes of the ToggleButton component to change the color and the size of the icons on the left and right of the label.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    ToggleButton Styling Component
</h3>

<h3>Default ToggleButton</h3>
<p-toggleButton
    [onLabel]="'Switched On'"
    [offLabel]="'Switched Off'"
    [onIcon]="'pi pi-check'"
    [offIcon]="'pi pi-times'"
    [(ngModel)]="isOn_1">
</p-toggleButton>

<h3>Custom ToggleButton</h3>
<p-toggleButton
    class="tbCustom"
    [onLabel]="'Switched On'"
    [offLabel]="'Switched Off'"
    [onIcon]="'pi pi-check'"
    [offIcon]="'pi pi-times'"
    [(ngModel)]="isOn_2">
</p-toggleButton>

• app.component.css:

CSS

:host ::ng-deep .tbCustom .p-button-icon-left {
    color: red !important;
    font-weight: 700;
    font-size: 40px;
}

• app.component.ts:

Javascript

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    isOn_1 = false;
    isOn_2 = false;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ToggleButtonModule } from 'primeng/togglebutton';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ToggleButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: https://primefaces.org/primeng/togglebutton