Angular PrimeNG RadioButton组件

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

RadioButton组件：它允许用户每次从一个集合中选择一个选项。

属性:

name：它用于设置辐射按钮组的名称。它是字符串数据类型，默认值为空。
value。它用于设置辐射按钮的值。它是字符串数据类型，默认值为空。
label。它用于设置辐射按钮的标签。它是字符串数据类型，默认值为空。
disabled。它指定该元素应该被禁用，它是布尔数据类型，默认值是false。
tabindex。它用于设置元素在标签顺序中的索引。它是数字数据类型，默认值为空。
inputId。它是底层输入元素的ID标识符。它是字符串数据类型，默认值为空。
ariaLabelledBy。ariaLabelledBy属性建立了组件和标签之间的关系，它的值应该是一个或多个元素ID。它是字符串数据类型，默认值为空。
style。它用于设置元素的内联样式。它是对象数据类型，默认值为空。
styleClass。它用于设置元素的风格类别。它是字符串数据类型，默认值为空。
ariaLabel。它用于定义一个标签输入元素的字符串。它是字符串数据类型，默认值为空。
labelStyleClass。它用于设置标签的风格类别。它是字符串数据类型，默认值为空。

事件:

onClick。它是一个回调，在单选按钮点击时被触发。
onFocus: 这是一个回调，当单选按钮收到焦点时被触发。
onBlur：这是一个回调，当单选按钮失去焦点时被触发。

Methods:

焦点。该方法用于对元素进行聚焦。

样式:

p-radiobutton。它为容器元素提供样式。
p-radiobutton-box。它为图标的容器设计样式。
p-radiobutton-icon。它是图标元素的样式。
p-chkbox-label。它为标签元素提供样式。
p-label-active。它为检查状态的标签元素提供样式。
p-label-focus：它为聚焦状态的标签元素提供样式。
p-label-disabled。它为禁用状态的标签元素提供样式。

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

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

ng new appname

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

cd appname

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

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

项目结构。它将看起来像以下。

Angular PrimeNG RadioButton组件

例子1：这个基本例子说明了RadioButton组件的使用，没有预选值。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG RadioButton component</h5>
<div class="p-field-radiobutton">
  <p-radioButton value="AngularJS" 
                   [(ngModel)]=" gfg" 
                 inputId=" gfg1">
  </p-radioButton>
  <label for=" gfg1">AngularJS</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton value="ReactJS" 
                 [(ngModel)]=" gfg" 
                 inputId=" gfg2">
  </p-radioButton>
  <label for=" gfg2">ReactJS</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton value="HTML" 
                 [(ngModel)]=" gfg" 
                 inputId="gfg3">
  </p-radioButton>
  <label for="gfg3">HTML</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton value="JavaScript" 
                 [(ngModel)]=" gfg" 
                 inputId=" gfg4">
  </p-radioButton>
  <label for=" gfg4">JavaScript</label>
</div>

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

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

输出:

Angular PrimeNG RadioButton组件

例子2：在这个例子中，我们要用预选的值动态地建立一个radioButton组。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG RadioButton Component</h5>
<div *ngFor="let a of gfg" class="p-field-checkbox">
  <p-radioButton [value]="a" [(ngModel)]="selected">
  </p-radioButton>
  <label [for]="a.key">{{a.name}}</label>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  selected: any = null;
  
  gfg: any[] = [
    { name: 'A' },
    { name: 'B' },
    { name: 'C' },
    { name: 'D' },
    { name: 'E' }
  ];
  
  ngOnInit() {
    this.selected = this.gfg[0];
  }
}

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

输出:

Angular PrimeNG RadioButton组件