Angular Material 7-オートコンプリート

Angular Directiveである <mat-autocomplete> は、ドロップダウンが組み込まれた特別な入力コントロールとして使用され、カスタムクエリに一致する可能性のあるすべてのものを表示します。このコントロールは、ユーザーが入力領域に入力するとすぐに、リアルタイムの提案ボックスとして機能します。 <mat-autocomplete> は、ローカルまたはリモートのデータソースからの検索結果を提供するために使用できます。

この章では、Angular Materialを使用してオートコンプリートコントロールを描画するために必要な構成を紹介します。

角度アプリケーションを作成する

次の手順に従って、_Angular 6-Project Setup_章で作成したAngularアプリケーションを更新します-

Step	Description
1	Create a project with a name materialApp as explained in the Angular 6 - Project Setup chapter.
2	Modify app.module.ts, app.component.ts, app.component.css and app.componentl as explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

変更されたモジュール記述子 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]
})
export class AppModule { }

以下は、変更されたHTMLホストファイル app.componentl の内容です。

<form class = "tp-form">
   <mat-form-field class = "tp-full-width">
      <input type = "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}}
         </mat-option>
      </mat-autocomplete>
   </mat-form-field>
</form>

変更されたCSSファイル app.component.css の内容は次のとおりです。

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

変更されたtsファイル app.component.ts の内容は次のとおりです。

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp';
   myControl = new FormControl();
   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
         };
      });
   }
}

結果

結果を確認します。

オートコンプリート

詳細

最初に、入力ボックスを作成し、[matAutocomplete]属性を使用して auto という名前のオートコンプリートをバインドしました。
次に、mat-autocompleteタグを使用して、 auto という名前のオートコンプリートを作成しました。
次に、* ng Forループを使用して、オプションが作成されます。

Angular-material7-autocomplete

Angular Material 7-オートコンプリート

角度アプリケーションを作成する

結果

詳細

目次