Angular Router: Cannot read property ' ' of undefined

Question

im trying to implement Routing in my programm. The basic routing works if i type in the URL in the browser. However if i want to use my button from the MainComponent Im getting an error:Cannot read property 'loadFromJson' of undefined.

Before I implemented the Router it just worked fine like it is now.

My app-routing.module:

...
const appRoutes: Routes = [
{ path: 'start',        component: FrontPageComponent },
{ path: 'action',        component: MainComponent },
{ path: '',   redirectTo: '/start', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
  ];
...

My Main component calls a function with a button. Part of the function however calls another function which is in the child component.

MainComponent.html:

  <button routerLink="/action" type="submit" (click)="function()" >Load</button>
   ..
   ..
  <router-outlet></router-outlet>

MainComponent.ts

@ViewChild(ChildComponent) childComponent; <--imported ChildComponent with @ViewChild
      ...
      function(): void { 
        this.DownloadService.downloadResource(this.url).subscribe(
          json => this.childComponent.loadFromJson(json, this.url),   <--function from childComponent
          err => this.setError(err),
        );
      }

Function in the child Component:

childComponent.ts:

 private loadFromJson(json: any, id: string): void {
   this.initEmptyContainer();
   this.addFromJson(json, id);
}
 ...

Why cant it read the property and what can I do to fix it?

Which version of angular are you using? Note that all latest versions of angular uses a second parameter for the ViewChild. — Angela Amarapala, Feb 06 '20 at 11:30
@AngelaAmarapala as he don't get an error about viewchild static parameter her use less than version 8 — Muhammed Albarmavi, Feb 06 '20 at 11:40

score 0 · Answer 1 · answered Feb 06 '20 at 11:11

0

To refer a class variable inside your method use this.childComponent

Try this

@ViewChild(ChildComponent) childComponent;

...

function(): void { 
    this.DownloadService.downloadResource(this.url).subscribe(
      json => this.childComponent.loadFromJson(json, this.url),   // <-- Refer your childComponent using this
      err => this.setError(err),
    );
}

answered Feb 06 '20 at 11:11

Abdullah Khan

12,010
6
65
78

In that case check out [this](https://stackoverflow.com/q/34947154/3094731) answer – Abdullah Khan Feb 06 '20 at 11:34
When im usinf ViewCildren it says this: .loadFromJson is not a function – pattplatt Feb 06 '20 at 11:44

Muhammed Albarmavi · Answer 2 · 2020-02-06T13:30:18.710

0

the view queries are set before the ngAfterViewInit callback is called.

@ViewChild(ChildComponent) childComponent;

 downloadResource (): void { 
  this.DownloadService.downloadResource(this.url).subscribe(
     json => this.childComponent.loadFromJson(json, this.url),
          err => this.setError(err),
        );
      }

 ngAfterViewInit(): void {
    this.downloadResource();
  }

check here for more details

edited Feb 06 '20 at 13:30

answered Feb 06 '20 at 11:34

Muhammed Albarmavi

23,240
8
66
91

@pattplatt I have update the like , dis the answer solve your problem ? – Muhammed Albarmavi Feb 06 '20 at 13:30
unfortunately not, I tried it with ngAfterViewInit(): void { this.resourceDownloadService.downloadResource() } still the same error – pattplatt Feb 06 '20 at 15:04
However if I use @ViewChildren i get the Error: .loadFromJson is not a function – pattplatt Feb 06 '20 at 15:06

Angular Router: Cannot read property ' ' of undefined

2 Answers2