title: Can't access child from parent component in angular
body: <p>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.</p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { FilePickerComponent } from "src/app/common/file-picker/file-picker.component";
  ...
  @NgModule({
    declarations: [
    FilePickerComponent,
    ...
    ]})
  export class AppModule {}
  </code></pre>
  
  <p>file-picker.component.ts</p>
  
  <pre><code>...
  @Component({
    selector: "app-file-picker",
    templateUrl: "./file-picker.component.html",
    styleUrls: ["./file-picker.component.css"],  
  })
  ...
  </code></pre>
  
  <p>editor.html</p>
  
  <pre><code>&lt;form&gt;
      ...
      &lt;app-file-picker
          placeholder="Image"        
          required&gt;
      &lt;/app-file-picker&gt;
      ...
  &lt;/form&gt;
  </code></pre>
  
  <p>editor.ts</p>
  
  <pre><code>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() {
  
  }
  </code></pre>
  
  <p>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?</p>