Angular PrimeNG Form InputSwitch造型组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架可用于制作响应式网站，非常方便。在这篇文章中，我们将了解如何使用Angular PrimeNG Form InputSwitch造型组件。

表单InputSwitch是用来接受用户输入的布尔值的。它可以使用Angular本身提供的ngModel指令绑定到一个布尔变量。如果绑定的变量被设置为真，InputSwich将被默认启用。

Angular PrimeNG Form InputSwitch造型类：

• p-inputswitch。该类应用于容器元素。
• p-inputswitch-checked。如果开关处于检查状态，该类将应用于容器元素。
• p-inputswitch-slider。该类应用于手柄后面的滑块元素。

语法:

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

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

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new newapp

第2步：在创建你的项目文件夹即newapp后，使用以下命令移动到它。

cd newapp

第3步：在你的项目目录中安装PrimeNG和PrimeIcons。

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

项目结构：完成安装后，项目结构将如下所示。

例子1：在这个例子中，我们使用p-inputswitch和p-inputswitch-checked类来改变InputSwitch的颜色为绿色。

• app.component.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:

: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:

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:

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 { }

输出:

例子2：在这个例子中，我们针对p-inputswitch-slider类的“::before”伪元素来改变滑块的尺寸，并在检查状态下将其颜色变为红色。

• app.component.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:

: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:

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:

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 { }

输出: