Angular is not running the change detection

Question

I want to show or hide the button according to the value of boolean variable. And for that i am using Output property. But when page is initialize button is hidden but when EventEmmiter emmits the value then the button is again hidden instead it has to be visible.

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>

Here i see that editButton is called but Change detection in Angular is not working.

Answer 1

ngOnChanges Lifecycle run when previous value of the property is different from the current one.

 OnChanges(changes: any){
   if(changes.currentValue !== changes.previousValue){
    // white your logic here
  }

Read more about the ngDoCheck lifecycle hoot