angular 2 re-render parent component from @ViewChild Component

Question

I am working on angular2 application where I have parent component that pops up a child component

@ViewChild(childPopupComponent) case: childPopupComponent;

What I want to do is: when pressing save button from the child component (which is popup inside the parent component), re-render the parent one for reflection to take place (instead of reloading the whole page).

I know that this re-render the current component, but how to do that from the @ViewChild one

this.ref.detectChanges();

yurzui · Accepted Answer · 2017-09-25 09:54:02Z

2

Inject ChangeDetectorRef in your child component like:

export class childPopupComponent {
    constructor(public cdRef: ChangeDetectorRef) {}

and after that you will be able to run change detection cycly only on child component:

@ViewChild(childPopupComponent) case: childPopupComponent;

this.case.cdRef.detectChanges();

For updating parent you can inject it in child

export class childPopupComponent {
    constructor(public parent: ParentComponent) {}

and then

this.parent.cdRef.detectChanges()

or even try this:

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

export class childPopupComponent {
    constructor(@SkipSelf() private parentCdRef: ChangeDetectorRef) {}

edited Sep 25, 2017 at 9:54

answered Sep 25, 2017 at 9:34

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

4 Comments

sockeros Over a year ago

Really thank you, and If I wanted to inject the whole parent component inside the child in order to call a parent function from the child.. how can I do that as It throws strange error Can't resolve all parameters for casesPopupComponent: ([object Object], [object Object], [object Object], [object Object], [object Object], [object Object], ?)

yurzui Over a year ago

? usually happens with circular dependency. You can provide abstract class to solve it stackoverflow.com/questions/43198098/…

yurzui Over a year ago

Another solution for you is having @Ouput events on your child component and within parent template just subscrive to it <child (somethingChanged)="onHandleWithParentMethod()" This way you do not need to solve problem with circular dependency

sockeros Over a year ago

Thank you yurzui, very useful

Collectives™ on Stack Overflow

angular 2 re-render parent component from @ViewChild Component

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related