Los <mat-button-toggle> se pueden activar y desactivar y tienen la apariencia de un botón. Estos pueden ser configurados para que se comporten como botones de selección o como checkbox. Veamos los pasos para crear estos botones.

PASO 1

procedemos a crear un proyecto nuevo de angular y le instalamos material design , puedes seguir estos tutoriales para agregarlo Configura Angular Material de manera sencilla usando un instalador ó Incluir Angular Material en tus proyectos


ng new botones-toggle

una vez creado el proyecto , lo abrimos con nuestro de editor de codigo favorito e importamos el módulo dentro de material.module.ts ( sino dentro de app.module.ts)


  import {MatButtonToggleModule} from '@angular/material/button-toggle';

una vez importado el módulo procedemos a agregar en nuestro app.component.html lo siguiente

 

<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
  <mat-button-toggle value="Primera">Primera</mat-button-toggle>
  <mat-button-toggle value="Segunda">Segunda</mat-button-toggle>
  <mat-button-toggle value="Tercera">Tercera</mat-button-toggle>
</mat-button-toggle-group>

para obtener el valor al hacer clic en cada opción haremos uso de los formularios reactivos y del método valueChanges de la siguiente manera:

PASO 1

importamos los formularios reactivos en nuestro app.module.ts y agregamos ReactiveFormsModule a la sección de imports


import { ReactiveFormsModule } from '@angular/forms';

PASO 2

Agregamos las etiquetas de form y formControlName en nuestro app.component.html


<form [formGroup]="buttonT">
     <mat-button-toggle-group name="fontStyle" aria-label="Font Style" formControlName="botonera">      <mat-button-togglevalue="Primera">Primera</mat-button-toggle></div>
     <mat-button-togglevalue="Segunda">Segunda</mat-button-toggle>
     <mat-button-togglevalue="Tercera">Tercera</mat-button-toggle>
     </mat-button-toggle-group>
</form>

Y por último nuestro app.component.ts quedaría de la siguiente manera:


import { FormGroup,FormBuilder } from '@angular/forms';
import { Component } from '@angular/core';
@Component({</div>
         selector:'app-root',
        templateUrl:'./app.component.html',
        styleUrls: ['./app.component.scss']
 })</div>
export class AppComponent {
       title='button-toogle';
       buttonT:FormGroup
     constructor(publicfb:FormBuilder) {
        this.buttonT=fb.group({
                     botonera: []
         });
        this.buttonT.controls['botonera'].valueChanges.subscribe((data:any) => {
               console.log(data);
        })
}
}

Con esto ya tendríamos el valor de cada botón al hacer el clic respectivo.

Puedes descargar el código fuente desde el siguiente enlace

Author

Write A Comment