How to trigger a change event manually - angular2

Question

Given the following components:

@Component({
    selector: 'compA',
    template:  template: `<compB [item]=item></compB>`
})
export class CompA {
    item:any;
    updateItem():void {
        item[name] = "updated name";
    }
}

@Component({
    selector: 'compB',
    template:  template: `<p>{{item[name]}}</p>`
})
export class CompB implements OnInit{
    @Input() item: any;
    someArray: any[];

    ngOnInit():void {
        someArray.push("something");
    }
}

As far as I understood that unless the complete item object is changed, angular2 does not recognize the changes on item. Therefore, I'd like to emit a change event manually for item when the updateItem method is called. And afterwards, make the child component i.e. CompB re-rendered as if angular detected a change in the regular way.

Currently, what I have done is to implement the ngOnInit method of for CompB and call that method inside updateItem method through a ViewChild link. Another part of the story is that my actual source has objects like someArray which I'd like to be reset in each render. I'm not sure re-rendering resets someArray though. Currently, I'm resetting them in the ngOnInit method.

So, my question is: how do I trigger re-rendering for changes on deeper elements of a parent object?

Thanks

Answer 1

As far as I understood that unless the complete item object is changed, angular2 does not recognize the changes on item.

It's not all that straightforward. You have to distinguish between triggering ngOnChanges when object is mutated and DOM update of the child component. Angular doesn't recognize that item is changed and doesn't trigger a ngOnChanges lifecycle hook, but the DOM will still be updated if you reference particular property of the item in the template. It's because the reference to the object is preserved. Therefore to have this behavior:

And afterwards, make the child component i.e. CompB re-rendered as if angular detected a change in the regular way.

You don't have to do anything in particular because you will still have update in the DOM.

Manual change detection

You can insert a change detector and trigger it like this:

@Component({
    selector: 'compA',
    template:  template: `<compB [item]=item></compB>`
})
export class CompA {
    item:any;
    constructor(cd: ChangeDetectorRef) {}

    updateItem():void {
        item[name] = "updated name";
        this.cd.detectChanges();
    }
}

This triggers change detection for the current component and all its children.

But, it won't have any effect in your case because even though Angular doesn't detect change in item it still runs change detection for the child B component and updates the DOM.

Unless you use ChangeDetectionStrategy.OnPush. In this case a way to go for you would be to do a manual check in the ngDoCheck hook of the CompB:

import { ChangeDetectorRef } from '@angular/core';

export class CompB implements OnInit{
    @Input() item: any;
    someArray: any[];
    previous;

    constructor(cd: ChangeDetectorRef) {}

    ngOnInit():void {
        this.previous = this.item.name;
        someArray.push("something");
    }

    ngDoCheck() {
      if (this.previous !== this.item.name) {
        this.cd.detectChanges();
      }
    }
}

You can find more information in the following articles:

• Everything you need to know about change detection in Angular article.
• The mechanics of DOM updates in Angular
• The mechanics of property bindings update in Angular