title: Angular ngOnChanges not working when I update child componenet property from parent component
body: <p><strong>app.component.ts</strong></p>
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import { ButtonComponent } from './button/button.component';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    @ViewChild('btn1') btn1!:ButtonComponent;
    @ViewChild('btn2') btn2!:ButtonComponent;
  
    updateOption() {
      this.btn2.disabledOnClick = 10000;
    }
  }
  </code></pre>
  <p><strong>app.component.html</strong></p>
  <pre><code>&lt;button app-button #btn1 [disabledOnClick] = 300 (click)=&quot;updateOption();&quot;&gt;
      Button111
  &lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button app-button #btn2 [disabledOnClick] = 500&gt;
      Button222
  &lt;/button&gt;
  </code></pre>
  <p><strong>button.component.ts</strong></p>
  <pre><code>import { Component, Input, OnInit, ElementRef, Renderer2, OnChanges, SimpleChanges } from '@angular/core';
  
  type ButtonOptionType = boolean | number;
  
  @Component({
    selector: '[app-button]',
    templateUrl: './button.component.html'
  })
  export class ButtonComponent implements OnInit, OnChanges {
    @Input() disabledOnClick: ButtonOptionType = false; 
  
    constructor(
      private elementRef:ElementRef,
      private renderer: Renderer2
    ) {}
  
    ngOnInit(): void {
      if(this.disabledOnClick !== false) {
        this.setDisabled(this.disabledOnClick);
      }
    }
  
    ngOnChanges(changes: SimpleChanges): void {
      console.log('ngOnChanges!!!', changes);
    }
  
    setDisabled(option: ButtonOptionType) {
      this.renderer.listen(this.elementRef.nativeElement, 'click', () =&gt; {
        this.elementRef.nativeElement.setAttribute('disabled', '');
        console.log('option', option);
        if(typeof option === 'number') {
          setTimeout(() =&gt; {
            this.elementRef.nativeElement.removeAttribute('disabled');
          }, option);
        }
      });
    }
  }
  </code></pre>
  <p>I have made two button components to test ngOnChanges <br>
  and added a click event on the button1 so that it can change the property value of the button2.<br><br>
  Unfortunately <code>ngOnChange</code> function does not trigger but btn2.disabledOnClick value changed. <Br>
  So how can I have the child component detect value changes?</p>