Using JSON.stringify in an expression in Angular2 template

Question

I have a small expression to check whether 2 objects are different or not, in order to display this element (via adding class name):

<div ngClass='{{JSON.stringify(obj1) != JSON.stringify(obj2) ? "div-show" : ""}}'></div>

The problem is I get this error: Cannot read property 'stringify' of undefined.

What I need a way to work around, or a proper solution if available. Thanks.

PS: I use JSON.stringify() to compare 2 simple objects, nothing fancy here.

Answer 1

Template code doesn't have access to all javascript, only component properties and methods. I think it would be best to create a 'stringify' method on your component, but you could just set a JSON property:

public constructor() {
  this.JSON = JSON;
}

Also I think your expression is backwards. NgClass takes the css class as the property name and a true/false value to tell whether that class is on the element, and it needs to be in brackets:

<div [ngClass]="{'div-show': JSON.stringify(obj1) != JSON.stringify(obj2)}"></div>

Answer 2

2 Years later but, you can do it the Angular Way using the built in pipe 'JsonPipe' from @angular/common

@Component({
  selector: 'json-pipe',
  template: `<div>
    <p>Without JSON pipe:</p>
    <pre>{{object}}</pre>
    <p>With JSON pipe:</p>
    <pre>{{object | json}}</pre>
    </div>`
})

export class JsonPipeComponent {
  object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
}

Answer 3

you can achieve it like this in your component do this.

myjson:any=JSON;

and in you view do it like this

<div ngClass='{{myjson.stringify(obj1) != myjson.stringify(obj2) ? "div-show" : ""}}'></div>