Can't access child from parent component in angular

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?

are you trying to access method of child or pass the child property? — alokstar, Oct 26 '18 at 16:13

Sathiraumesh · Accepted Answer · 2018-10-26T16:42:13.997

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

}

thanx, that's exactly what was missing – user1178399 Nov 01 '18 at 11:39 — user1178399, Nov 01 '18 at 11:39

score 0 · Answer 2 · answered Oct 26 '18 at 16:13

0

Try this

<app-file-picker #filePicker>

</app-file-picker>

Then in your parent component reference the #filePicker like:

@ViewChild("filePicker")

answered Oct 26 '18 at 16:13

CMR

549
1
5
12

addeв following code, but still filePicker is undefined: @ViewChild("filePicker") filePicker!: ElementRef; – user1178399 Oct 26 '18 at 16:32

Sunil Singh · Answer 3 · 2018-10-26T16:54:24.840

0

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;

edited Oct 26 '18 at 16:54

answered Oct 26 '18 at 16:34

Sunil Singh

11,001
2
27
48

When I remove ! mark, there are build errors: ERROR in editor.ts(52,27): error TS2564: Property 'filePicker' has no initializer and is not definitely assigned in the constructor. – user1178399 Nov 01 '18 at 10:56
Where are you checking the value of `filePicker!` ? in constructor or ngOnInit ? – Sunil Singh Nov 01 '18 at 11:00

Aouidane Med Amine · Answer 4 · 2022-07-08T16:29:12.557

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.
   
 }

}

Can't access child from parent component in angular

4 Answers4

Linked