Material angular 7 – Campo de forma

La <mat-form-field> una Directiva Angular, se utiliza para crear una envoltura sobre los componentes angulares y se utiliza para aplicar estilos de texto como subrayado, negrita, sugerencias, etc.

El siguiente componente angular se puede utilizar en el interior de…

En este capítulo, mostraremos la configuración requerida para usar un control de campo de forma de malla en Material Angular.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 – capítulo Configuración del proyecto –

StepDescription
1Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 – Configuración del proyecto
2Modifique app.module.ts, app.component.ts, app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatInputModule,MatOptionModule,MatSelectModule,MatIconModule}de@angular/materialimport{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({NgModule
declaraciones:[AppComponent],
importaciones:[BrowserModule,BrowserAnimationsModule,MatInputModule,MatOptionModule,MatSelectModule,MatIconModule,FormsModule,ReactiveFormsModule],
proveedores:[],
bootstrap:[AppComponent]})exportclassAppModule{}

>)

A continuación se muestra el contenido del archivo CSS modificado app.component.css .

.tp-container {
pantalla: flex;
flex-direction: column;}.tp-container>*{{Contenedor
ancho:100%;}

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

>appearance="standard">matInputInplaceholder="Input">matSuffix>sentiment_very_satisfiedSample Hintappearance="fill">matInputplaceholder="Textarea">appearance="outline">placeholder="Select">value="A">Avalue="B">Buue="C">C

Avalo

Resultado

Verifique el resultado.

Detalles

  • En primer lugar, hemos creado un campo de formulario utilizando una envoltura de campo mate-formato. Hemos cambiado la apariencia del campo de formulario usando el atributo appearance.
  • A continuación, se añade un control de formulario al campo de formulario.