Angular *ngIf with variable condition in external JSON file

Question

I am trying to add an ngIf condition to a div based on a variable that I get from an external JSON file.

This is what the JSON File looks like:

{
    steps: [
        {
            step: 'Step 1',
            condition: "selectedValue === 'village'"
        },
        {
            step: 'Step 2',
            condition: "language === 'english'"
        }
    ]
}

So what I am trying to achieve is the following:

<div *ngFor="let step of steps">
    <ng-container *ngIf="step.condition">
        {{ step.step }}
    </ng-container>
</div>

But I think that because the condition is in string value, the ngIf is not processing it correctly.

I have even tried a string interpolation type thing, but alas

condition: "${language} === 'english'"

Is there any way to achieve this desired result.

Answer 1

You have to evaluate javascript code and execute it. Example

HTML

<div *ngFor="let step of steps">
  <ng-container *ngIf="evaluate(step.condition)">
    {{ step.step }}
  </ng-container>
</div>

TS

evaluate(con: string) {
  return eval(con);
}