Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por el equipo de Angular para crear componentes de diseño para aplicaciones web móviles y de escritorio.
Para instalarlo, necesitamos tener angular instalado en nuestro proyecto, una vez que lo tenga, puede ingresar el siguiente comando y descargarlo.
Sintaxis de instalación:
ng add @angular/material
Acercarse:
- Primero, instale el material angular usando el comando mencionado anteriormente.
- Después de completar la instalación, importe ‘MatButtonToggleModule’ desde ‘@angular/material’ en el archivo app.module.ts.
- Luego use las etiquetas <mat-button-toggle-group> y </mat-button-toggle> para crear un grupo de alternancia de botones angulares.
- Como MatButtonToggleModule no consiste en una propiedad de solo lectura, podemos usar la propiedad disabled para que sea de solo lectura.
- Una vez que haya terminado con los pasos anteriores, sirva o comience el proyecto.
Implementación de código:
aplicación.módulo.ts:
Javascript
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatButtonModule } from '@angular/material/button'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; @NgModule({ imports: [ BrowserModule, FormsModule, BrowserAnimationsModule, MatButtonModule, MatButtonToggleModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
aplicación.componente.html:
HTML
<mat-button-toggle-group name="techno" aria-label="technology"> <mat-button-toggle value="html"> HTML </mat-button-toggle> <mat-button-toggle disabled value="css"> CSS </mat-button-toggle> <mat-button-toggle value="javascript"> Javascript </mat-button-toggle> <mat-button-toggle value="jquery"> Jquery </mat-button-toggle> </mat-button-toggle-group>
Producción:
Observación: si observa claramente el resultado anterior, puede comprender que no puede seleccionar y es la forma en que se ve la propiedad de solo lectura.
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA