Angular PrimeNG Form InputSwitch属性组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常方便。本文将向我们展示如何在Angular PrimeNG中使用Form InputSwitch属性组件。

InputSwitch组件是用来选择一个布尔值的。

属性:

• style。该属性用于定义组件的内联风格。
• styleClass。该属性用于定义组件的风格类。
• tabindex。该属性用于定义元素在标签顺序中的索引。
• inputId。此属性用于定义输入元素的标识符。
• name: 此属性用于定义输入元素的名称。
• ariaLabelledBy。该属性用于建立组件和标签之间的关系，其值应该是一个或多个元素ID。
• disabled:此属性用于指定该元素应被禁用。
• readonly:该属性用于指定该组件不能被编辑。
• trueValue。此属性用于定义检查状态下的值。
• falseValue。此属性用于定义未选中状态下的值。
• ariaLabel。此属性用于定义自动完成对当前元素属性的字符串。

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

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

ng new appname

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

cd appname

第3步：在你给定的目录中安装PrimeNG。

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

Project Structure:

示例1：在下面的代码中，我们将利用上述属性来演示**Angular PrimeNG Form InputSwitch Properties组件的使用。

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

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent {}

• app.module.ts

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

输出:

示例2：在下面的代码中，我们将利用上述属性来演示**Angular PrimeNG Form InputSwitch Properties Component的使用。

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

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent {}

• app.module.ts

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

输出: