Updating select options list dynamically in Angular

Question

Updating select options list dynamically in Angular

In a modal, I have two selects that are populated with data from two different object arrays:

<select class="browser-default" id="gebied" 
  [(ngModel)]="filteredGebied" 
  (ngModelChange)="onChange($event)">
    <option *ngFor="let gebied of list1" 
      value="{{gebied.id}}">{{gebied.beschrijving}}</option>
</select>

<select class="browser-default" id="domein" [(ngModel)]="filteredDomein">
  <option *ngFor="let domein of list2"
    value="{{domein.id}}">{{domein.beschrijving}}</option>
</select>

My goal is to dynamically update the options in the second select based on the selection made in the first select.

onChange(list1Id){ 
...
this.list2 = ...
}

However, I am facing an issue where the options in the second select do not update as expected.

Sometimes, an error occurs stating:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngForOf:

How can I resolve this problem and make the necessary changes?

angular typescript

Answer 1

Answer №1

Ensuring optimal functionality is key. For instance, I verify if a is chosen, indicating that based on your binding, filteredGebied equals 1, then it follows that list2 should be updated!

  export class AppComponent {
      list1 = [{ id: '1', description: 'a' }, { id: '2', description: 'b' }];
      list2 = [{ id: '1', description: 'aaa' }, { id: '2', description: 'bbbb' }];
      filteredArea;
      filteredDomain;

      onChange(event) {
      if (this.filteredArea === '1') {
        this.list2 = [{ id: '1', description: 'xxx' }, { id: '2', description: 'yyyy' }];
      }
     }
   }

Answer 2

Ensuring optimal functionality is key. For instance, I verify if a is chosen, indicating that based on your binding, filteredGebied equals 1, then it follows that list2 should be updated!

  export class AppComponent {
      list1 = [{ id: '1', description: 'a' }, { id: '2', description: 'b' }];
      list2 = [{ id: '1', description: 'aaa' }, { id: '2', description: 'bbbb' }];
      filteredArea;
      filteredDomain;

      onChange(event) {
      if (this.filteredArea === '1') {
        this.list2 = [{ id: '1', description: 'xxx' }, { id: '2', description: 'yyyy' }];
      }
     }
   }

Answer 3

Answer №2

It seems to be functioning when I refrain from loading the second select initially. However, this does not pose an issue for my specific application.

Answer 4

It seems to be functioning when I refrain from loading the second select initially. However, this does not pose an issue for my specific application.

Updating select options list dynamically in Angular

Answer №1

Answer №2

Similar questions

When attempting to start the Azure Functions within a Nodejs Monorepo, the runtime fails with an error

Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Learn how to enhance a Vue component by adding extra properties while having Typescript support in Vue 3

Mapping JSON to interface in Angular 7: A step-by-step guide

Break down the key:value objects into individual arrays

Searching through an array of objects with ng2-completer does not yield any search results

Can you choose to declare a type in TypeScript, or is it required for every variable

Overflow issue occurs in react-bootstrap when a Table is placed within the Card.Body

Typescript feature: Configuring BaseUrl with nested directories

Best practice for importing ts files from an npm package

Using Angular: How to access a component variable within a CSS file

Display a notification next to the pinned location on the map using the Google Maps API

Steps for associating ngclass with an observant value

The value of 'useFonts' cannot be changed as it is a read-only property in expo-fonts

Is there a way to trigger an error event in Jest using TypeScript?

'Error: Script ngcc is missing in NPM' - Issue encountered

What's the Best Way to Add a Custom Flag to the `nx angular serve` Command Without Triggering an Error?

How to capture a screenshot of the current screen using Nativescript programmatically

Is it possible to navigate to the Angular component that defines a tag in VSCode by simply clicking on the tag?

Creating several light beams from a rotated structure