Select Option for children it is behaving weird when parent is selected Angular-CodePudding

I am having an error during selecting the parent and its children on the select option. The idea behind it is that I have for parent another select option and for the child another one. I do have parent objects and as children nested objects which in my case are subCategory.

The problem it is that when the parent changes, the child it is empty and need to select on empty object that the list gets updated.

It is possible somehow that when parent is selected automatically show the children of the selected parent ?

Here is the code on stackblitz. https://stackblitz.com/edit/angular-ivy-ujehrd?file=src/app/app.component.html

I have something like this.

<div >
<label>{{ "pagesInfo.categories" | translate }} </label>
      <select
      
      [ngModel]="page?.categories"
      (ngModelChange)="showChildren($event)"
      required
    >
      <option
        *ngFor="let level of categoryService.categories"
        [ngValue]="level"
        [selected]="level"
        (change)="showChildren(level)"
      >
        {{ level.description | translate }}
      </option>
    </select>
    </div>
    <div >
      <label>{{ "categories.subCategories.name" | translate }} </label>
      <select
      

      [(ngModel)]="selectedChildren"
    >
   <ng-container>
      <option
        *ngFor="let subCat of selectedChildren"
        [ngValue]="subCat"
      >
        {{ subCat.description | translate }}
      </option>
    </ng-container>
    </select>
    </div>

This is my TS to show the children.

 selectedChildren = [];
 showChildren(event) {
    this.selectedChildren = [];
    this.selectedChildren.push(event.subCategories);
  }

And my categories looks like this.

export class Page {
  _id: string;
  name = "";
  slogan = "";
  description = "";
  categories: Categories[];
}

export interface Categories {
  description: string;
  subCategory?: [{
    name?: string,
    tags?: [{
        name: string
    }]
  }]
}

My service when I load the data.

  public categories = [];

  public getCategories() {
    this.categories = [
      { id: Categories.Businesses, description: "categories.Businesses.name",
        subCategories: [
        { id: BusinnesSubCategory.Advertising_Marketing, description: "categories.Businesses.Advertising_Marketing"},
        { id: BusinnesSubCategory.Agriculture, description: "categories.Businesses.Agriculture"}
] },
 { id: Categories.Community_Organization, description: "categories.Community_Organization.name",
        subCategories: [
          { id: CommunityOrganizationSubCategory.Armed_Forces, description: "categories.Community_Organization.Armed_Forces"},
          { id: CommunityOrganizationSubCategory.Charity_Organization, description: "categories.Community_Organization.Charity_Organization"}
]},

{ id: Categories.Interest, description: "categories.Interest.name",
      subCategories: [
        { id: InterestSubCategory.Literary_Arts, description: "categories.Interest.Literary_Arts"},
        { id: InterestSubCategory.Performance_Art, description: "categories.Interest.Performance_Art"},

CodePudding user response：

As already pointed out by Faizal, you're using [(ngModel)]="selectedChildren" for the child select.

ngModel directive is used for the value of the <select> - you don't need to provide the list as a "model" for the selection.

The best solution is to use a different property as the model:

public selectedChild = null


`[(ngModel)]="selectedChild"`

Also there's a problem where you're pushing the whole subcategories into the selection so it is then an array of arrays of subcategories. Just assign the subcatecories as the children array.

this.selectedChildren = event.subCategories

See stackblitz: https://stackblitz.com/edit/angular-ivy-ysodem?file=src/app/app.component.html,src/app/app.component.ts,src/app/category.service.ts