Como crear un botón de cambio con Angular Material

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

<div>
<div>import { ReactiveFormsModule } from '@angular/forms';</div>
</div>

PASO 2

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

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

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

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

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

Leave a reply:

Your email address will not be published.

Site Footer