How to pass data from parent component to children component in angular

Sharing Data Between Angular Components Using Input Output Decorators

Sharing Data Between Angular Components Using Input Output Decorators is a very important concept in Angular. People who begin with using Angular in their application end up using one or the other methods of passing data between components.

Here we are going to focus on how are we going to pass data between components using Input() Ouput() Decorators.
This concept is very useful when you want to pass data between parent and child components.
Parent to Child: Sharing Data via Input
parent.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  parentMessage : string;
   constructor() { }
  ngOnInit() {
    this.parentMessage ="Code-Android-example.blogspot.com";
  }
}

parent.component.html

<app-children [childMessage]="parentMessage"></app-children>
child.component.ts
import { Component, OnInit } from '@angular/core';
import {  Input } from '@angular/core'
@Component({
  selector: 'app-children',
  templateUrl: './children.component.html',
  styleUrls: ['./children.component.css']
})
export class ChildrenComponent implements OnInit  {
  message : string;
   @Input() childMessage: string;
  constructor() { }
  ngOnInit() {
 
  }
}

child.component.html

<p>
  Send Data : {{childMessage}}
</p>

Demo online pass data from parent component  to children: