ng:using_material_auto_complete [Tutorial Site]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Using Material Auto Complete ======
===== Installing the Related Dependencies =====
<code>npm install --save @angular/material @angular/cdk @angular/animation</code>

===== Adding the Module in app.module.ts =====
<code>
...
  imports: [
    BrowserModule,
    AppRoutingModule,

    BrowserAnimationsModule,
    MatAutocompleteModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule
  ],
...
</code>

===== Add the Material css theme to the Project =====
In src/styles.css, add a prebuilt material theme
<code>
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
</code>


===== Adding My Own Interface =====
The interface call ''state'', and will hold two strings ''display'', and ''value''
<code>ng generate interface state</code>
In state.ts:
<code>
export interface State {
  value: string;
  display: string;
}
</code>

===== Initialize the Auto Complete List in the Component =====
In app.component.ts
<code>
import {Component, OnInit} from '@angular/core';
import {FormControl} from "@angular/forms";
import {map, startWith} from 'rxjs/operators';
import {Observable} from "rxjs";
import {State} from "./state";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'materialApp';
  myControl = new FormControl();
  states: State[];
  filteredOptions: Observable<State[]>;

  ngOnInit(): void {
    this.loadStates();
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): State[] {
    const filterValue = value.toLowerCase();
    return this.states.filter(option => option.value.toLowerCase().indexOf(filterValue) === 0);
  }

  //build list of states as map of key-value pairs
  loadStates() {
    let 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
      };
    });
    console.log(this.states);
  }
}
</code>

===== Setup the view in html =====
<code>
<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
        {{option.display}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>
</code>
===== How It Should Look Like =====
{{ :ng:ng_auto_complete.png?nolink&200 |}}

===== Reference =====
  * [[https://v5.material.angular.io/components/autocomplete/overview]]
  * [[https://www.tutorialspoint.com/angular_material7/angular_material7_autocomplete.htm]]