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;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ 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;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ 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 : 1 rem; width : 1 rem; margin-top : -0.5 rem; } :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
Contact Us