How to execute javascript code like JSON.parse() in the angular html template itself instead of making a method and calling the method in the angular html template file
I tried below ways:
<p [innerHTML]="JSON.parse(['\\u2013'])[0]"></p>
<p>{{ JSON.parse(['\\u2013'])[0] }}</p>
But getting Property 'JSON' does not exist on type 'AppComponent'.
Can it be possible to write javascript code on angular html template itself?
All you write in .html should be a "public" (variable or object or function). So, we can not use, e.g. {{Math.random()}} nor {{JSON.parse('["\\u2013"]')[0]}} or {{Array.from('foo')}}
See the quotes in JSON.parse
Well, you always can assign a public variable in your .ts (by defect all the variables are public) to the javascript object you want
//declare in your .ts (I choose give the same "name" to the variable)
JSON:any=JSON
Math:any=Math
Array:any=Array
And use in .html
<div>
{{Math.random()*10}}
{{JSON.parse('["\\u2013"]')[0]}}
</div>
<div *ngFor="let a of Array.from('foo')">Hello</div>
BTW, if you want to execute javascript, I suggest executed in ngOnInit or ngAfterViewInit functions
You can put your code inside a function in you component.ts file and then call that function from html file.
component.ts
parseJson(data) {
return JSON.parse(data);
}
component.html
<p>{{parseJson(['\\u2013'])[0]}}</p>
