Angular PrimeNG Form InputSwitch Events组件

Angular PrimeNG是一个为Angular应用程序制作的UI组件集合。它使开发者无需投入大量的时间就能轻松地建立起漂亮而高效的Web界面。在这篇文章中，我们将看到Angular PrimeNG Form InputSwitch Events Component.。

InputSwitch组件用于从用户那里获取一个布尔输入。它有两种状态，开启和关闭。它可以通过将其值与一个设置为 “true “的布尔变量绑定来开启。只有一个与InputSwitch组件相关的事件，如下所示。

Angular PrimeNG Form InputSwitch 事件：

• onChange。InputSwitch的这个事件接受一个回调，当开关的状态发生变化时就会被触发。

语法:

<p-inputSwitch
    (onChange)="callback()"
    [(ngModel)]="switch1">
</p-inputSwitch>

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

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

ng new myapp

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

cd myapp

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

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

项目结构：完成上述步骤后，其结构将如下所示。

Project Structure

例子1：在这个例子中，每当InputSwitch的onChange事件触发时，我们就会显示一条祝酒词。

• app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form <br>
    InputSwitch Events Component
</h3>
  
<p-inputSwitch
    (onChange)="switchOnChange()"
    [(ngModel)]="switch1">
</p-inputSwitch>
  
<p-toast></p-toast>

• app.component.ts:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private mService: MessageService) { }
    switch1: boolean = false;
  
    switchOnChange() {
        this.mService.add({
            severity: "success",
            summary: "InputSwitch Value Changed",
            detail: "onChange Event triggered"
        })
    }
}

• app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { InputSwitchModule } 
    from 'primeng/inputswitch';
import { ToastModule } from 'primeng/toast';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        InputSwitchModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

例子2：在这个例子中，每当开关的值发生变化时，我们就检查它的当前值，如果当前值为真，就显示评级条，否则评级条将被隐藏。

• app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form <br>
    InputSwitch Events Component
</h3>
  
<p-inputSwitch
    (onChange)="switchOnChange($event)"
    [(ngModel)]="switchValue">
</p-inputSwitch>
  
<p-rating
    [cancel]="false"
    [hidden]="isRatingHidden"
    [(ngModel)]="rating">
</p-rating>

• app.component.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    switchValue: boolean = false;
    isRatingHidden = true;
    rating: number = 4;
  
    switchOnChange(e: any) {
        var value = e.checked;
        if (value) {
            this.isRatingHidden = false;
        } else {
            this.isRatingHidden = true;
        }
    }
}

• app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { InputSwitchModule } 
    from 'primeng/inputswitch';
import { RatingModule } from 'primeng/rating';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        InputSwitchModule,
        RatingModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出: