I am trying to run an eval in my angular template like so:
<div *ngFor="...">
<div *ngIf="eval('...')"></div>
</div>
You get the idea.
But I get the following error:
error TS2339: Property 'eval' does not exist on type 'CreateComponent'.
Obviously angular thinks that eval is a property of the component.
How do I fix this?
Don't tell me eval is evil. I know that and my use case is absolutely safe.
I can't just move the logic from the expression into a function on the controller.
The reason this doesn't work is because Angular looks for a function called eval in your class and it can't find it, you can easily solve this by adding that function to your class:
eval(evaluation: string) {
return eval(evaluation)
}<div *ngFor="...">
<div *ngIf="eval('...')"></div>
</div>I'll also mention that it's a bad idea to use functions in your template, as every time change detection happens Angular evaluates the function and it will reduce the performance on your app.
BTW, there's no reason not to use your component for this, and there's no limiatations really. If you need to pass a reference, you can just pass it as a parameter:
eval(string, ref) {
return eval(string + ref)
}<div *ngFor="...">
<div *ngIf="eval('...', myRef)"></div>
<div #myRef></div>
</div>You can declare in your component
export class AppComponent {
eval = eval
}
Now you can simply use the function in your HTML
Adding to the above answers, We can create a custom pipe with the below logic (Which was suggested by Yair Cohen).
eval(evaluation: string) {
return eval(evaluation)
}By using our own custom pipe one can reuse the same logic throughout the application on a need basis. Correct me if in case of any modification needed.
eval("variableName" + i)in the loop