My issue revolves around accessing the 'edit' method of a child component using @ViewChild, but for some reason it's not functioning as expected. Where could I possibly be going wrong?
Here are the console logs: https://i.sstatic.net/wvpVN.jpg
Key parts of the CompanyComponent class:
Vital notes: 1) Importing CompanyRegistrationComponent 2) Having @ViewChild on that component 3) Ensuring that the openEditModal method is correctly called in the HTML file
import { Component, OnInit, ViewChild } from '@angular/core';
...
export class CompanyComponent implements OnInit {
...
private companyRegistration: CompanyRegistrationComponent;
...
ngOnInit() {
this.getCompany();
this.subscribeCurrentUser();
this.buildForm();
}
private openEditModal(editedCompany){
this.companyRegistration.edit(editedCompany);
}
Crucial segments of the CompanyRegistrationComponent class:
import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
...
export class CompanyRegistrationComponent implements OnInit {
...
private companyRegistration: SemanticModalComponent;
...
ngOnInit() {
this.setFormValidations();
LocalizationHelper.configureLocationAutocomplete(this.mapsAPILoader, this.locElementRef, this.ngZone, this.form)
}
open(){
this.companyRegistration.show();
}
edit(editedCompany){
this.companyRegistration.show();
}
I've attempted to @ViewChild that class in various other places, yet the issue persists.
Template:
<sm-button *ngIf="editButton && !showTransactionButton" class="positive" (click)="openEditModal(company)">Edit</sm-button>