import { Component, OnChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { timer } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <tooltip [input]="childInput"></tooltip>
    <button (click)="onClick()" >Trigger change detection</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements OnChanges  {

  constructor(private cd: ChangeDetectorRef){  }

  childInput = {
    time: new Date()
  };

  ngOnChanges() {
    console.log('App component on changes.');
  }

  onClick() {
    timer(1000).subscribe(sub => {



      this.childInput = {
        time: new Date()
      };

    });
  }

}


import { Component, ChangeDetectionStrategy, Input, OnChanges, SimpleChange, SimpleChanges, Output, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'tooltip',
  template: `
    <h1>{{input.time}}</h1>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TooltipComponent implements OnChanges  {
  constructor(private cd: ChangeDetectorRef,)  {}

  @Input() input;

  ngOnChanges(){
    console.log('tooltip on changes called');
  }

}