Updating value in the child component , on value changes in the parent component

Values changes from parent to child components are reflected immediately. However, you can listen for value changes event in the child component. Read more about ngOnChanges

Here is an example on stackblitz

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<app-child [data]="count"></app-child>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';

  count = 0;

  constructor() {
  }

  ngOnInit(): void {
    setInterval(()=> this.updateCount(), 1000);
  }

  updateCount(): void {
    this.count++;
  }
}

child.component.html

<p>
{{data}}
</p>

child.component.ts

import { Component, OnInit, OnChanges, Input, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {

  @Input() data: any;

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('value changed', this.data);
  }

}

Say this is your parent component.

import { Component, ViewChild, AfterViewInit } from '@angular/core';        

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit{

    message = "hello again";
    friends:string[] = [];

    //will add friend to our list of friends array
    add(friend){
        if(friend.value){
            this.friends.push(friend.value);    
            friend.value = "";
        }
        console.log(this.friends);
    }

    ngAfterViewInit() {    

    }

}

Parent Component UI

<div>
    <input #friend type="text" placeholder="name of friend" />
    <button type="button" (click)="add(friend)">add friend</button>
</div>

<app-to-child message="List of friends" [friends]="friends"></app-to-child>   

Now child component

Use @Input decorator with fields in which you want to receive data from the parent component.

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

@Component({
    selector: 'app-to-child',
    templateUrl: './to-child.component.html',
    styleUrls: ['./to-child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() message:string;
  @Input() friends:string[];
  constructor() { }

  ngOnInit() {
  }

  //this will called when data is passed from parent to child.
  ngOnChanges(val){
      console.log("change detected");
      console.log(val);                
  }

}

inside child.component.html

  <h5>CHILD COMPONENT</h5>
  <p>Message : {{message}}</p>
  <div *ngFor="let friend of friends"> {{friend}}</div>

You can learn more about component interactions here, a quick walk through.