Angular PrimeNG Form InputSwitch Styling Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Angular PrimeNG Form InputSwitch Styling Component.

The Form InputSwitch is used to take input of a boolean value from the users. It can be bonded to a boolean variable using the ngModel directive provided by Angular itself. If the bonded variable is set to true, the InputSwitch will be enabled by default. 

Angular PrimeNG Form InputSwitch Styling Classes:

• p-inputswitch: This class is applied to the container element.
• p-inputswitch-checked: This class is applied to the container element if the switch is in the checked state.
• p-inputswitch-slider: This class is applied to the slider element behind the handle.

Syntax:

// File: app.component.html
<p-inputSwitch 
    [(ngModel)]="...">
</p-inputSwitch>

// File: app.component.css
:host ::ng-deep .Styling-Classes {
    // CSS Properties
}

Creating Angular application & module installation:

Step 1: Create an Angular application using the below command.

ng new newapp

Step 2: After creating your project folder i.e. newapp, move to it using the below command.

cd newapp

Step 3: Install PrimeNG and PrimeIcons in your project directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After complete installation, the project structure will look like the following:

Example 1: In this example, we used the p-inputswitch and p-inputswitch-checked classes to change the color of the InputSwitch to green.

• app.component.html:

HTML

<div>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form
      InputSwitch Styling Component</h4>

    <p-inputSwitch
        [(ngModel)]="isOn">
    </p-inputSwitch>
</div>

• app.component.css:

CSS

:host ::ng-deep
    .p-inputswitch.p-inputswitch-checked
    .p-inputswitch-slider,
:host ::ng-deep
    .p-inputswitch.p-inputswitch-checked:hover
    .p-inputswitch-slider {
    background: #32CD32;
}

• 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: boolean = false;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { InputSwitchModule } from 'primeng/inputswitch';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputSwitchModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Example 2: In this example, we are targeting the “::before” pseudo-element of the p-inputswitch-slider class to change the dimensions of the slider and change its color to red when in the checked state.

• app.component.html:

HTML

<div>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form InputSwitch
        Styling Component
    </h4>

    <h3 class="mt-6">Default InputSwitch</h3>
    <p-inputSwitch
        [(ngModel)]="isOn1">
    </p-inputSwitch>

    <h3>Modified InputSwitch</h3>
    <p-inputSwitch
        class="custom-switch"
        [(ngModel)]="isOn2">
    </p-inputSwitch>
</div>

• app.component.css:

CSS

:host ::ng-deep .custom-switch
    .p-inputswitch.p-inputswitch-checked
    .p-inputswitch-slider,
:host ::ng-deep .custom-switch
    .p-inputswitch.p-inputswitch-checked:hover
    .p-inputswitch-slider {
    background: #32CD32;
}

:host ::ng-deep .custom-switch
    .p-inputswitch-slider::before {
    height: 1rem;
    width: 1rem;
    margin-top: -0.5rem;
}

:host ::ng-deep .custom-switch
    .p-inputswitch-checked
    .p-inputswitch-slider::before {
    background: red;
}

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    isOn1: boolean = false;
    isOn2: boolean = false;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { InputSwitchModule } from 'primeng/inputswitch';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputSwitchModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/inputswitch