Issue
I'm newbie in angular. So possibly I just missed smth important because of lack of experience. Please, help me to access child component from parent.
app.module.ts
import { FilePickerComponent } from "src/app/common/file-picker/file-picker.component";
...
@NgModule({
declarations: [
FilePickerComponent,
...
]})
export class AppModule {}
file-picker.component.ts
...
@Component({
selector: "app-file-picker",
templateUrl: "./file-picker.component.html",
styleUrls: ["./file-picker.component.css"],
})
...
editor.html
<form>
...
<app-file-picker
placeholder="Image"
required>
</app-file-picker>
...
</form>
editor.ts
import {
Component,
OnInit,
ViewChild,
OnDestroy
} from "@angular/core";
import { FilePickerComponent } from "src/app/common/file-picker/file-picker.component";
export class Editor implements OnInit, OnDestroy {
@ViewChild(FilePickerComponent) filePicker!: FilePickerComponent;
async save() {
}
at the moment when I try to access file picker from save it is undefined. how can I access file picker component from editor.ts?
Solution
export class Editor implements OnInit, OnDestroy {
@ViewChild(FilePickerComponent) filePicker!: FilePickerComponent;
async save() {
}
In the above code the implementation for the AfterViewInit life cycle hook is missing.In angular documentation it states that this life cycle hook is important.
Angular documentation for component intreactions
Try changing the above code as following
import {
Component,
OnInit,
ViewChild,
OnDestroy,
AfterViewInit
} from "@angular/core";
export class Editor implements OnInit, OnDestroy,AfterViewInit {
@ViewChild(FilePickerComponent) filePicker!: FilePickerComponent;
async save() {
}
Answered By - Sathiraumesh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.