Bind data from API to Dropdown in Angular 7

Question

I'm trying to populate a dropdown from a get API. I've created a service and using the observables returning the data to the component, which then subscribes to the service. I'm able to console.log the whole data (which is in a JSON array) but I'm not able to see any data in the dropdown.

I guess the problem is that view is getting rendered before the API data. I know there is a resolve method but what else I can try?

My question and code are very much similar to the below question and there are few things which I've already correct in my code like 'Project' is an array but the solution isn't working for me. There is no error in my code also:

Drop down does not populate with API data in Angular

Please find my code below: TestService.ts

export class TestService {
  public testURL = 'https://test.url';
  constructor(private _http: HttpClient) { }

    getTypes(): Observable<TestModel[]> {
    const headers = new HttpHeaders({'test': 'test1'});
    return this._http.get<TestModel[]>(this.testURL, {headers});
  }
  }

Component.ts

 @Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.css']
})
export class AppHeaderComponent implements OnInit, AfterViewInit {
   testModel: TestModel[];
   isLoaded = false;

  constructor(private _testService: TestService) { }

  getTypeT(): void {
    this._testService.getTypes().subscribe(data => {
      if(data) {
        this.testModel = data;
        this.isLoaded = true;
        console.log(this.testModel);
      }
    } );
  }

  ngOnInit() {
    // fetch all the survey types
    this.getTypeT();
  }

component.html

  <select  class="selectpicker dropdown mt-4 ml-3" id="type" data-live-search="true">
      <option *ngFor="let test of testModel" [value]="test.id">{{test.description}}</option>
   </select>

Note: I just figured out that problem seems to be with the "selectpicker" dropdown which is a third party plugin. Could you please suggest what I can do to resolve it?

It would be little difficult for me to post the code but my code is exactly similar to the link I've shared. Would it be possible for you to review that and let me know what is it that causing the problem? I'll still try to post my code tomorrow morning. — Sunil Ojha
– Sunil Ojha, Commented Apr 22, 2019 at 19:25
You could use the async pipe ( angular.io/api/common/AsyncPipe ), and provide the observable with the data directly to the dropdown. That should work. :) — Lars Rødal
– Lars Rødal, Commented Apr 22, 2019 at 19:35
@SunilOjha if you have an issue with your code, then you should post your code. The question you posted is already answered, so if your code was the same, you should have no issue with that. — GCSDC
– GCSDC, Commented Apr 22, 2019 at 19:37
@GCSDC I've added the code for reference. Please note that there is no error in my code and I'm able to console.log correctly. — Sunil Ojha
– Sunil Ojha, Commented Apr 22, 2019 at 19:58

Lars Rødal · Accepted Answer · 2019-04-22 21:02:20Z

2

You could try using the async pipe.

@Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.css']
})
export class AppHeaderComponent implements OnInit, AfterViewInit {
   testModel: TestModel[];
   isLoaded = false;
   types$;

  constructor(private _testService: TestService) { }

  getTypeT(): void {
    return this._testService.getTypes();
  }

  ngOnInit() {
    this.types$ = this.getTypeT();
  }

HTML

  <select  class="selectpicker dropdown mt-4 ml-3" id="type" data-live-search="true">
      <option *ngFor="let test of types$ | async" [value]="test.id">{{test.description}}</option>
   </select>

answered Apr 22, 2019 at 21:02

Lars Rødal

8761 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sunil Ojha Over a year ago

Thanks for your help Lars, I tried it but this isn't working for me.

Lars Rødal Over a year ago

If the dropdown itself is the problem - have you considered using another dropdown? Like Angular Material or something similar?

Sunil Ojha Over a year ago

Hi Lars, I used a different dropdown today - ng-select and it worked alright. Thanks for your comment.

Collectives™ on Stack Overflow

Bind data from API to Dropdown in Angular 7

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest