How to dynamically assign vaules to a <select> in Angular?

Question

I have a drop down in my component. There, values for the drop down should assign according to a checked radio button value.

An image to get an idea :-

In here, if I select Ice Cream, values in the drop down should be Chocolate, Vanilla. If I select Beverages, drop down values should be Cocacola, Pepsi and for the Short Eats it should display Pastry, Rolls. Those are the expected outputs.

But for the first time, if I select Ice Cream it will display an empty drop down. Then when I select Beverages, instead of Cocacola, Pepsi, it is assigned with Chocolate, Vanilla to the drop down. Same happens when I select Short Eats (displays Cocacola, Pepsi) and it continues the pattern

Here's my implementation

Componet.html:-

        <div class="row ml-4">
            <mat-radio-group [(ngModel)]="selectedItemType" (ngModelChange)="selectItemType()" aria-label="Select an option">
                <mat-radio-button class="ml-3" *ngFor="let item of items" value="{{item}}">{{item}}</mat-radio-button>
            </mat-radio-group>
        </div>
        <div class="row ml-5 mt-2">
            <select [(ngModel)]="selectedItemName" (ngModelChange)="selectItemName()">
                <option value="" [selected]="true"> Please choose one </option>
                <option *ngFor="let selectedItem of selectedItems">{{selectedItem.itemName}}</option>
            </select>
        </div>

Component.ts:-

import {Component, OnInit, SimpleChange} from '@angular/core';

import { DashboardService} from "@modules/dashboard/services";

@Component({
  selector: 'sb-dashboard-items',
  templateUrl: './dashboard-items.component.html',
  styleUrls: ['./dashboard-items.component.scss']
})
export class DashboardItemsComponent implements OnInit {
    items : String;
    selectedItems : String;
    map : Map<String, Number> = new Map<String, Number>();
    selectedItemType : String = "Select One"
    selectedItemName : String

  constructor(
     private dashboardService : DashboardService
  ) {}

  ngOnInit(): void {
    this.dashboardService.getItems()
        .subscribe(response => {
            this.items = response
        })
  }

  ngOnChanges(changes: SimpleChange){
        console.log(changes)
  }

  selectItemType(){
      this.dashboardService.getItemsByType(this.selectedItemType) //<--------- This will retrieve data from an API according to the selected radio button value
          .subscribe( response => {
              // console.log(response)
              this.selectedItems = response;
          })
  }

  selectItemName(){
        console.log(this.selectedItemName)
  }
}

Service.ts:-

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import {map} from "rxjs/operators";
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DashboardService {
    constructor(private http: HttpClient) {}

    getDashboard$(): Observable<{}> {
        return of({});
    }

    getItems(){
        return this.http.get<any>('http://localhost:8080/rest/items/types')
            .pipe(map(items => {
                if(items){
                    return items;
                }
            }))
    }

    getItemsByType(type){
        return this.http.get<any>('http://localhost:8080/rest/items/itemsByType', {params : { itemType : type}})
            .pipe(map( items => {
                if(items){
                    return items;
                }
            }))
    }
}

How can I get the expected output? What are the changes need to be done. Thanks in advance!

Answer 1

I fixed your example in this stackblitz:

https://stackblitz.com/edit/angular-conditional-selection?file=src/app/checkbox-overview-example.ts

You should definitely fix the types for items and selectedItems:

items: String[];
selectedItems: { itemName: String }[];

You should also check what kind of objects are returned by the backend. In the example in the stackblitz I replaced the http requests by some mocked observables and it works.