Parent component to child component values is not passing properly in angular

Question

I'm trying to pass json value using Input decorator but its not working. I tried to pass data parent component to child component but its not working properly.

Child Component

<div class="card">
  <div class="card-body">
    <h4 class="card-title">{{ analyticsTitle }}</h4>
      <div *ngFor="let data of datas">
        <a href="{{data.redirectionUrl}}" class="card-link">{{data.description}}</a>
      </div>
      <div class="text-right view-more">
        <a href="{{viewMoreUrl}}">
            {{ viewMore }}
        </a></div>
    </div>
</div>

TS

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


@Component({
  selector: 'app-widget',
  templateUrl: './widget.component.html',
  styleUrls: ['./widget.component.scss']
})
export class WidgetComponent implements OnInit {
  @Input('joke') datas=[];

  ngOnInit() {
  }
}

Parent Component

<app-widget *ngFor="let j of analytics" [joke]="j"></app-widget>

TS

import { Component, OnInit } from '@angular/core';
import { HomeService } from "./../../service/home.service";

@Component({
  selector: 'app-bi-analytics-platform',
  templateUrl: './bi-analytics-platform.component.html',
  styleUrls: ['./bi-analytics-platform.component.scss']
})
export class BiAnalyticsPlatformComponent implements OnInit {


  analytics = [];
  analyticsTitle = '';
  viewMore = '';
  viewMoreUrl = '';
  constructor(private homeService: HomeService) { 
   }

   ngOnInit() {

    this.homeService.homeDataWidget().subscribe(response => {
      let res = response[0];
      let heading = res['BI-Analytics'][0]['heading'][0];
      this.analytics = res['BI-Analytics'][0]['body'];
      this.analyticsTitle = heading['title'];
      this.viewMore = heading['viewmore'];
      this.viewMoreUrl = heading['viewmoreURL'];
    });

   }

}

JSON 1

[
  {
  "BI-Analytics": [{
    "heading": [{
      "viewmore": "View More",
      "viewmoreURL": "http://google.com"
    }],
    "body": [{
        "description": "test",
        "redirectionUrl": "lik"
      }]
  }]
}]

JSON 2

[
  {
  "Test": [{
    "heading": [{
      "viewmore": "View More",
      "viewmoreURL": "http://google.com"
    }],
    "body": [{
        "description": "test",
        "redirectionUrl": "lik"
      }]
  }]
}]

JSON 3 - have nested json formats

[
  {
  "Test1": [{
    "heading": [{
      "viewmore": "View More",
      "viewmoreURL": "http://google.com"
    }],
    "body": [{
        "description": "test",
        "redirectionUrl": "lik"
      }]
  },
  {
  "Test2": [{
    "heading": [{
      "viewmore": "View More",
      "viewmoreURL": "http://google.com"
    }],
    "body": [{
        "description": "test",
        "redirectionUrl": "lik"
      }]
  }]
    {
  "Test3": [{
    "heading": [{
      "viewmore": "View More",
      "viewmoreURL": "http://google.com"
    }],
    "body": [{
        "description": "test",
        "redirectionUrl": "lik"
      }]
  }]

}]

Above mentioned formats, needs to pass. So I would like to pass the value as below:

@Input() test1:
@Input() test2

Suggest if this is possible.

the only mistake in your code is you are using href instead of angular router — Chellappan வ, Oct 11 '18 at 13:35
No, `
` the json values are not assigned in for loop so that its not iterating — jinfy, Oct 11 '18 at 13:36
If the parent analytics array has no data in it then it won't render anything because there is nothing to iterate - check the API response is as expected — danday74, Oct 11 '18 at 13:43

score 1 · Answer 1 · answered Oct 11 '18 at 13:41

1

Can't see any problems but just in case try this:

<ng-container *ngFor="let j of analytics">
  <app-widget [joke]="j"></app-widget>
</ng-container>

answered Oct 11 '18 at 13:41

danday74

52,471
49
232
283

No still getting same "widget.component.html:4 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3152)" – jinfy Oct 11 '18 at 13:49
OK it sounds like analytics is not an array as expected but is actually something else. If it is an object then you can iterate over object properties with *ngFor using the keyvalue pipe (requires Angular 6.1) - Alternatively, convert it to an array – danday74 Oct 11 '18 at 13:51
is there any examples – jinfy Oct 11 '18 at 13:52
or just Google convert object to array javascript - returns answers like this ... https://stackoverflow.com/questions/38824349/convert-object-to-array-in-javascript/44790922 - you might want to use lodash to make such an operation easier – danday74 Oct 11 '18 at 13:55
is there possible to 2 more @Input decorator – jinfy Oct 11 '18 at 14:08
okie, but i tried the same but not able to pass simultaneously – jinfy Oct 11 '18 at 17:32

score 0 · Answer 2 · answered Oct 11 '18 at 14:56

0

You are passing only one instance of Analytics(which is a single object of analytics) at a time to Child component, So, it is an object which get passed and not the array.

console log of input parameter

Solution: remove the for loop from parent content:

answered Oct 11 '18 at 14:56

Sumit Vekariya

482
2
12

No, I have multiple json files to pass the data for each component respective – jinfy Oct 11 '18 at 15:01
Is there any possible to pass the multiple parameters in input decorator – jinfy Oct 11 '18 at 15:02
Can you share the data of all different types you are mentioning in here? – Sumit Vekariya Oct 11 '18 at 15:27
can you please suggest – jinfy Oct 11 '18 at 17:31
Yes it is possible to pass multiple parameters as Inout decorator, – Sumit Vekariya Oct 11 '18 at 17:49
any example for reference – jinfy Oct 11 '18 at 17:53
– Sumit Vekariya Oct 11 '18 at 18:01

Parent component to child component values is not passing properly in angular

2 Answers2