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 ‘ MatDatepickerModule’ desde ‘@angular/material’ en el archivo app.module.ts.
- Luego use la etiqueta <mat-datepicker-toggle> para usar el selector de fecha de material angular y también matInput.
- También podemos deshabilitar la ventana emergente del selector de fecha e ingresar la fecha manualmente. Hay diferentes temas disponibles para diferentes colores.
- Para cambiar el tema, necesitamos pasar una propiedad de color. A continuación, usé un tema de acento y un tema predeterminado para brindar una vista más amplia.
- 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'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatNativeDateModule } from '@angular/material/core'; @NgModule({ imports: [BrowserModule, FormsModule, BrowserAnimationsModule, MatButtonModule, MatButtonToggleModule, MatDatepickerModule, MatInputModule, MatFormFieldModule, MatNativeDateModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
aplicación.componente.html:
HTML
<mat-form-field appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker1"> <mat-datepicker-toggle matSuffix [for]="picker1"> </mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> <br> <mat-form-field color="accent" appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker2"> <mat-datepicker-toggle matSuffix [for]="picker2"> </mat-datepicker-toggle> <mat-datepicker #picker2></mat-datepicker> </mat-form-field> <br> <mat-form-field appearance="fill"> <mat-label>Completely disabled</mat-label> <input matInput [matDatepicker]="picker3" disabled> <mat-datepicker-toggle matSuffix [for]="picker3"> </mat-datepicker-toggle> <mat-datepicker #picker3></mat-datepicker> </mat-form-field> <br> <mat-form-field appearance="fill"> <mat-label>Popup disabled</mat-label> <input matInput [matDatepicker]="picker4"> <mat-datepicker-toggle matSuffix [for]="picker4" disabled> </mat-datepicker-toggle> <mat-datepicker #picker4></mat-datepicker> </mat-form-field>
Producción:
- GIF:
- Imágenes de salida: Esta es la forma en que se abrirá una ventana emergente que contiene un calendario:
- Después de seleccionar el calendario, así es como aparece la fecha:
- Si el tema utilizado es un tema de acento:
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA