*ngIf and ngClass with a dynamic variable-Angular 4

Question

I am trying to read values from a json and load values dynamically to ngClass and check ngIf conditions. when i try to do like below i am getting error. can some one help me?

I also checked other posts with dynamic ngIf but it is not related to my scenario.

<md-list>
<ng-container *ngFor="let dataItem of navigationData">
<ng-container >
<md-list-item >
<a  [ngClass]="{{dataItem.ngClass}}"routerLink="{{dataItem.routerLink}}" 
routerLinkActive="{{dataItem.routerLinkActive}}"> {{dataItem.display}}
<span *ngIf="{{dataItem.isValid0}}" class="">
<span *ngIf="{{dataItem.isValid1}}" class="margin-left-90px">
<i class="material-icons color-green">{{dataItem.icon}}</i>
</span>
<span *ngIf={{dataItem.isValid2}}></span>
</span>
</a>
</md-list-item>
</ng-container>
</ng-container>
</md-list>

Json structure:

{   
"menu": [       
{
"mdlistIf":"nameData =='3'",
"anchorClass" : "navigationLink menuFont",
"ngClass":  "
{'navigationDisableLink':!IsBorrowerSelectionEnable,'clickDisable':
(isBorrowerSelectionDataValid == 1)}",
"routerLink": "/borrowerselection",
"display" : " Initial Selections",
"routerLinkActive" : "navigationActiveLink",
"isValid0": "isBorrowerSelectionDataValid",
"isValid1": "isBorrowerSelectionDataValid== 1",
"isValid2": "isBorrowerSelectionDataValid== 2",
"icon": "lock"
},              
{
"mdlistIf":"nameData =='3' || nameData =='1'",                  
"anchorClass" : "navigationLink menuFont",
"ngClass":  "{'navigationDisableLink':!IsBorrowerEnable}",
"routerLink": "/borrower",
"display" : "Borrower Information",
"routerLinkActive" : "navigationActiveLink",
"isValid0": "isBorrowerDataValid",
"isValid1": "isBorrowerDataValid== 1",
"isValid2": "isBorrowerDataValid== 2",
"icon": "check_circle"                              
}
]}

I also tried *ngIf="dataItem.isValid0". it still didn't work for me.

This code is for navigation Menu. Previously it was like this:

<md-list-item >
<a class="navigationLink menuFont" [ngClass]="
{'navigationDisableLink':!IsBorrowerEnable}" routerLink="/borrower" 
routerLinkActive="navigationActiveLink">
Borrower Information
<span *ngIf="isBorrowerDataValid" class="">
<span *ngIf="isBorrowerDataValid == 1" class="glyphicon glyphicon-ok-circle 
color-green margin-left-55px"><i class="material-icons">check_circle</i>
</span>
<span *ngIf="isBorrowerDataValid == 2" class="glyphicon glyphicon-remove-
circle color-red margin-left-55px"></span>
</span>
</a>
</md-list-item>

I want to reuse the code using ngFor by dynamically loading all the data from json.

isBorrowerDataValid is a variable which is zero by default and 1 if user fills all the required data in page and 2 if he partially fills it.

Answer 1

Ok so I think I have a good news for you,

consider this is the object that you have,

 myObj ={"decision":'2==2'};

now you wish to use this to display a span here it is how you should be doing it,

<span *ngIf=myFunction(myObj.decision)>This is the test span to display something.</span>

now in your component you need to have a function with the name as myFunction, as given below,

  myFunction(vwLogic){
    //console.log(eval(vwLogic),"Dj test");
    return eval(vwLogic);
  }

now it should be able to evaluate your string which has to evaluated as boolean.

my Entire component look like this,

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  myObj ={"decision":'2==2'};
  myFunction(vwLog){
    //console.log(eval(vwLog),"Dj test");
    return eval(vwLog);
  }
}

MY html file looks like this,

This is the test span to display something.