Introducción:
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
- Primero necesitamos importar ‘MatDialog’ desde ‘@angular/material/dialog’ y necesitamos crear una instancia para ello en el constructor.
- Usando esta instancia podemos abrir el componente del cuadro de diálogo.
- Ahora cree un componente separado para el cuadro de diálogo y escriba el código según los requisitos.
- En el componente de diálogo, necesitamos crear una instancia de ‘MatDialogRef’ que debemos importar desde ‘@angular/material/dialog’.
- Importe ‘MatDialogModule’ desde ‘@angular/material’ en el archivo app.module.ts.
- Asegúrese de mencionar el componente Diálogo en la array de componentes de entrada en el archivo del módulo.
Acercarse:
Implementación de código: app.component.html:
<button mat-raised-button (click)="openDialog()"> Pick one </button> <br> <span *ngIf="animal"> You choose: <i>{{animal}}</i> <span>
aplicación.componente.ts:
import { Component } from '@angular/core'; import { MatDialog } from '@angular/material'; import { ExampleDialogComponent } from './example-dialog'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', }) export class AppComponent { animal: string; name: string; constructor(public dialog: MatDialog) {} openDialog(): void { let dialogRef = this.dialog.open(ExampleDialogComponent, { width: '250px', data: { name: this.name, animal: this.animal } }); dialogRef.afterClosed().subscribe(result => { this.animal = result; }); } }
aplicación.módulo.ts:
import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule, MatCommonModule, MatFormFieldModule, MatInputModule, } from '@angular/material'; import { AppComponent } from './example.component'; import { ExampleDialogModule } from './example-dialog'; @NgModule({ declarations: [AppComponent], exports: [AppComponent], imports: [ ExampleDialogModule, CommonModule, FormsModule, MatButtonModule, MatCommonModule, MatFormFieldModule, MatInputModule, ], }) export class AppModule {}
ejemplo-dialog.component.html:
<h1 mat-dialog-title>Welcome user</h1> <div mat-dialog-content> <p>What's your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat-form-field> </div> <div mat-dialog-actions> <button mat-button (click)="onCancel()">No Thanks</button> <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button> </div>
ejemplo-dialog.component.ts:
import { Component, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'app-example-dialog', templateUrl: 'example-dialog.component.html', }) export class ExampleDialogComponent { constructor( public dialogRef: MatDialogRef<ExampleDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { } onCancel(): void { this.dialogRef.close(); } }
ejemplo-dialog.module.ts:
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule, MatCommonModule, MatDialogModule, MatFormFieldModule, MatInputModule, } from '@angular/material'; import { ExampleDialogComponent } from './example-dialog.component'; @NgModule({ declarations: [ExampleDialogComponent], entryComponents: [ExampleDialogComponent], imports: [ FormsModule, MatButtonModule, MatCommonModule, MatDialogModule, MatFormFieldModule, MatInputModule, ], }) export class ExampleDialogModule {}
Producción:
Salida cuando se abre el cuadro de diálogo:
Salida cuando el valor introducido se muestra en la pantalla:
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA