Angular 2 - cannot get base class instance with ViewChild nor ContentChild

Question

answer:

dont use exportAs
use @ViewChild('myContent') myContent; to get the instance of the parent class
it will only work if the view is initialized, so better use ngAfterViewInit

this concerns inheritance !

base class (component)
    |
inherited class (component)

I have a base class component exported with exportAs

@Component({
    selector: 'my-content',
    exportAs: 'myContent',
    ...
})

the inherited class component uses a reference to the base class template in its own template

<my-content #myContent>
  ...

in the inherited component's code I try to get its instance

@ViewChild('myContent') myContent;

or

@ContentChild('myContent') myContent;

some say this should work but myContent is alway undefined

how do I solve this ?

thanks

Can you reproduce in Plunker?

Günter Zöchbauer
– Günter Zöchbauer

2017-08-30 06:44:01 +00:00
Commented Aug 30, 2017 at 6:44 — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 30, 2017 at 6:44

JeanPaul A. · Accepted Answer · 2017-08-30 07:44:03Z

1

To get the instance of the child component within the parent template you can use the Component class directly, without any references, like so

@ViewChild(MyComponentClass) myContent;

Where MyComponentClass is the exported name of the child component class.

As a side note, make sure that you are referenceing the myComponent variable after the views have been checked / initialized (using ngAfterViewInit) rather than on ngOnInit, since during the init stage, the child components would not have been created yet.

Here's a working plunkr :

https://plnkr.co/edit/Q53I4EIDOL0ZrUEo2jRN?p=preview

edited Aug 30, 2017 at 7:44

answered Aug 30, 2017 at 6:45

JeanPaul A.

3,7441 gold badge22 silver badges30 bronze badges

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

3 Comments

ninja Over a year ago

it's the other way around, I want to call the parent function from the child

ninja Over a year ago

I tried with ngAfterViewInit instead of ngOnInit but still the reference in undefined

JeanPaul A. Over a year ago

Fixed your plunkr to work. Changed ContentChild to ViewChild, and removed the exportAs decleration.

k11k2 · Accepted Answer · 2017-08-30 07:25:30Z

0

@ViewChild(MyParentComponent) myParent: MyParentComponent

you can instance the Parent Component like this.myParent

plunker:

import { Component, ViewChild } from '@angular/core';

@Component({...})

export class InheritedComponent extends BaseClassComponent {  

    @ViewChild(BaseClassComponent) myBaseclass: BaseClassComponent;

    doSomeOperations()
    {
        this.myBaseclass.toggle();
        console.log(this.visible); 
    }

}

edited Aug 30, 2017 at 7:25

answered Aug 30, 2017 at 7:11

k11k2

2,0542 gold badges24 silver badges37 bronze badges

4 Comments

ninja Over a year ago

then why calling the variable myChild ? it should be myParent or something.I tried your solution, it does not work

k11k2 Over a year ago

still the reference in undefined ?

k11k2 Over a year ago

I'm getting True in console. UPDATED

ninja Over a year ago

you should get FALSE I already tried that, does not work it gives UNDEFINED for the baseClass variable.. I updated the plunker plnkr.co/edit/jjN9An8G2QKzqFqk3dnp?p=preview you can see for yourself I tried in Chrome and Firefox

Collectives™ on Stack Overflow

Angular 2 - cannot get base class instance with ViewChild nor ContentChild

2 Answers 2

3 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Related