How to correctly dynamically render components in angular in a ngFor loop

Question

I have worked a lot with angular loops but somehow in this case I cant properly render even simple UI elements in a loop. A select element determines what is rendered in the loop below. The loop seems to evaluate the function again and again without user input in the following example:

  achievementTypes = [
    { value: 'photos_containing_all_of', label: 'Photos Containing All Of' },
    { value: 'photos_containing_only_category', label: 'Photos Containing Only Category' },
    { value: 'photos_of_distinct_groceries', label: 'Global: Different Categories across all images' },
    { value: 'photos_contains_at_least', label: 'Photos Containing At least x groceries' },
  ];

    <select [(ngModel)]="selectedType" name="selectedType" [ngModelOptions]="{ standalone: true }" class="custom-select">
        <option *ngFor="let type of achievementTypes" [value]="type.value">{{ type.label }}</option>
    </select>

    <div *ngIf="selectedType">
      <div *ngFor="let param of getRequiredParams(selectedType)">
          <span>{{ param.label }}</span>
          <!-- Uncommenting this will freeze the UI upon select -->
          <!-- <input [(ngModel)]="achievementParams[param.key]" /> -->
      </div>
    </div>

This is my function which called in the loop. I intend to use its values for the ui components to be rendered dymanically:

  getRequiredParams(type: string): any[] {
    let result = [{key: 'missing',  label: 'mssing label'}];
    switch (type) {
      case 'photos_containing_all_of':
        result = [
          { key: 'setOfGroceries', label: 'Set of Groceries' },
          { key: 'requiredPhotoCount', label: 'Required Photo Count' }
        ];
        break;
      case 'photos_containing_only_category':
        result = [
          { key: 'category', label: 'Category' },
          { key: 'requiredPhotoCount', label: 'Required Photo Count' }
        ];
        break;
      case 'photos_of_distinct_groceries':
        result =  [
          { key: 'requiredDistinctGroceries', label: 'Required Distinct Groceries' }
        ];
        break;
      case 'photos_contains_at_least':
        result = [
          { key: 'groceryCount', label: 'Grocery Count' },
          { key: 'requiredPhotoCount', label: 'Required Photo Count' }
        ];
        break;
      // Add more cases for other types
      default:
        result = [{key: 'missing',  label: 'mssing label'}];
    }
    console.log(result);
    return result;
  }

Once I select a value and selectedType is set the getRequiredParams function gets called constantly which I can see in the console. As a consequence the UI freezes once I comment in the input element. I dont understand what the problem is. No error is thrown so far.

Maybe it is not important but component is a dialog component. Also I am using Angular 12.

How to do this the right way?

Calling functions in the template can be a bad idea. Change Detection doesn't know if it need to re-evaluate `getRequiredParams(selectedType)`. Default approach would be a pipe along the lines of https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor. As an aside, always include trackBy when doing ngFor — Andrew Allen, Aug 22 '23 at 13:40
Using any[] as return type is also a bad idea. You actually return: { key: string, label: string }[]. Change it to this — MoxxiManagarm, Aug 22 '23 at 13:53
Happy this is solved. Would also add that using ChangeDetection.OnPush is another way to reduce change detection cycles (changes only when inputs change). This is also good prep for the signal component changes coming down the line in v17+ — Andrew Allen, Aug 23 '23 at 12:10

Caveman · Accepted Answer · 2023-08-23T11:42:25.943

2

The problem is with you calling the getRequiredParams() inside the template. By default the component will rerender like crazy for every change made in the change detection tree.

Maybe try something like...

<select ... (ngModelChange)="updateRequiredParams($event)">...</select>

@Component({...}) {
  ...
  updateRequiredParams(achievmentType: string) {
    this.requiredParams = this.getRequiredParams(achievmentType)
  }
}

... and *ngFor the requiredParams

edited Aug 23 '23 at 11:42

answered Aug 22 '23 at 14:19

Caveman

2,527
1
17
18

1

updateRequiredParams needs to get passed the $event argument I think. Works! – finisinfinitatis Aug 22 '23 at 15:56
I wrote it without running it, makes sense there is a bug haha. – Caveman Aug 23 '23 at 11:42

How to correctly dynamically render components in angular in a ngFor loop

1 Answers1