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
– Simon_Weaver, Commented Feb 7, 2019 at 6:23

saegrov · Accepted Answer · 2016-09-16 14:24:10Z

1

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 {
}

answered Sep 16, 2016 at 14:24

saegrov

413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 host async binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related