¿Cómo crear mat-button-toggle-group como modo de solo lectura en AngularJS?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *