Angular PrimeNG Form ToggleButton属性

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

ToggleButton组件用于制作一个用户可以通过点击它来切换的按钮。

Angular PrimeNG Form ToggleButton属性：

onLabel。它用于设置开启状态的标签。它的数据类型为字符串，默认值为空。
offLabel:它用于设置关闭状态的标签。它是字符串数据类型，默认值为空。
onIcon: 它用于设置开机状态的图标。它的数据类型为字符串，默认值为空。
offIcon: 它用于设置关闭状态的图标。它是字符串数据类型，默认值为空。
iconPos。它用于设置图标的位置，有效值是 “左 “和 “右”。它是字符串数据类型，默认值是左。
style。它用于设置元素的内联风格。它是字符串数据类型，默认值为空。
styleClass。它用于设置元素的风格类别。它是字符串数据类型，默认值为空。
disabled。它指定该元素应被禁用。它是一个布尔数据类型，默认值是false。
tabindex。它用于设置元素在标签顺序中的索引。它是数字数据类型，默认值为空。
inputId。它是底层输入元素的ID标识符。它是字符串数据类型，默认值为空。

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

第1步：要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。

npm install -g angular-cli

步骤2：现在我们将创建一个angular项目。

ng new project_name

第3步：在创建你的angular项目后，进入文件夹执行不同的操作。

cd project_name

第4步：创建Angular应用程序后，使用以下命令安装所需的模块。

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

项目结构：运行上述步骤中提到的命令后，它将看起来像如下。

Angular PrimeNG Form ToggleButton属性

Project Structure

运行应用程序的步骤。在项目的根目录下使用以下命令运行该应用程序。

ng serve --open

例子1：我们正在创建一个显示Angular PrimeNG Toggle Button属性的用户界面。

app.component.html

<div style="margin:100px; 
            text-align: center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h3>
          Angular PrimeNG Form 
        ToggleButton Properties
      </h3>
    <p-toggleButton [(ngModel)]="checked"
                    onIcon="pi pi-check" 
                    offIcon="pi pi-times" 
                    onLabel="Switched On"
                     iconPos="right" 
                    offLabel="Switched Off">
    </p-toggleButton>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from "@angular/forms";
import { ToggleButtonModule } 
    from "primeng/togglebutton";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        ToggleButtonModule,
        FormsModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    checked: boolean = true;
}

输出：现在打开你的浏览器，进入http://localhost:3000/，你会看到以下输出。

Angular PrimeNG Form ToggleButton属性

例子2：我们正在创建一个显示Angular PrimeNG Toggle Button属性的用户界面。

app.component.html

<div style="margin:100px; 
            text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>    
    <h3>
          Angular PrimeNG Form 
        ToggleButton Properties
      </h3>
    <br />
      
    <p-toggleButton [disabled]="true" 
                    offIcon="pi pi-times" 
                    onLabel="Switched On" 
                    offLabel="Disabled ToggleButton">
    </p-toggleButton>
    <br /><br />
    <p-toggleButton [(ngModel)]="checked" 
                    onIcon="pi pi-eye" 
                    offIcon="pi pi-eye-slash">
    </p-toggleButton>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from "@angular/forms";
import { ToggleButtonModule }
    from "primeng/togglebutton";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        ToggleButtonModule,
        FormsModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    checked: boolean = true;
}

输出。现在打开你的浏览器，进入http://localhost:3000/，你会看到以下输出。

Angular PrimeNG Form ToggleButton属性