Async Host Binding No Longer Works

[nrgonzalez777]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
In Angular 2.1.2, defining an async host binding for a component throws a directive parse error saying that async pipe cannot be found.

Expected behavior
Async host binding should work normally as it did in 2.1.1.

Minimal reproduction of the problem with instructions
The following is a definition of a component where this behavior occurs:

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { select } from 'ng2-redux';
import { fadeOut } from './loading.animations';

@component({
selector: 'loading',
templateUrl: './loading.component.html',
styleUrls: ['./loading.component.scss'],
animations: [
fadeOut
],
host: {
'[@fadeout]': '(isComplete | async)'
}
})
export class Loading {
@select(['loading', 'complete']) private isComplete: Observable;
}

*What is the motivation / use case for changing the behavior?
Behavior changed from previous version.

Please tell us about your environment:
Windows 10, webpack build process.

• Angular version: 2.0.X
  2.1.2

• Browser: [Chrome]

• Language: [all]

[DzmitryShylovich]

What is Async host binding?

And pls add a repo/plunkr with reproduction.

[nrgonzalez777]

An async host binding is when you need to put a binding on the component's host that uses the async pipe. So in the example I gave, I have an animation trigger that fires based off of the "isComplete" observable, which means it needs the async pipe to work. However, I want the animation to work off of the host element, so I need to add in the property via the host object. This worked just fine in 2.1.1, but in 2.1.2 it throws a directive parse exception.

[vicb]

This "feature" was never intended to work and has been explicitly disabled.

@tbosch can you expand ?

/cc @matsko

[nrgonzalez777]

So is there no path for adding an animation based off an async pipe to your host object? If so, can any light be shed on the technical reason why this stopped working? My guess is this changed due to #12396, but I'm not entirely sure why the change was made.

[tbosch]

Some background:
Host bindings of a component ("child") are executed in the component that uses that component ("parent"). And the parent component can belong to a different NgModule.
So if you use a pipe, the pipe is resolved against the NgModule of the parent component. However, if that NgModule does not declare the pipe that you are using, your component is broken.

This is the reason why we never wanted to have pipes in host bindings. After one of the bigger compiler refactorings before 2.0 final, we accidentally reintroduced it, but this was a bug, not a feature, as the semantics are wrong.

In your example you could use a plain host event instead, as the decorator @select, which is not one of the angular core decorators, probably won't work with AoT either.

Sorry for this confusion, but this change was really just a fix.

[simeyla]

It seems to me like the issue here isn't that we want 'async pipes', or any kind of pipes at all, but instead that we need a way to bind to an observable. Cannot that be made easier?

[angular-automatic-lock-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.}