Angular 6 @Viewchild is not working with lazy loading

Question

Here is my code that gives error cannot read property title undefined.

Parent Component

import { Child } from './child.component';
@Component({
  selector: 'parent',
})
export class ParentComponet implements OnInit, AfterViewInit {
 constructor(){}

  @ViewChild(Child) child: Child;

  ngAfterViewInit(){
    console.log("check data", this.child.title)
  }
}

And Child Component is.

@Component({
      selector: 'child',
    })
    export class ChildComponet {

     public title = "hi"
     constructor(){}

    }

routing.module.ts is like

{
        path: "",
        component: ParentComponent,
        children: [
            {
                path: '/child',
                component: ChildComponent
            }
        ]
}

And Gives error is

ERROR TypeError: Cannot read property 'title' of undefined(…)

Try with something like this... In your parent.component html: <child #myChildComponent></child> and in your parent component typescript: @ViewChild('myChildComponent') child: Child; — Deadpool
– Deadpool, Commented Dec 5, 2018 at 8:19

KShewengger · Accepted Answer · 2018-12-05 11:47:56Z

11

I think you are missing 'template' or 'templateUrl' in relevance to creating a Component

ParentComponent

import { ChildComponent } from './child.component';    // {ChildComponent} not {Child} as we are referencing it to the exported class of ChildComponent

@Component({
   selector: 'parent',
   template: `<child></child>`
})
export class ParentComponet implements OnInit, AfterViewInit {...}

ChildComponent

@Component({
  selector: 'child',
  template: `<h1>{{ title }}</h1>`
})
export class ChildComponent {...}       // Be sure to spell it right as yours were ChildComponet - missing 'n'

UPDATE as per the user's clarification on this thread

Had added a Stackblitz Demo for your reference (Check the console)

If you want to access the ChildComponent that is rendered under the Parent Component's <router-outlet> you can do so by utilizing (activate) supported property of router-outlet:

A router outlet will emit an activate event any time a new component is being instantiated

Angular Docs

ParentComponent's Template

@Component({
   selector: 'parent',
   template: `<router-outlet (activate)="onActivate($event)"></router-outlet>`
})
export class ParentComponent {

    onActivate(event): void {
        console.log(event);         // Sample Output when you visit ChildComponent url
                                    // ChildComponent {title: "hi"}

        console.log(event.title);   // 'hi' 
    }

}

The result will differ based on the visited page under your parent's children

If you visit Child1Component you will get its instance Child1Component {title: "hi"}

If you visit Child2Component you will get its instance Child2Component {name: "Angular"}

These results will then be reflected on your ParentComponent's onActivate(event) console for you to access

edited Dec 5, 2018 at 11:47

answered Dec 5, 2018 at 8:14

KShewengger

8,3293 gold badges27 silver badges38 bronze badges

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

2 Comments

Ricky Over a year ago

Hiii @KShewengger...thanks for your time....Actually I have multiple child components so I am useing <router-outlet></router-outlet> to render child view..

KShewengger Over a year ago

Hi @Ricky had updated my answer :) Since you can't use @ViewChild() on your ParentComponent since your ChildComponent is not a direct descendant or physically included on your Parent Component's Template. So the workaround, since you are loading them on your router-outlet, why not try to use its (activate) supported property of router-outlet

SiddAjmera · Accepted Answer · 2018-12-05 08:44:28Z

That's not how it's supposed to work. You'll be only able to get the ChildComponent in your ParentComponent ONLY if you have the <app-child></app-child> tag in your ParentComponent Template.

Something like this:

...

<app-child></app-child>

...

But since you're using child routing, and the ChildComponent will load on the router-outlet of your ParentComponent you won't have access to that using ViewChild

PS: You'll only have access to it inside ngAfterViewInit as ViewChild can only be considered safe to have instantiated after the View has loaded:

import { Component, OnInit, ViewChild } from '@angular/core';
import { ChildComponent } from '../child/child.component';
...

@Component({...})
export class ParentComponent implements OnInit {

  @ViewChild(ChildComponent) childComponent: ChildComponent;

  ...

  ngAfterViewInit() {
    console.log(this.childComponent);
  }

}

Here's a Working Sample StackBlitz for your ref that illustrates your scenario in both the cases.

PS: To get the ChildComponent properties in your ParentComponent, with Routing, you'll have to either use a SharedService or you'll have to pass the ChildProperty in the route as a QueryParam and read it in your ParentComponent using the ActivatedRoute

UPDATE:

Sharing Data using Route Query Params:

Although this won't make much sense, but in your ChildComponent, you can have a Link that would route the user to the ChildComponent with the title property passed as a queryParam. Something like this:

<a 
  [routerLink]="['/child']" 
  [queryParams]="{title: title}">
  Go To Child Route With Query Params
</a>

And in your ParentComponent have access to it using ActivatedRoute like this:

...
import { ActivatedRoute } from '@angular/router';
...

@Component({...})
export class ParentComponent implements OnInit {

  ...

  constructor(
    private route: ActivatedRoute,
    ...
  ) { }

  ngOnInit() {
    this.route.queryParams.subscribe(queryParams => {
      console.log('queryParams[`title`]', queryParams['title']);
    });
    ...
  }

  ...

}

Using a `SharedService`

Just create a SharedService with a private BehaviorSubject that would be exposed as an Observable by calling the asObservable method on it. It's value can be set by exposing a method(setChildProperty) that will essentially call the next method with the updated childProperty value :

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class SharedService {

  private childProperty: BehaviorSubject<string> = new BehaviorSubject<string>(null);
  childProperty$: Observable<string> = this.childProperty.asObservable();

  constructor() { }

  setChildProperty(childProperty) {
    this.childProperty.next(childProperty);
  }

}

You can then inject it both in your ParentComponent and in your ChildComponent:

In ChildComponent set the value:

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  public title = "hi"

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.setChildProperty(this.title);
  }

}

And in your ParentComponent get the value:

...
import { SharedService } from '../shared.service';

@Component({...})
export class ParentComponent implements OnInit {

  ...

  constructor(
    ...,
    private sharedService: SharedService
  ) { }

  ngOnInit() {
    ...
    this.sharedService.childProperty$.subscribe(
      childProperty => console.log('Got the Child Property from the Shared Service as: ', childProperty)
    );
  }

  ...

}

Morema · Accepted Answer · 2018-12-05 08:25:21Z

2

Make sure inside your parent.component.html template you've added the <child></child> tag.

edited Dec 5, 2018 at 8:25

answered Dec 5, 2018 at 8:01

Morema

1452 silver badges12 bronze badges

2 Comments

Ricky Over a year ago

Hiii @Morema...thanks for your time....Actually I have multiple child components so I am using <router-outlet></router-outlet> to render child view..

Morema Over a year ago

No worries, just trying to help and learn along the way. @KShewengger explained intelligently in his post and I also got to learn :)

Collectives™ on Stack Overflow

Angular 6 @Viewchild is not working with lazy loading

3 Answers 3

2 Comments

UPDATE:

Sharing Data using Route Query Params:

Using a `SharedService`

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

UPDATE:

Sharing Data using Route Query Params:

Using a SharedService

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Using a `SharedService`