Angular 2 ngClass: Get Got interpolation ({{}}) where expression was expected when trying to display json on html

json angular angular2-directives ng-class
joeCarpenter picture joeCarpenter · Oct 7, 2016 · Viewed 8.1k times · Source

I'm new to Angular 2 and was hoping to get some help from the community. I'm currently trying to implement a dynamic/conditional implementation of ngClass in a <tr> element of my html view. The trufy used is a variable and its original value comes from a JSON object set on my Componenet:

<td [ngClass] = "{weak : {{jsonInMyComponenet.element}}, neutral : !{{jsonInMyComponenet.element}}}"  ></td>

When I use the code above I get this error:

Got interpolation ({{}}) where expression was expected

If I remove the curly brackets I get no errors but the page doesn't render the element, so I can't see the class implementation of weak nor neutral. What am I'm doing wrong?

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Oct 7, 2016

Don't use [...] and {{...}} together. Either the one or the other.

<td [ngClass] = "{'weak' : jsonInMyComponenet.element, 'neutral' : !jsonInMyComponenet.element}"  ></td>

{{...}} is for string interpolation. [...] interprets the value as expression.

Related questions

Importing json file in TypeScript

I have a JSON file that looks like following: { "primaryBright": "#2DC6FB", "primaryMain": "#05B4F0", "primaryDarker": "#04A1D7", "primaryDarkest": "#048FBE", "secondaryBright": "#4CD2C0", "secondaryMain": "#00BFA5", "secondaryDarker": "#009884", "secondaryDarkest": "#007F6E", "tertiaryMain": "#FA555A", "tertiaryDarker": "#F93C42", "tertiaryDarkest": "#F9232A", "darkGrey": "#333333", "lightGrey": "#777777" } …

Read More
Angular 2: Get Values of Multiple Checked Checkboxes

My problem is really simple: I have a list of checkboxes like this: <div class="form-group"> <label for="options">Options :</label> <label *ngFor="#option of options" class="form-control"> <input type="checkbox" …

Read More
Angular 5 Service to read local .json file

I am using Angular 5 and I've created a service using the angular-cli What I want to do is to create a service that reads a local json file for Angular 5. This is what I have ... I'm a bit stuck... import { …

Read More