Initialize the mat-autocomplete option with all the data

Question

Autocomplete works fine when I started entering keys on the formcontrol but I wanted it to be initialized with all the data so that when I CLICKED the formcontrol (without entering keys yet) the options will show all the data. Right now all courses data will only show if I enter a key then I delete it.

HTML

  <form [formGroup]="personalFg">
   ...
          <input matInput required 
            formControlName="course" 
            [matAutocomplete]="coursesAutoComplete">
            
          <mat-autocomplete autoActiveFirstOption #coursesAutoComplete="matAutocomplete">
            <mat-option *ngFor="let option of filteredCourses | async" [value]="option.name">
              <div fxLayout="column">
                ...
              </div>
            </mat-option>
     ...

   </form>

TS

courses$ = this.store.select(getCourses);

filteredCourses (){
    return this.personalFg.get('course').valueChanges.pipe(
      withLatestFrom(this.courses$),
      map(([value,colleges])=>{
        return  colleges.filter((college)=> {
          ...
          return ...
        })
      })
    )
  }

I want the filteredCourses() to be initialized by the value of the courses$

score 0 · Answer 1 · answered Apr 13 '23 at 05:07

You can use startsWith operator to start with inital values

filteredCourses (){
    return this.personalFg.get('course').valueChanges.pipe(
      startWith(''),
      withLatestFrom(this.courses$),
      map(([value,colleges])=>{
        return  colleges.filter((college)=> {
          ...
          return ...
        })
      })
    )
  }

Initialize the mat-autocomplete option with all the data

1 Answers1