How to pass array data to child component using @input

Question

I want to pass data to children component using @Input and selector.

HomeComponent.html

   <c:homeHeader [dataSample]="[homeDataSample]"></c:homeHeader>
   <c:homeMedia></c:homeMedia>
   <c:ourPartner></c:ourPartner>
   <c:ourFriends></c:ourFriends>

HomeComponent.ts

    @Input() homeDataSample: any = [];
    constructor(
          private _HomeDataSampleService: HomeDataServiceService) { }
    ngOnInit(){
      this._HomeDataSampleService.getHomeData().subscribe(data => {
         this.homeDataSample = data['data'][0].all_sections;
         console.log(this.homeDataSample);
      })
    }

Child Component

HomeHeader.html

    <h5 class="text-uppercase font-weight-bold"> 
     {{dataSample['title']}}
    </h5>

HomeHeader.ts

       @Input() dataSample: string [];

my JSON file (copy only haft)

       {
     "data": [
     {
     "id": "sitePagesec015394",
     "created_by_id": "usr01539232275296",
     "updated_by_id": "usr01539232275296",
     "name": "home",
      "langs": {
       "en_US": {
      "id": "sitePage0tsec015394",
      "created_by_id": "usr01539232275296",
      "created_date": null,
      "updated_by_id": "usr01539232275296",
      "updated_date": null,
      "is_backup": 0,
      "lang_code": "en_US",
      "title": "Home",
      "short_desc": "Lorem ipsum dolor sit amet, consitePagetetur 
       adipisicing elit. Accusantium repellat nostrum dignissimos laborum, 
       deleniti non quae tenetur natus dolorem voluptas ratione unde 
       numquam, recusandae quos",
      "site_pages_id": "sitePagesec015394"
       }
     },

     "all_sections": [
    {
      "id": "sec01539602403701",
      "name": "home-header",
      "type": null,
      "bg_img": "assets/img/vipay1.jpg",
      "bg_color": null,
      "created_date": null,
      "updated_date": null,
      "bg_video": null,
      "created_by_id": "usr01539232275296",
      "updated_by_id": "usr01539232275296",
      "is_backup": 0,
      "parent_id": null,
      "ordering": 0,
      "edit_bg_image": 0,
      "site_pages_id": "sitePagesec015394",
      "record_type": "asset",
      "bg_img_preview": "gallery\/bg\/header.png",
      "langs": [],
      "sub_sections": [],
      "assets": [
        {
          "id": "ast01539857954921",
          "created_date": null,
          "updated_date": null,
          "created_by_id": "usr01539232275296",
          "updated_by_id": "usr01539232275296",
          "icon": null,
          "image": null,
          "ordering": 0,
          "type": null,
          "edit_icon": 0,
          "edit_title": 0,
          "edit_subtitle": 0,
          "edit_short_desc": 0,
          "edit_image": 0,
          "progress_value": null,
          "is_progress": 0,
          "sections_id": "sec01539602403701",
          "is_backup": 0,
          "parent_id": null,
          "record_type": "info-exlink",
          "internal_link": null,
          "external_link": null,
          "image_preview": "",
          "langs": {
            "en_US": {
              "id": "ast0t01539857954921",
              "created_date": null,
              "created_by_id": "usr01539232275296",
              "updated_date": null,
              "updated_by_id": "usr01539232275296",
              "is_backup": null,
              "lang_code": "en_US",
              "assets_id": "ast01539857954921",
              "title": "PERSONAL",
              "subtitle": null,
              "short_desc": "Enjoy shopping and transfering money easily 
               with ViPay, You can download the ViPay APP from the 
               AppStore or GooglePlay.",
              "description": null,
              "exlink_title": "Download",
              "inlink_title": null
            }
          }
        },

What should I do if I want to get title= "PERSONAL" to my child html (HomeHeaderComponent)?

I have been try for few hours and It's nothing to see.

Looks like you've basically got it. You can remove the [] around your input though. <c:homeHeader [dataSample]="homeDataSample"></c:homeHeader> Assuming the console.log() you have done is returning the value you expect. If not please link it's output so we can help further. — Sam
– Sam, Commented Oct 11, 2019 at 8:10

Adrita Sharma · Accepted Answer · 2019-10-11 08:12:05Z

3

Try like this:

<c:homeHeader [dataSample]="homeDataSample"></c:homeHeader>

answered Oct 11, 2019 at 8:12

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajeshkumar Kandhasamy · Accepted Answer · 2019-10-21 07:12:56Z

1

Give a try:

<c:homeHeader [dataSample]="homeDataSample"></c:homeHeader>

Change the dataSample type as any in HomeHeader.ts, Since you are passing an object to the child component. If you have any specific type then use that.

@Input() dataSample: any; //
Try to access the title property in html, like below:

<h5 class="text-uppercase font-weight-bold">{{dataSample.assets[0].langs.en_US.title}}</h5>

edited Oct 21, 2019 at 7:12

Rajeshkumar Kandhasamy

6,4997 gold badges61 silver badges84 bronze badges

answered Oct 11, 2019 at 9:30

Rajesh

3033 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to pass array data to child component using @input

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related