Angular 2 setting a new value does not trigger an input change event

Question

I'm running into a weird case that only seems to happen upon first loading a component on a heavily based component page (loading 30+ components).

@Component{
    selector: <parent-component>
    template: `<child-component [myObject]=myObject>
}
export class ParentComponent { 
    private myObject:DTOValue;
    constructor(service:MyService){
        service.getDTOValue().subscribe((dtoValue:DTOValue) => {
            this.myObject = dtoValue;
        });
    }
}

@Component{
    selector: <child-component>
    template: `<div></div>
}
export class ChildComponent { 
    @Input set myObject(value:DTOValue) => {//do something};
    constructor(){
    }
}

In this code, the Parent is going to get a value to a child as an input. This value comes from a request at a later time, so when the child is first initialized, the input could be undefined. When the value does get returned from the request and is set on the variable myObject , I'd expect that the child component would receive an input event being triggered. However, due to the timing, it seems like this is not always the case, especially when I first load a page that contains a lot of files being loaded.

In the case that the child component doesn't receive the input, if I click else where on my page, it seems to now trigger the change detection and will get the input value.

The 2 possible solutions I can think of that would require some large code changes so I want to make sure I choose the right now before implement them.

1. Change the input to be an Subject, so that I push the input value which should ensure that a correct event is triggered(this seems like overkill).

2. Use the dynamic loader to load the component when the request as return with the correct value (also seems like overkill).

UPDATE: Adding a plnker: http://plnkr.co/edit/1bUelmPFjwPDjUBDC4vb , you can see in here that the title seems to never get its data bindings applied.

Any suggestions would be appreciated.

Thanks!

Answer 1

If you can identify where the problem is and appropriate lifecycle hook where you could solve it, you can let Angular know using ChangeDetectorRef .

constructor(private _ref: ChangeDetectorRef)

method_where_changes_are_overlooked() {
  do_something();
  // tell angular to force change detection
  this._ref.markForCheck();
}

I had a similar issue, only with router - it needed to do redirect when/if API server goes offline. I solved it by marking routerOnActivate() for check...

When you trigger change detection this way a "branch" of a component tree is marked for change detection, from this component to the app root. You can watch this talk by Victor Savkin about this subject...

Answer 2

Apologize, the issue ended up being my interaction with jQuery. When I triggered an event for a component to be loaded, inside of the jQuery code, it wouldn't trigger the life cycle. The fix was after the code was loaded to then call for a change detection.