Support arrow functions in template syntax #14129
Comments
|
Thought: we could support |
|
In AngularJS, we used to recommend against adding too much logic in the templates. For example:
Is this less of a concern in Angular now? I know this is meant for good and being able to |
|
@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. |
|
Found the issue because I needed it to have thunks in my templates. 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. |
|
As a related issue, in Material 2 Autocompleter, the I figured out a workaround that worked, to keep my logic in the Component: then "inject" it into the template: Without wrap the arrow function, |
|
@matheo you can use component.ts displayFn(value: StateOption): string {
return !value ? '' : value.viewValue[this.lang];
}component.html <mat-autocomplete [displayWith]="displayFn.bind(this)" #states="matAutocomplete">
Still would like to see this inlined arrow feature though. |
|
Is there any update? |
|
Is there any way to make a workaround for this? Something like a Pipe that supports multiple parameters and returns a function? |
|
@Franki1986: as far as I could tell, there are only two ways to get this:
|
|
Pretty please 👍 🦄 especialy the displayWith usecase sucks 🤢 Maybe Ivy can handle this? |
|
with myfn.bind(this) and multiple emitters (like in a list) you run into trouble, best to use myfn = () => {} to retain a valid reference to this (instead of SafeSubscriber) |
It works perfectly well enough, but my Visual Studio Code error checking reports "Unknown Method 'bind' " :) Is it possible to do this kind of .bind() in the *.ts file, instead? |
Of course, just do it in the constructor. This will have no impact on type-checking. As bind creates a new function, you also need to reassign it: public constructor() {
this.displayFn = this.displayFn.bind(this);
} |
|
Ran into the need of an arrow function for a Component Input just now and found this issue. I simply wanted to inject some behaviour in another component. A sytax like this would be nice: <module-title [helpAction]="() => helpModal.open()"></module-title>Edit: <module-title [helpAction]="getOpenHelpModalCallback()"></module-title>. . . export class ModuleTitleComponent {
. . .
getOpenHelpModalCallback(): () => {} {
return () => this.helpModal.open();
}
}But, I find it bothersome. |
|
@jotiheranbnach Yeah, it's just extra, redundant code. That's a major reason to have this feature. I like to put simple stuff like this in the template, both to get rid of unnecessary code (keeping it DRY and KISS) and because 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. |
|
+1 for usage with |
|
Any updates on this? |
|
Any updates on this? |
|
If there are any updates you'll see them here or on the team's roadmap. |
|
Maybe one more use case that I stumbled upon today: When work with observables and the async pipe, I want to do something like this to avoid subscribing in the Component code: |
|
Hi! what about using arrays??? I have this issue I have to translate this Into this: I think this is absolutely necessary, don't you?!! :) |
|
@LeonardoX77 Angular is not react. Don't write JS in html. |
|
@Lonli-Lokli How's that example is a React? It's not JSX. |
|
This is being tracked in the aggregate issue of #43485 for which we need to create a project proposal. |
Nope. |
|
Well @jjamid, the |
|
I really hope it will never be implemented. It will lead to such an awful code which I usually see just in the JS portion, but it will also lead to performance degradation, which will be visible as a framework issue, while it will be an issue of a developer. |
I don't agree. Commenting on problematic code is always relvant, even if it's not related, since it's public. You cannot "avoid errors"! You're just moving the problem to the next much harder to troubleshoot step. The "?" is responsible personally for thousands of bugs that I've seen in the developers' code (and it usually makes the code extremly hard to understand when used wrong), it's because it's the exact opposite of the Guard Clause idea. Anyway, I think too that there should be arrow support in the angular html. And not only that, also access to Enums without workarounds and basically to be excatly like .NET's amazing razor files and Web Forms before that. Eventually the html will inherit the component, it's just a matter of time. They now allow accessing protected memebers in the html. Everything can be abused (like the "?" operator) and it's not a reason to not implement it. |
welcome to the pros list and don't worry about my awful code :), probably you will never have to deal with it. |
It's not uncommon for a component to take as input a transformation function or predicate function.
For example, this PR for
@angular/formsadds an@Inputfor a predicate function for determining if two options in a<select>are equal. Right now, this looks something like:With this feature, this could be written as
There are other places in Angular Material where we're looking to add similar API, e.g., datepicker with something like:
Or autocomplete, where the component needs to take an arbitrary value and know what string to write into the text input:
This would have to account for:
(a, b) => a + b)<my-x #x [uniq]="x => x.id">)x => ({name: x}))x => isActive(x)x => x.activate() | debounce)FYI @mhevery for planning
The text was updated successfully, but these errors were encountered: