I am working on a scenario where I have two components interacting with each other. The parent component features a button, and upon clicking this button, the child component is disabled while also opening up to display its own button for closing. How can I effectively close the child component and re-enable the button in the parent component?
Here is an overview of my code:
// Parent Component
<app-child (currentChild)="setCurrentChild($event)" *ngIf="showChild"></app-child>
<button type="button" (click)="openChild()" [disabled]="isDisabled">Child</button>
public showChild = false;
public isDisabled = false;
openChild() {
this.showChild = true;
this.isDisabled = true;
}
// Child Component
<button class="btn-close" mat-button (click)="closeChild()">close</button>
@Output() public currentChild: EventEmitter<any> = new EventEmitter<any>();
closeChild() {
this.showChild = false;
this.isDisabled = false;
}