Arrow function in angular html

Question

I wonder if it's possible to use an arrow function in a component like this in Angular

<app-child [showItemCondition]="item => item.isVisible" [list]="items"></app-child>

Answer 1

Any functions cannot be defined in templates. To make it possible, then we need to eval those code in JIT compilation mode.

Prohibition to use arrow function allows to get rid of unnecessary code (DRY and KISS) and as a result:

• it's easier to read
• you don't have to go to keep going back to the component to see what each function is really doing.
• using component templates with functions that primarily belongs to classes would result in poor quality code that is hard to maintain.

If you need a function, it should be defined as component class method. It can be either regular or arrow function.

If logic will be placed in template, it means:

• that logic will be placed in different places. You have to go back and forth between template and class.
• it will harder to maintain to other programmers because they did not expect to have logic in UI. So logic is spread in different places. In my view, it breaks all principles such as SRP. And it makes really hard to maintain code to other future developers
• even this just one line of code makes code harder to debug