无法以角度从父组件访问子组件

Question

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?

Answer 1

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() {

}

Answer 2

Try this

<app-file-picker #filePicker>

</app-file-picker>

Then in your parent component reference the #filePicker like:

@ViewChild("filePicker")

Answer 3

Your code is looking fine except small syntactical correction. Remove ! mark from the variable filePicker .

Change the following code

@ViewChild(FilePickerComponent) filePicker!: FilePickerComponent;

to

@ViewChild(FilePickerComponent) filePicker: FilePickerComponent;

Answer 4

To access to your child component, you need to pick the right angular lifecycle hook first, you have an undefined value on loading of your component because your child component is not yet fully loaded that's why angular didn't recognize the component.

First, you need to keep '!' with the variable to prevent error then you need to deactivate the save() action while the child component is not yet loaded by using a variable isChildLoaded = false for example.

Then you need to use ngAfterViewInit lifecycle hook and wait for the callback, this callback is executed when the child component is fully loaded. And there you set the variable = true to activate the save action.

    import {
      Component,
      ViewChild,
      AfterViewInit
    } from "@angular/core";
    
    
    export class Editor implements AfterViewInit {
    
    isChildLoaded  = false;
    @ViewChild(FilePickerComponent) filePicker!: FilePickerComponent;
    
    
      ngAfterViewInit() {         
       this.isChildLoaded = true;         
      }
    
    // in your template activate the button only if the variable isChildLoaded=true
    
    async save() {
    
  //now you have full access to the child component 
  //using filePicker variable.
   
 }

}