CODEWITHSUNDEEP
angular
Anonymous
Anonymous

Reputation: 125

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

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>

Upvotes: 4

Views: 1510

Answers (2)

Sarath Mohandas
Sarath Mohandas

Reputation: 536

Set message as input in Child.component

@Component({
  selector: 'app-cards',
  templateUrl: './child.component.html'  
})

export class Childcomponent implements OnInit{
 @Input() message : any;

constructor() {
}

ngOnInit() { 
  console.log(this.message );
}
}

Parent.component.ts

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

  message : string; // Message From parent  
 
  constructor() { }

  ngOnInit() {   

    this.message = "TEST CASE"; // Message From parent
    
  }    
}

Parent.component.html

 <div class="col-sm-12">
            <div class="cardContainer">
                // {{message}} from Parent will send as @Input message of Child 
                <app-cards [message]={{message}}></app-cards>                              
            </div>
 </div>

You will receive data on the Parent Part. For further more details you can refer these links : https://angular.io/guide/inputs-outputs and https://www.tektutorialshub.com/angular/angular-passing-data-child-component/

Upvotes: 0

Salahuddin Ahmed
Salahuddin Ahmed

Reputation: 5640

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() {   
    
  }    
}

Upvotes: 4

Related Questions