Angular 2 host async binding

Question

I have component:

@Component({
    selector: 'my-selector',
    template: `<div>html code goes here</div>  
    `,
    host: {
        '[style.background]': "'url(' +  (myobj | async).background + ') 50% no-repeat'"
    },
    styleUrls: ['myComponent.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
    @select(getMyobj)
    myobj: Myobj;
}

I need bind to my host element background.I'm getting Background in rxjs object(Observable), so I added "async", but I'm getting error message: "Template parse errors: The pipe 'async' could not be found".

How can I make it work?

it's not supported to do this anymore (async or any pipes in a host binding) — Simon_Weaver

saegrov saegrov · Accepted Answer · 2016-09-16T14:24:10

Be sure to import the CommonModule in your module declaration. The CommonModule includes the Async Pipe.

I've copied in one of my own modules where I ran into the exact same problem and left out the CommonModule.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
    declarations: [MyComponent],
    providers: [],
    imports: [CommonModule]
})
export class MyModule {
}

Angular 2 host async binding

1 Answers