Angular CLI - access to child component

Question

My problem is accessing to child component method 'edit' with @VIEWCHILD, but it's not working. where did I miss something?

Console logs: http://imgur.com/a/aDusn

CompanyComponent class (important part of it)

Important lanes: 1) CompanyRegistrationComponent is imported 2) @VIEWCHILD on that component is there 3) Method openEditModal is called properly in html file

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { ActivatedRoute, Params } from '@angular/router';
    import { CompanyService } from '../../../services/company.service';
    import { AdvertService } from '../../../services/advert.service';
    import { GlobalEventManager } from "../../../services/global-event-manager.service";
    import 'rxjs/add/operator/switchMap';
    import { SemanticModalComponent } from 'ng-semantic';
    import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
    import { FlashMessagesService } from 'angular2-flash-messages';
    import { CompanyRegistrationComponent } from '../../registration/company-registration/company-registration.component';
    @Component({
      selector: 'app-company',
      templateUrl: './company.component.html',
      styleUrls: ['./company.component.css']
    })
    export class CompanyComponent implements OnInit {
      @ViewChild(CompanyRegistrationComponent) companyRegistration: CompanyRegistrationComponent
      @ViewChild('commissionModal') private commissionModal: SemanticModalComponent
      private company: any;
      private showTransactionButton: boolean;
      private reviews: any;
      private editButton: boolean;
      private userId: number;
      private adverts: any;
      private form: FormGroup;

      constructor(
        private _fb: FormBuilder,
        private route: ActivatedRoute,
        private companyService: CompanyService,
        private advertService: AdvertService,
        private fm: FlashMessagesService,
        private _globalEventManager : GlobalEventManager) { 
        this.showTransactionButton = false;
        this.editButton = false;
        this.reviews = null;
      }

      ngOnInit() {
       this.getCompany();
       this.subscribeCurrentUser();
       this.buildForm();
      }
       private openEditModal(editedCompany){
         this.companyRegistration.edit(editedCompany);
      }

CompanyRegistrationComponent class(important part of it)

    import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
    import { SemanticModalComponent } from 'ng-semantic';
    import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
    import { MapsAPILoader } from "angular2-google-maps/core";
    import { Company } from '../../../models/Company';
    import { mailValidator } from '../../../validators/mail-validator';
    import { phoneValidator } from '../../../validators/phone-validator';
    import { rangeValidator } from '../../../validators/range-validator';
    import { passwordValidator } from '../../../validators/password-validator';
    import { LocalizationHelper } from '../../../helpers/LocalizationHelper';
    import { CompanyService } from '../../../services/company.service';
    import { FlashMessagesService } from 'angular2-flash-messages';

    @Component({
      selector: 'app-company-registration',
      templateUrl: './company-registration.component.html',
      styleUrls: ['./company-registration.component.css']
    })

    export class CompanyRegistrationComponent implements OnInit {

      @ViewChild('companyRegistration') private companyRegistration: SemanticModalComponent
      @ViewChild('location') private locElementRef: ElementRef;
      private form: FormGroup;
      private company: Company;
      private loaderStatus;
      private editedCompany: any;
      constructor(
        private _fb: FormBuilder,
        private mapsAPILoader: MapsAPILoader,
        private ngZone: NgZone,
        private companyService: CompanyService,
        private fm: FlashMessagesService)
        {
          this.company = new Company();
        }

      ngOnInit() {
        this.setFormValidations();
        LocalizationHelper.configureLocationAutocomplete(this.mapsAPILoader, this.locElementRef, this.ngZone, this.form)
      }

      open(){
       this.companyRegistration.show();
      }
      edit(editedCompany){
       // this.editedCompany = editedCompany;
       // this.setFormValues();
        this.companyRegistration.show();
      }

I tried to @ViewChild that class elsewhere, still, same problem.

Template:

 <sm-button *ngIf="editButton && !showTransactionButton" class="positive" (click)="openEditModal(company)">Edit</sm-button>

Answer 1

the problem comes from this line : this.companyRegistration.edit(editedCompany);

because companyRegistration here is undefined because of its declaration :

@ViewChild(CompanyRegistrationComponent) companyRegistration: CompanyRegistrationComponent;

u have to declare the ViewChild with the name setted in the template of the parent Component : ./company.component.html :

<app-company-registration #acr></app-company-registration>

so in you write in your ./company.component :

@ViewChild('acr') companyRegistration: CompanyRegistrationComponent;

hope this will help you :)