How do I pass data from my Parent Component to Child Component in Angular?

Question

This is my Parent Component, and I want to pass data like distinct headings(which is message in here) to each of its Child Component. How do I do that??

Parent:

<div class="container">
    <div class="row">
        <div>
            <h1 class="title">Whatever</h1>
            <p class="subtitle">Nothing.</p>
        </div>
        <div class="col-sm-12">
            <div class="cardContainer">
                <app-cards [message]=message></app-cards>
                <app-cards [message]=message></app-cards>
                <app-cards [message]=message></app-cards>
                <app-cards [message]=message></app-cards>               
            </div>
        </div>
    </div>
</div>

Child:

<div class="card">
    <div class="bg-text">
        <div class="title">{{message}}</div>
        <h6>Obviously, you are important</h6>
        <div class="cardButtons">
            <a href="" class="link link1">Health</a>
            <a href="" class="link link2">Travel</a>
            <a href="" class="link link3">Accident</a>
        </div>
    </div>
</div>

Answer 1

May be following solution would help you :)

ParentTemplate:

<div>
    <app-child [message]="messageFromParent"></app-child>
</div>

ParentComponent:

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

  messageFromParent : string;  
 
  constructor() { }

  ngOnInit() {   

    this.messageFromParent = "Hellow world!";
    
  }    
}

ChildTemplate:

<div>
    {{message}}
</div>

ChildComponent:

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

  @Input() message: string;    
 
  constructor() { }

  ngOnInit() {   
    
  }    
}