Exploring a simple example where the childMethod is called within the child component from the parent component using the @ViewChild() decorator. However, encountering an issue where the ViewChild variable remains undefined.
Sample Child Component Code:
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Character} from "../models/character";
@Component({
selector: 'my-character',
templateUrl: 'app/components/my.character.component.html'
})
export class MyCharacter {
@Output() changed: EventEmitter<any> = new EventEmitter();
@Input() character: Character;
selectedCharacter: Character;
select(selectedCharacter: Character) {
this.selectedCharacter = selectedCharacter;
this.changed.emit(selectedCharacter);
};
childMethod() {
console.log('This method is invoked from the parent component via ViewChild');
};
}
Parent Component Sample Code:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Character } from '../models/character';
import { MyCharacter } from "../components/my.character.component";
@Component({
selector: 'character-list',
templateUrl: 'app/components/character.list.component.html',
directives: [ MyCharacter ]
})
export class CharacterList implements AfterViewInit{
selectedCharacter: Character;
@ViewChild(MyCharacter) myChar:MyCharacter;
ngOnInit() {
console.log('on init');
};
ngAfterViewInit() {
console.log('after init');
};
characters = [
new Character(1, 'Han Solo'),
new Character(2, 'Luke Skywalker'),
new Character(3, 'BB-8'),
new Character(4, 'Rey')
];
select(selectedCharacter: Character) {
this.selectedCharacter = selectedCharacter;
this.myChar.childMethod();
}
changed (event: any) {
console.log('Hello! There is a change in the item.');
}
}
Sample HTML of Parent Component:
<h2>Characters</h2>
<ul>
<li *ngFor="let character of characters" (click)="select(character)">
{{character.name}}
</li>
</ul>
<my-character *ngIf="selectedCharacter" [character]="selectedCharacter" (changed)="changed($event)"></my-character>
Error Received when Invoking Click Method:
core.umd.js:3462 EXCEPTION: Error in app/components/character.list.component.html:3:45 caused by: Cannot read property 'childMethod' of undefinedErrorHandler.handleError @ core.umd.js:3462next @ core.umd.js:6924schedulerFn @ core.umd.js:6172SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6164onError @ core.umd.js:6388onHandleError @ core.umd.js:6263ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113NgZoneImpl.runInnerGuarded @ core.umd.js:6271NgZone.runGuarded @ core.umd.js:6504outsideHandler @ platform-browser.umd.js:1990ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136ZoneTask.invoke @ zone.js:304
...More error details...
zone.js:140 Uncaught Error: Error in app/components/character.list.component.html:3:45 caused by: Cannot read property 'childMethod' of undefinedIf you have any insights or solutions to this issue, they would be greatly appreciated.