feat(change-detection): add bind-once support in templates

@gdi2290 and I were just troubleshooting an issue related to an observable pipe always emitting a null value because the observable reference being passed into the pipe never matched the already set observable instance. This was because the template was calling a method to return an observable, causing a new observable to be created on each lifecycle tick.

{{ someService.getObservable() | async }}

It would be nice to have the same one-time binding capability as AngularJS 1.x where bindings could be expressed as “bind once” inside of templates.

One option is to create a pipe to support this, where as soon as a non-undefined value is returned from the left-side, the once pipe would cache and keep the reference:

{{ someService.getObservable() | once | async }}

Or we could add template sugar for this.

{{ ::someService.getObservable() | async}}

[shlomiassaf]

Retry…

This is a nice to have feature and one that will help a lot of people to fine tune performance without doing workarounds.

In my use case I want the user of the component to supply a function that will return a value and supply it in a declarative way (HTML). The function needs to run in the context of the class it is written in so the most simple approach would be to supply an @Input property in the component and the user will bound to it.

This approach results in endless invocations of the supplied function by the change detector. I can’t prevent that. I can save a reference to the returned value inside ngOnInit thus making sure I have 1 value for the whole component life cycle but this does not solve the problem:

• The invocation will continue still.
• I create boilerplate by adding a private member that hold a reference to the “1st” returned value.

As I see it, One time binding is a performance tune, it should be in the hand of the component builder to decide if it is needed or not. The user of the component should decide that as it might effect other things inside the component thus it shouldn’t be a syntax thing.

Trying to avoid adding new template syntax, there are several options:

* Setting up one time binding from metadata:

@Input(true) private prop: string;

This create some API changes, tough not necessarily breaking but it does. So we can:

@OneTime() @Input() private prop: string;

* Provide binding based change detection API: ChangeDetectorRef can provide an API to freeze change detection for a BindingTarget. This is a more complex scenario that allows granularity.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}