Angular2 directive is not responding to async data

Question

I have a component that receives and observable as an input.

@Input() data: SubDayFoodVM;

Which was passed from it's parent using the async pipe

<sub-day-food *ngIf="subDay" [data]="data | async"></sub-day-food>

One property on the SubDayFoodVM interface is foodName which gets passed to a custom directive on the template.

<div ticker [text]="data.foodName" [size]="30"></div>

This directive creates an element with the [text] passed into it. If the text is longer than it's container then then a duplicate element is created and the text margin slides to the left like a news ticker. Here is a primitive version that I created a while ago: PLUNKR.

In this implementation the text is set onInit

ngOnInit(): void {
    // ... 
    this.firstNode = this.createTickerNode( this.text );
}

This has resulted in the text not updating when the observable data updates. When the ticker action is triggered, the newly created element contains the new value, but the original element remains.

How can I alter my implementation to update the text or re-render the directive when the asynchronous data changes?

chaim · Accepted Answer · 2017-02-02 00:52:20Z

2

You need to implement OnChange lifecycle hook.

answered Feb 2, 2017 at 0:52

chaim

3141 silver badge7 bronze badges

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

2 Comments

Nate May Over a year ago

Do you mean within the directive to change the text or within the component to reload the directive?

chaim Over a year ago

You want the directive to be usable outside of the component - so in the directive.

Collectives™ on Stack Overflow

Angular2 directive is not responding to async data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related