Support arrow functions in template syntax

[jelbourn]

It's not uncommon for a component to take as input a transformation function or predicate function.

For example, this PR for @angular/forms adds an @Input for a predicate function for determining if two options in a <select> are equal. Right now, this looks something like:

<select [compareWith]="equals" [(ngModel)]="selectedCountries"> ...

equals = (a: Country, b: Country) => {
   return a.id === b.id;
};

With this feature, this could be written as

<select [compareWith]="(a, b) => a.id == b.id" [(ngModel)]="selectedCountries"> ...

There are other places in Angular Material where we're looking to add similar API, e.g., datepicker with something like:

<md-datepicker [allowedDateFilter]="d => isWeekend(d)">

Or autocomplete, where the component needs to take an arbitrary value and know what string to write into the text input:

<md-autocomplete [displayWith]="value => value.getFullName()">

This would have to account for:

• Functions with multiple arguments ((a, b) => a + b)
• Functions with param names that already exist in the context (<my-x #x [uniq]="x => x.id">)
• Functions that return an object literal (x => ({name: x}))
• Invoking functions on the context (x => isActive(x)
• Passing functions through a pipe (x => x.activate() | debounce)

FYI @mhevery for planning

[vicb]

Thought: we could support x => {name: x} (without required "()") as we won't support fn body.

[gkalpak]

In AngularJS, we used to recommend against adding too much logic in the templates. For example:

[...]
The reason behind this is core to the AngularJS philosophy that application logic should be in controllers, not the views. If you need a real conditional, loop, or to throw from a view expression, delegate to a JavaScript method instead.

Is this less of a concern in Angular now?

I know this is meant for good and being able to (a, b) => a + b or x => x.someMethod() can come very handy (and doesn't include too much logic), but I am afraid people will end up doing things more like:

[displayWith]="x =>
  haveASideEffect(x) && 
  callMyApi({lastValue: x}) && 
  doSomethingElse() && 
  x.getFullName()"

[jelbourn]

@gkalpak My opinion on this one is that while we do want to discourage complex logic in the template, ultimately the template syntax exists in the first place to be a convenience and improve developer productivity. This feature makes it simple and clean to capture a somewhat common use-case, especially for functional-style programming, which is worth the fact that some people may go overboard with it.

[toverux]

Found the issue because I needed it to have thunks in my templates.

<comp *structural="() => some.undefinedValueAtViewInit"></comp>

So I think there are valid use cases (mine may seem strange but I can assure you that it makes sense with the thing I'm working on). But I agree with @gkalpak about potential abuses. Personally, I've not been surprised when the JiT compiler blown up when I tried to use an arrow function.

But still, that would be a nice and neat feature to have for responsible developers.

[matheo]

As a related issue, in Material 2 Autocompleter, the displayWith function is not binded to the Component, and I was not able to access the internal variables that I require to figure out the result.

I figured out a workaround that worked, to keep my logic in the Component:

displayFn() {
    return (value: StateOption): string => {
      return !value ? '' : value.viewValue[this.lang];
    };
  }

then "inject" it into the template:

<mat-autocomplete [displayWith]="displayFn()" #states="matAutocomplete">

Without wrap the arrow function, this.lang is undefined :(

[mtraynham]

@matheo you can use .bind(this):

component.ts

displayFn(value: StateOption): string {
    return !value ? '' : value.viewValue[this.lang];
}

component.html

<mat-autocomplete [displayWith]="displayFn.bind(this)" #states="matAutocomplete">

this is in reference to the component instance.

---

Still would like to see this inlined arrow feature though.

[antontrafimovich]

Is there any update?

[frankiDotNet]

Is there any way to make a workaround for this? Something like a Pipe that supports multiple parameters and returns a function?