在Angular Material中mat-radio-button介绍

Angular Material是一个UI组件库，由Angular团队开发，用于构建桌面和移动Web应用程序的设计组件。为了安装它，我们需要在我们的项目中安装Angular，一旦你有了它，你可以输入下面的命令并可以下载它。<mat-radio-button>是用来在我们有多个选项时选择一个选项。

安装:

ng add @angular/material

步骤:

• 首先，使用上述命令安装Angular Material。
• 完成安装后，在app.module.ts文件中从’@angular/material/radio’导入’MatRadioModule’。
• 然后我们需要使用<mat-radio-button>标签来显示单选按钮。
• 我们也可以通过使用禁用的输入属性来禁用单选按钮。
• 如果我们想改变主题，我们可以通过使用颜色属性来改变它。在angular中，我们有3个主题，它们是主要的、重点的和警告的。
• 一旦完成了上述步骤，就可以服务或开始项目。

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

Filename: app.module.ts

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

Filename: app.component.html

<h3> Radio buttons in Angular material </h3>
 
<mat-radio-button value="1" color="primary">
  Primary Theme radio button
<br><br>
 
<mat-radio-button value="2" color="warn">
  Warn Theme Radio button
<br><br>
 
<mat-radio-button value="3" color="accent">
  Accent Theme Radio button

 
<br>
<br>
 
<mat-radio-button value="4" color="accent" disabled>
  Disabled Radio Button

输出: