Within my application, I have a parent component and a child component responsible for adding and updating tiles using a pop-up component. The "Add" button is located in the parent component, while the update functionality is in the child component. When there are no tiles (child component markup) to display, I need to add a tile without being able to access the child component's method openAddOrUpdatePopup().
Is there a way to call this method in the parent component without relying on the child component?
Here is a snippet of my code: - parent-html
<input type="button" class="btn" value="Add" (click)="applicationTile.openAddOrUpdatePopup()" />
<application-tile class="grid-item action-grid-item enable-events" *ngFor="let application of paginationParams.data" [ngClass]="{'active':activeApplication && activeApplication.applicationId == application.applicationId}" [application]="application"></application-tile>
parent.ts
export class ApplicationsComponent implements OnInit {
@ViewChild (ApplicationTileComponent, {static: false}) applicationTile: ApplicationTileComponent ;
}
Child.html
<label class="name">{{application.applicationName}}</label>
<div class="table-view">
<div class="table-view-row">
<div>
<label>Application value </label>
<span>{{application.value ? application.value : '-'}}</span>
</div>
<label>Application Version</label>
<span>{{application.appVersion ? application.appVersion : '-'}}</span>
</div>
<ul class="actions">
<li>
<span class="icon svg-icon action-icon edit-icon" title="Edit"
(click)="openAddOrUpdatePopup(application, $event)"></span>
</li>
</ul>
</div>
<av-popup class="medium-popup" *ngIf="popupParams && popupParams.name == 'create-or-update-application'" [popupParams]="popupParams" (close)="popupParams = null">
<form name="form" (ngSubmit)="f.form.valid && popupParams.saveOrUpdateApplication()" #f="ngForm"></form></av-popup>
child.ts
openAddOrUpdatePopup(application?, $event?) {
if (application) {
application = JSON.parse(JSON.stringify(application));
}
else {
application = {
applicationType: this.applicationTypes[0].applicationTypeVal
}
}
this.popupParams = {
name: 'create-or-update-application',
title: application.applicationId ? 'Edit ' + application.applicationName : "Create New Application",
application: application
}
}