Entrada Material angular 7 – Autocompletar

Material angular 7 – Autocompletar

La, una directiva angular, se utiliza como un control de entrada especial con un menú desplegable incorporado para mostrar todas las coincidencias posibles con una consulta personalizada. Este control actúa como un buzón de sugerencias en tiempo real tan pronto como el usuario teclea en el área de entrada. puede ser utilizado para proporcionar resultados de búsqueda de fuentes de datos locales o remotas.

En este capítulo, mostraremos la configuración necesaria para dibujar un control de autocompletado utilizando 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 –

PasoDescripcion
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 .

import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppComponent}from'./app.component';import{BrowserAnimationsModule}from'@angular/platform-browser/animations';import{MatAutocompleteModule,MatInputModule}from'@angular/material';import{FormsModule,ReactiveFormsModule}from'@angular/forms';@NgModule({
   declarations:[AppComponent],
   imports:[BrowserModule,BrowserAnimationsModule,MatAutocompleteModule,MatInputModule,FormsModule,ReactiveFormsModule],
   providers:[],
   bootstrap:[AppComponent]})exportclassAppModule{}

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

<formclass="tp-form"><mat-form-fieldclass="tp-full-width"><inputtype="text"placeholder="US State"aria-label="Number"matInput 
         [formControl] ="myControl" 
         [matAutocomplete] ="auto"><mat-autocomplete #auto="matAutocomplete"><mat-option *ngFor="let state of states" [value] ="state.value">
            {{state.display}}
         

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

.tp-form {
   min-width:150px;
   max-width:500px;
   width:100%;}.tp-full-width {
   width:100%;}

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

import{Component}from'@angular/core';import{FormControl}from"@angular/forms";@Component({
   selector:'app-root',
   templateUrl:'./app.component.html',
   styleUrls:['./app.component.css']})exportclassAppComponent{
   title ='materialApp';
   myControl =newFormControl();
   states;constructor(){this.loadStates();}//build list of states as map of key-value pairs
   loadStates(){var allStates ='Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
         Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
         Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
         Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
         North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
         South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
         Wisconsin, Wyoming';this.states =  allStates.split(/, +/g).map(function(state){return{value: state.toUpperCase(),
            display: state
         };});}}

Resultado

Verifique el resultado.

Detalles

  • En primer lugar, hemos creado un cuadro de entrada y enlazamos un autocompletado llamado auto utilizando el atributo[matAutocomplete].
  • Luego, hemos creado un autocompletar llamado auto usando la etiqueta mat-autocompletar.
  • A continuación, utilizando *ng Para el bucle, se crean las opciones.