Angular PrimeNG Form InputSwitch Properties 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. This article will show us how to use the Form InputSwitch Properties Component in Angular PrimeNG.

The InputSwitch Component is used to select a boolean value.

Property Used:

• style: This property is used to define the inline style of the component.
• styleClass: This property is used to define the style class of the component.
• tabindex: This property is used to define the index of the element in tabbing order.
• inputId: This property is used to define the identifier of the input element.
• name: This property is used to define the name of the input element.
• ariaLabelledBy: This property is used to establish relationships between the component and label(s) where its value should be one or more element IDs.
• disabled: This property is used to specify that the element should be disabled.
• readonly: This property is used to specify that the component cannot be edited.
• trueValue: This property is used to define the value in a checked state.
• falseValue: This property is used to define the value in an unchecked state.
• ariaLabel: This property is used to define the string that autocompletes attributes to the current element.

Creating Angular Application & Module  Installation:

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: Install PrimeNG in your given directory.

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

Project Structure:

Example1: In the below code, we will make use of the above properties to demonstrate the use of the Angular PrimeNG Form InputSwitch Properties Component.

• app.component.html

HTML

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

    <p-inputSwitch></p-inputSwitch>
</div>

• app.component.ts

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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:

Example2: In the below code, we will make use of the above properties to demonstrate the use of the Angular PrimeNG Form InputSwitch Properties Component.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form InputSwitch Properties Component</h4>
    <h5>disabled:"true"</h5>
    <p-inputSwitch
      disabled="true">
    </p-inputSwitch>
</div>

• app.component.ts

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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: https://www.primefaces.org/primeng/inputswitch