Why changing the @Input variable from within the internal component causes its failure to detect new changes from external component?

Question

I'm trying to set the CSS class within 'EditDialogComponent' below (which is a modal view), depending on an input property called 'showMe' that is set from 'AppComponent':

HTML Code:

    <div [ngClass]="showMe? 'ui active modal': 'ui modal'">
      <i class="close icon"></i>
      <div class="header">
        Edit
      </div>
      <div class="actions">
        <div (click)="cancel()" class="ui black deny button">
          Cancel
        </div>
        <div class="ui positive right labeled icon button">
          OK
          <i class="checkmark icon"></i>
        </div>
      </div>
    </div>

2. TypeScript Code:

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'edit-dialog',
  templateUrl: './edit-dialog.component.html',
  styleUrls: ['./edit-dialog.component.css']
})
export class EditDialogComponent implements OnInit {

  _showMe: boolean

  @Input() subject: string

  @Input() set showMe(value: boolean) {
    this._showMe = value
    window.alert('Trying to show modal')
  }

  get showMe() : boolean {
    return this._showMe
  }

  cancel() {
    this._showMe = false
  }

  constructor() { }

  ngOnInit() {
  }

}

Below is the code used to include 'EditDialogComponent' into 'AppComponent':

HTML code:

        <button (click)='edit()'>Edit</button>

    <edit-dialog [showMe]="show_edit_modal" subject='foobar'></edit-dialog>

TypeScript code:

    edit() {
        window.alert('Trying to show modal')
        this.show_edit_modal = true }

The problem is after the showMe @Input() gets changed from within EditDialogComponent (invoked by the click on the 'Cancel' button of the modal), it fails to detect the change of the data binding (i.e show_edit_modal) that is invoked by AppComponent.edit() (that displays "Trying to show modal" whenever I click on the Edit button of AppComponent)), since the alert from EditDialogComponent.ngOnChanges() stops showing.

Why changing the @Input variable from within the internal component causes its failure to detect new changes from external component?

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2018-02-13T11:42:04

This is working as intended. @Input() doesn't cause changes to be detected.

showMe="{{show_edit_modal}}"

is what Angulars change detection checks.

Ir better

[showMe]="show_edit_modal"

to actually pass a boolean value instead of a string

What you can do is to make showMe a setter

_showMe:boolean;
@Input() set showMe(val: boolean) {
  this._showMe = val;
  window.alert('Trying to show modal')
}

get showMe() : boolean {
  return this._showMe;
}

Why changing the @Input variable from within the internal component causes its failure to detect new changes from external component?

2 Answers