Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to populate Material select dropdown from remote API service?

I'm trying to populate a material select dropdown with values from a remote API service. I keep getting a null or undefined value at the component.

This is for Angular 7 using the MEAN stack and Angular Material. I've tried compareWith function and logging the values. I noticed that the component is always loading its value first which is null, then the API service which has values.

<mat-form-field>
    <mat-select formControlName="company"  placeholder="Select 
Company" [(value)]="selectedCompany" [compareWith]="compareFn">
        <mat-option *ngFor="let lC of loadedCompanies" 
 [value]="lC.id">
          {{lC.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

ngOnInit() {
  this.authStatusSub = this.authService
  .getAuthStatusListener()
  .subscribe(authStatus => {
      this.isLoading = false;
  });

  this.form = new FormGroup({
      id: new FormControl(null),
      company: new FormControl(this.loadedCompanies)
  });

  this.companyService.getCompanyList();
  this.companySub = this.companyService
  .getcompanyUpdateListener()
  .subscribe((companyData: {companies: Company[]}) => {
    this.isLoading = false;
    this.loadedCompanies =  companyData.companies;
  });
}

compareFn(c1: Company, c2: Company): boolean {
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

I would expect the values to load from the observable and populate the select input before loading the component.

like image 830
Badger 29 Avatar asked Apr 04 '19 06:04

Badger 29


People also ask

What is a dropdown list?

A Dropdown list is a significant user interface component that allows users to select options from a list. We used the actual API to display the list, fetched the data, and put it into the dropdown. I am Digamber, a full-stack developer and fitness aficionado.

Where can I find sample data for DOM manipulation?

Our sample data can be found at MyJSON with the following contents: We'll use the names for the contents of the <option> elements and the abbreviation for the values. The following solutions manipulate the DOM by populating an HTML select element we've defined on our page:

How to use Angular Material select dropdown in VSCode?

Okay, let’s start Angular Material select dropdown example step by step. I assume that you have the latest Angular CLI. Type the following command. Go inside the folder and open the folder in VSCode. Step 2: Install and configure Angular Material. First, install hummer.js using the following command.

How do I manipulate the DOM using HTML select elements?

We'll use the names for the contents of the <option> elements and the abbreviation for the values. The following solutions manipulate the DOM by populating an HTML select element we've defined on our page: Our task can be divided into four steps: Insert a default option named "Choose State/Province" which is shown as a visual cue


1 Answers

You can add an *ngIf to the parent container such that the mat-select component will not be loaded until the observable has been subscribed and loadedCompanies has been assigned.

 <mat-form-field *ngIf = "loadedCompanies">
   <mat-select formControlName="company"  placeholder="Select 
Company" [(value)]="selectedCompany" [compareWith]="compareFn">
     <mat-option *ngFor="let lC of loadedCompanies" 
 [value]="lC.id">
       {{lC.name}}
     </mat-option>
  </mat-select>
</mat-form-field>

The FormControl company should be set with an initial value of null, and not the entire loadedCompanies array.

this.form = new FormGroup({
  id: new FormControl(null),
  company: new FormControl(null)
});

This is how you should populate your loadedCompanies array.

loadedCompanies: Company[];

ngOnInit() {
  .
  .
  // other lines of code before this
  this.companyService.getCompanyList().subscribe(companyData => {
    this.loadedCompanies = companyData.companies;
  });
}
like image 101
wentjun Avatar answered Nov 15 '22 05:11

wentjun