How to use autocomplete with mat-select in Angular?

  angular, angular-material, typescript

I am trying to add an autocomplete to a mat-form field in Angular. I need to have the getAppraisalStatusGraphDataByYear(currentYear,currentProjectId,currentMonth) method and the [(value)]="currentMonth in the current mat-select to be available in the autocomplete.

Below is my html code part.

 <mat-form-field class="appraisals-search" fxFlex.xs="30vw">
        <mat-select [(value)]="currentMonth" (selectionChange)="getAppraisalStatusGraphDataByYear(currentYear,currentProjectId,currentMonth)">
          <mat-option *ngFor="let month of months" [value]="months.indexOf(month)">{{month}}</mat-option>
        </mat-select>
 </mat-form-field>

Below is my typescript code part.

 ngOnInit(){
    this.filteredMonths = this.myMonthControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filterMonth(value))
      );
  }

  _filterMonth(value: string): string[] {
    let filter = value.toLowerCase();
    return this.months.filter(option => option.toLowerCase().startsWith(filter));
  }

Please help me to solve this.

Source: Angular Material Quesions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.