Angular PrimeNG Form Checkbox基本组件

Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将看到Angular PrimeNG表单检查框基本组件。

PrimeNG提供的复选框组件是HTML复选框的扩展，具有主题性。一个复选框组件通常用于接受一个布尔值的输入。

Angular PrimeNG Form Checkbox基本组件属性：

label : label属性用于设置复选框的标签。
disabled : 此属性用于禁用复选框。
binary : 这个布尔属性用于在布尔形式下保存复选框的值。

语法:

<p-checkbox 
    [binary]="true | false"
    inputId="..."
    label="...">
</p-checkbox>

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

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

ng new appname

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

cd appname

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

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

按照上述步骤，项目结构将看起来像这样。

Angular PrimeNG Form Checkbox基本组件

Project Structure

**运行以下命令以查看输出。

ng serve --open

例子1：这个例子显示了**Angular PrimeNG Form Checkbox Basic Component的使用。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Checkbox Basic Component</h3>
</div>
  
<div class="checkbox">
    <p-checkbox 
        [binary]="true"
        inputId="checkbox1"
        [(ngModel)]="checked" 
        label={{checked}}>
    </p-checkbox>
</div>

app.component.css

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
div.checkbox{
    flex-direction: row;
}
  
.header h2{
    margin-bottom: 0;
    color: green;
}
  
label{
    margin-left: 10px;
}

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

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

输出:

Angular PrimeNG Form Checkbox基本组件

示例2：这是另一个例子，展示了如何使用Angular PrimeNG Form Checkbox的disabled属性来禁用一个复选框。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Checkbox Basic Component</h3>
</div>
  
<div>
    <div class="checkbox">
        <p-checkbox 
            [binary]="true" 
            inputId="checkbox1" 
            label="Normal Checkbox">
        </p-checkbox>
    </div>
    
    <div class="checkbox">
        <p-checkbox 
            [binary]="true" 
            inputId="checkbox1" 
            [disabled]="true" 
            label="Disabled Checkbox">
        </p-checkbox>
    </div>
</div>

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
div.checkbox{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}
  
.header h2{
    margin-bottom: 0;
    color: green;
}
  
label{
    margin-left: 10px;
}

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

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

输出:

Angular PrimeNG Form Checkbox基本组件