Disallows calling expressions in templates, except for output handlers
- Type: suggestion
The rule accepts an options object with the following properties:
interface Options {
/**
* Default: `[]`
*/
allowList?: string[];
}
The following examples are generated automatically from the actual unit tests within the plugin, so you can be assured that their behavior is accurate based on the current commit.
❌ - Toggle examples of incorrect code for this rule
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
<div>{{ getInfo()() }}</div>
~~~~~~~~~~~
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
<a href="{{ getUrls().user }}"></a>
~~~~~~~~~
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
<p [test]="test?.getInfo()"></p>
~~~~~~~~~~~~~~~
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
<a [href]="id && createUrl() && test()($any)">info</a>
~~~~~~~~~~~ ~~~~~~~~~~~~
{{ id || obj?.nested1() }}
~~~~~~~~~~~~~~
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
<a [href]="id ? a?.createUrl() : editUrl(3)">info</a>
~~~~~~~~~~~~~~ ~~~~~~~~~~
{{ 1 === 2 ? 3 : obj?.nested1()() }}
~~~~~~~~~~~~~~~~
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
{{ obj?.nested1() }} {{ obj!.nested1() }}
~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~
<button [type]="obj!.$any(b)!.getType()()">info</button>
~~~~~~~~~~~~~~~~~~~~~~~~~
<a [href]="obj.propertyA?.href()">info</a>
~~~~~~~~~~~~~~~~~~~~~
✅ - Toggle examples of correct code for this rule
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
{{ info }}
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
<button type="button" (click)="handleClick()">Click Here</button>
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
{{ $any(info) }}
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
<input (change)="obj?.changeHandler()">
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
<form [formGroup]="form" (ngSubmit)="form.valid || save()"></form>
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
<form [formGroup]="form" (ngSubmit)="form.valid && save()"></form>
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error"
]
}
}
<form [formGroup]="form" (ngSubmit)="id ? save() : edit()"></form>
{
"rules": {
"@angular-eslint/template/no-call-expression": [
"error",
{
"allowList": [
"nested",
"getHref"
]
}
]
}
}
{{ obj?.nested() }} {{ obj!.nested() }}
<a [href]="getHref()">info</a>