I need to toggle the visibility of a button based on the value of a boolean variable using the Output property. However, I am facing an issue where the button remains hidden even after the variable is updated with a true value.
Parent Component.ts
showEditButton = false;
editButton(event: boolean) {
this.showEditButton = true
}
Parent Component.html
<app-tools-menu-items-open
*ngSwitchCase="toolType.FILE_OPEN"
[isTextEditor]="isText"
(showEditButton)="editButton($event)"
></app-tools-menu-items-open>
// This component should be visible if showEditButton is true
<ng-container *ngIf="showEditButton">
<app-tools-menu-items-pdf-edit
*ngSwitchCase="toolType.EDIT_PDF"
></app-tools-menu-items-pdf-edit>
</ng-container>
Child Component.ts
@Output('showEditButton') showEditButton = new EventEmitter<boolean>();
uploadFile(event: Event): void {
this.loaderService.shouldLoad(true);
const files = (event.target as HTMLInputElement).files;
if (files && files.length > 0) {
const fileType = files[0].name.substring(
files[0].name.lastIndexOf('.') + 1
);
this.redirectTo(fileType, {
type: TOOL_TYPE.FILE_OPEN,
action: 'file',
value: {
name: files[0].name,
blob: files[0] as Blob,
status: 'selected',
} as FileResource,
});
this.loaderService.shouldLoad(false);
// Emiting the value
this.showEditButton.emit(true);
} else {
// TODO: Handle improper selection.
this.loaderService.shouldLoad(false);
}
}
Child Component.html
<div>
<button
mat-icon-button
[matMenuTriggerFor]="options"
(menuOpened)="setToolState(true)"
(menuClosed)="setToolState(false)"
class="icon-btn"
[ngClass]="{ active: isActive }"
matTooltip="{{ 'translateOpen' | translate }}"
>
<mat-icon svgIcon="file" class="app-icon-hover"></mat-icon>
</button>
<mat-menu #options="matMenu">
<button mat-menu-item (click)="openMyDocuments()">
<mat-icon svgIcon="local_drive" class="app-icon-hover"></mat-icon>
{{ "translateMyDocuments" | translate }}
</button>
<input
type="file"
#fileInput
(change)="uploadFile($event)"
accept=".pdf, .txt, .text, .epub"
/>
<button mat-menu-item (click)="openOneDrive()" *ngIf="envName !== 'prod'">
<mat-icon svgIcon="one_drive" class="app-icon-hover"></mat-icon>
{{ "translateOneDrive" | translate }}
</button>
<button mat-menu-item (click)="openGoogleDrive()" *ngIf="envName !== 'prod'">
<mat-icon svgIcon="google_drive" class="app-icon-hover"></mat-icon>
{{ "translateGoogleDrive" | translate }}
</button>
</mat-menu>
</div>
<div #fakeHld id="fakeHld"></div>
I have observed that the editButton function is triggered but Angular's Change Detection does not work as expected.