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;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ 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;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ 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:
Contact Us