Angular PrimeNG表格ToggleButton事件

Angular PrimeNG是一个用于Angular应用程序的交互式UI组件的集合。开发人员可以使用这些组件在短时间内制作出漂亮的、响应式的网页界面，因为大多数组件都实现了所有必要的功能。在这篇文章中，我们将讨论**Angular PrimeNG表单的ToggleButton事件。

ToggleButton组件是用来接受用户输入的布尔值的。它的标签可以通过onLabel和offLabel属性根据其当前状态进行改变。ToggleButton只触发一个事件，即onChange。

Angular PrimeNG Form ToggleButton事件：

• onChange。可以向该事件传递一个回调函数，当ToggleButton的状态发生变化时，回调函数会被调用。

语法:

<p-toggleButton 
    [onLabel]="'...'"
    [offLabel]="'...'"
    [onIcon]="'...'"
    [offIcon]="'...'"
    (onChange)="callbackFun($event)"
    [(ngModel)]="...">
</p-toggleButton>

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

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

ng new appname

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

cd appname

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

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Project Structure

例子1：在这个例子中，每当它的值发生变化时，就会向用户显示一条祝酒信息。我们使用onChange事件来检测切换按钮的值的变化。

• app.component.html:

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    ToggleButton Events Component
</h3>
  
<p-toggleButton 
    onLabel="ON"
    offLabel="OFF"
    (onChange)="tbOnChange()"
    [(ngModel)]="isOn">
</p-toggleButton>
  
<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){}
    isOn = false;
  
    tbOnChange()
    {
        this.mService.add({
            severity: "info",
            summary: "ToggleButton 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 { ToastModule } from 'primeng/toast';
import { ToggleButtonModule } from 'primeng/togglebutton';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ToggleButtonModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

例子2：在这个例子中，我们使用了ToggleButton的onChange事件，并使用其checked属性来显示或隐藏文本输入。

• app.component.html:

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    ToggleButton Events Component
</h3>
  
<p-toggleButton 
    [onLabel]="'Show Input'"
    [offLabel]="'Hide Input'"
    [onIcon]="'pi pi-check'"
    [offIcon]="'pi pi-times'"
    (onChange)="tbOnChange($event)"
    [(ngModel)]="isOn">
</p-toggleButton>
<br>
<input 
    placeholder="Enter Your Name"
    type="text" 
    pInputText 
    [hidden]="isOn" 
    style="margin-top: 30px;"
/>

• 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){}
    isOn = false;
    isInputVisible = false;
  
    tbOnChange(ev: any) {
        var val = ev.checked; 
  
        if(val) {
            this.isInputVisible = true;
        } else {
            this.isInputVisible = false;
        }
    }
}

• 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 { ToastModule } from 'primeng/toast';
import { InputTextModule } from 'primeng/inputtext';
import { ToggleButtonModule } from 'primeng/togglebutton';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ToggleButtonModule,
        ToastModule,
        InputTextModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出: