CODEWITHSUNDEEP
javascriptangulartypescript
TomSelleck
TomSelleck

Reputation: 6968

Unable to render collection dynamically set at run time

I have a piece of JSON which represents some actions and parameters a user can set.

I want to display the actions in a dropdown, and when a user selects one - the required parameters associated with the action are displayed.

Example:

I nearly have it working but the *ngFor isn't displaying the inputs for the selected action:

enter image description here

In onChange - if I print this.steps, I can see that this.steps[i].SelectedAction.UIParameters has a value so I'm not sure why it isn't being rendered.

JSON:

[
  {
    "ActionEnum": "CLICKELEMENT",
    "Name": "Click Element",
    "UIParameters": [
      {
        "ParameterEnum": "ELEMENTID",
        "Description": "The id of the element to click"
      }
    ]
  },
  {
    "ActionEnum": "INPUTTEXT",
    "Name": "Input Text",
    "Description": "Enters text into the element identified by it's id",
    "UIParameters": [
      {
        "ParameterEnum": "ELEMENTID",
        "Description": "The id of the element"
      },
      {
        "ParameterEnum": "TEXTVALUE",
        "Description": "The text to enter into the element"
      }
    ]
  }
]

Typescript:

import { Component, Output, EventEmitter, OnInit } from "@angular/core";
import { ActionService } from "../services/action-service";
import { Action } from "../models/Action";

@Component({
  selector: 'app-scenario-step-editor-component',
  template: `
  <form #formRef="ngForm">
    <div *ngFor="let step of steps; let in=index" class="col-sm-3">
      <div class="form-group">
        <label class="sbw_light">Action:</label><br />
        <select (change)='onChange()' [(ngModel)]="step.Action" name="action_name_{{in}}">
            <option *ngFor="let action of this.availableActions" [(ngModel)]="steps[in].value" name="action_name_{{in}}" class="form-control" required>
              {{action.Name}}
            </option>
        </select>
        <div *ngIf="steps[in].SelectedAction">
          <label class="sbw_light">Parameters:</label><br />

          <ng-template *ngFor="let parameter of steps[in].SelectedAction.UIParameters">
            <label class="sbw_light">{{parameter.ParameterEnum}}</label><br />
            <input (change)='onChange()' type="text" [(ngModel)]="steps[in].Parameters" name="parameter_name_{{in}}" class="form-control" #name="ngModel" required />
          </ng-template>

        </div>
      </div>
    </div>

    <button id="addStepBtn" type="button" class="btn btn-light" (click)="addScenarioStep()">Add Scenario Step +</button>
  </form>`
})

export class ScenarioStepEditorComponent implements OnInit {
  @Output() onSelectValue = new EventEmitter<{stepInputs: any[]}>();

  steps = [];
  availableActions: Action[];

  constructor(private actionService: ActionService) {}

  ngOnInit(): void {
    this.actionService.list().subscribe( result => {
      this.availableActions = result;
    },
    error => console.log('Error getting actions...') );
  }

  /* When user picks an option, save the chosen action with the rest of the parameters*/
  onChange() {
    for (let i = 0; i < this.steps.length; i++) {
      let actionIndex = this.availableActions.findIndex(a => a.Name === this.steps[i].Action);
      this.steps[i].SelectedAction = this.availableActions[actionIndex];
    }
    this.onSelectValue.emit( {stepInputs: this.steps} );
  }

  addScenarioStep() {
    this.steps.push({value: ''});
  }
}

Upvotes: 2

Views: 31

Answers (1)

briosheje
briosheje

Reputation: 7446

<ng-template *ngFor="let parameter of steps[in].SelectedAction.UIParameters">
            <label class="sbw_light">{{parameter.ParameterEnum}}</label><br />
            <input (change)='onChange()' type="text" [(ngModel)]="steps[in].Parameters" name="parameter_name_{{in}}" class="form-control" #name="ngModel" required />
          </ng-template>

Just replace ng-template with ng-container:

<ng-container *ngFor="let parameter of steps[in].SelectedAction.UIParameters">
            <label class="sbw_light">{{parameter.ParameterEnum}}</label><br />
            <input (change)='onChange()' type="text" [(ngModel)]="steps[in].Parameters" name="parameter_name_{{in}}" class="form-control" #name="ngModel" required />
          </ng-container>

Reasons:

  • ng-container was suitable for that situation. It just holds "something" and can be iterated.
  • ng-template defines a template. You didn't need a template here, templates are not meant to be used for that. It could work, of course, but it's not suitable for your scenario.

Read more about ng-template and ng-container here: https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

As a final side note, you could use ng-template by defining an item and you could use ng-container with *ngTemplateOutlet to render the template. Check the above guide for some examples.

Upvotes: 2

Related Questions