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>