Material angular 7 – Botón de radio

La <mat-radiobutton> una Directiva Angular, se utiliza para mejorar el diseño de materiales basados en el estilo…

En este capítulo, mostraremos la configuración necesaria para dibujar un control de botón de radio usando Material Angular.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 – capítulo Configuración del proyecto –

StepDescription
1Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 – Configuración del proyecto
2Modifique app.module.ts, app.component.ts, app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatRadioModule}de@angular/materialimport{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({ {NgModule
declaraciones:[AppComponent],
importaciones:[BrowserModule,BrowserAnimationsModule,MatRadioModule,FormsModule,ReactiveFormsModule],
proveedores:[],
bootstrap:[AppComponent]})exportclassAppModule{}

A continuación se muestra el contenido del archivo CSS modificado app.component.css .

.tp-radio-group{
pantalla: inline-flex;
flex-direction: column;}.tp-radio-button {
margen:5px;}.tp-valor seleccionado{
margen:15px0;}

A continuación se muestra el contenido del archivo ts modificado app.component.ts .

importar{Componente}desde@angular/core;importar{FormControl}desde"@angular/forms";importar{Validadores}desde"@angular/forms";@Componente({
selector:app-root,
templateUrl:./app.component.html,
styleUrls:[./app.component.css]})exportclassAppComponent{Componente
title =materialApp;
temporada favorita:cadena;
temporadas:cadena[]=[Invierno,Primavera,Verano,Otoño];}

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

 [(ngModel)] ="favoriteSeason">
      *ngFor="let season of seasons"[valor] ="season">
      {{{season}}>>
   Temporada Seleccionada: {{temporada Favorita}}.

Resultado

Verifique el resultado.

Detalles

  • En primer lugar, hemos creado un grupo de botones de radio usando mat-radio-group enlazado con ngModel.
  • Luego, hemos añadido botones de radio usando el botón mat-radio.