0 views

Retrieving data for Select elements

Step 1: user-settings-form.component.ts file

import { Observable } from 'rxjs';

//subscriptionTypes = ['one', 'two', 'three']
subscriptionTypes$: Observable<string[]>

 ngOnInit() {
    this.subscriptionTypes$ = this.dataService.getSubscriptionTypes();
  }

Step 2: data.service.ts file

import { Observable, of } from 'rxjs';

 getSubscriptionTypes(): Observable<string[]>{
    return of(['Monthly', 'Annual', 'Lifetime']);
  }

Step 3: user-settings-form.component.html file

<div class="form-group">
        <label for="subscriptionType">Subscription Type</label>
        <select class="form-control" id="subscriptionType" 
           name="subscriptionType" [(ngModel)]="userSettings.subscriptionType">
                <option *ngFor="let type of subscriptionTypes$ | async">
                        {{type}}
                </option>
        </select>
    </div>

Leave a Reply