Angular Child Component is not being rendered as parent data changes

Question

Below code I have method to select hero and it is updating selectedHero of app.component but after updating detail.component is not being rerendered. please let me know how to notify child component when parent data changes.

app.component.ts

            import { heroes } from './Hero.service';
            import { Component, OnInit } from '@angular/core';
            import {Hero} from './Hero'
            import { heroes } from './Hero.service';
            import { Component, OnInit } from '@angular/core';
            import {Hero} from './Hero'
        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.scss']
        })
        export class AppComponent  {
          title = 'tour-of-heroes';
          Heroes:Hero[]=heroes;
          selectedHero:Hero;
          constructor(){

          }

          selectHero(hero){
          this.selectedHero=hero;
          console.log(this.selectedHero)
          }
        }

** Master Component**

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

        @Component({
          selector: 'app-master',
          templateUrl: './master.component.html',
          styleUrls: ['./master.component.scss']
        })
        export class MasterComponent implements OnInit {
          @Input() Heroes:Hero[];
          @Input() selectHero;
          constructor() { }

          ngOnInit() {
            console.log(this.Heroes,'master Heroes')
          }

        }

        details.component.ts

        import { Hero } from './../Hero';
        import { Component, OnInit, Input } from '@angular/core';
        @Component({
          selector: 'app-detail',
          templateUrl: './detail.component.html',
          styleUrls: ['./detail.component.scss']
        })
        export class DetailComponent implements OnInit {
          @Input() selectedHero:Hero;
          constructor() { }

          ngOnInit() {
            console.log(this.selectedHero)
          }

        }

        **app.component.html**

        '''
        <div style="text-align:center">
          <h1>Tour of Heroes</h1>
          <div class="Layout">
              <app-master [Heroes]="Heroes" [selectHero]="selectHero"></app-master>

          </div>
            <div class="Layout">
                <app-detail [selectedHero]="selectedHero"></app-detail>
            </div>

        </div> '''

        **master.component.html**

        '''<div class="master">
          <ul>
            <li *ngFor="let hero of Heroes" (click)="selectHero(hero)">
                <span>
                    Id : {{hero.id}}
                </span>
                <br/>
                <span>
                    Name : {{hero.name}}
                </span>
            </li>
          </ul>
        </div>'''

        ** detail Component **
        '''
        <div *ngIf="selectedHero">
          <h3>Selected Hero is : {{selectedHero.name}} </h3>
          <div>
              <p>Id : {{selectedHero.id}}</p>
              <p>Name : {{selectedHero.name}}</p>
          </div>
        </div>

In app.compponent selectedHero is being passed to details-component.

Answer 1

In DetailComponent, Data changes from parent component will be handled on ngOnChanges Life Cycle Hook.

export class DetailComponent implements OnInit, OnChanges {
      @Input() selectedHero:Hero;
      constructor() { }

        ngOnInit() {
           console.log(this.selectedHero)
        }

        ngOnChanges() {
           console.log(this.selectedHero)
        }

    }