Passing data from parent component to child component in angular

Question

In here i want to put this.formattedBookingPrice, this.formattedCheckingPrice values in to value array and pass them to child component not the static values.But since it's coming inside subscribe method i couldn't access them.Can i get a solution for this?

This is my parent component.

export class DashboardComponent implements OnInit{
  lineChart = ['line_chart1', 'line_chart2', 'line_chart3', 'line_chart4', 'line_chart5'];
  value = [ this.formattedBookingPrice,  this.formattedCheckingPrice, '09.9M'];
  names = [  'Bookings', 'Checkins', 'Modifications', 'Revenue' ];
  numberUtil = new NumberUtil();
  bookingInfo = [];
  checkingInfo = [];

   ngOnInit() {
    this.getBookingInfo();
    this.getCheckingInfo();
  }

   getBookingInfo() {

      this.getTxnInfo('BOOKING').subscribe(
        bookings => {
          this.bookingInfo = bookings.responseObj.txnValues;
           this.bookingTtcSum = checkings.responseObj.ttcSum;
          this.formattedBookingPrice = numberUtil.formatPriceDefault(this.bookingTtcSum, ' M ').substring(2);
          console.log(this.bookingInfo);
      });
  }

  getCheckingInfo() {

  this.getTxnInfo('CHECKIN').subscribe(
    checkings => {
      this.checkingInfo = checkings.responseObj.txnValues;
      this.checkingTtcSum = checkings.responseObj.ttcSum;
        this.formattedCheckingPrice = this.numberUtil.formatPriceDefault(this.checkingTtcSum, ' M ').substring(2);
    });
  }

}

This is html.

<app-chips  [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [bookingInfo] = "bookingInfo"></app-chips>
<app-chips  [lineChart]="lineChart[1]" [value] = "value[1]" [name] = "names[1]" [checkingInfo] = "checkingInfo"></app-chips>

This is my child component.

export class ChipsComponent implements OnInit, OnChanges {
@Input('lineChart') lineChart: string;
  @Input('value') value: string;
  @Input('name') name: string;
  @Input() bookingInfo = [];
  @Input()  checkingInfo = [];

}

This is child component html.

<div class="l-content-wrapper c-summary-chip oh" >
  <div class="c-summary-chip__value">{{value}}</div>
  <div class="c-summary-chip__txt">{{name}}</div>
  <div id= "{{lineChart}}" class="c-summary-chip__graph ">
  </div>
</div>

Answer 1

re-assign the value array in subscribe and implement changeDetectionStrategy (call this.ref.detectChanges() after assignment) now check in ngOnChanges() method of child component

check this following example

https://www.digitalocean.com/community/tutorials/angular-change-detection-strategy

it explains your requirement with details and code examples

Answer 2

You can try to add into value[ ] in the subscribe() . Like shown below.

   getBookingInfo() {

      this.getTxnInfo('BOOKING').subscribe(
        bookings => {
          this.bookingInfo = bookings.responseObj.txnValues;
           this.bookingTtcSum = checkings.responseObj.ttcSum;
          this.formattedBookingPrice = numberUtil.formatPriceDefault(this.bookingTtcSum, ' M ').substring(2);
          console.log(this.bookingInfo);
          this.value.push(formattedBookingPrice);
      });
  }



  getCheckingInfo() {

  this.getTxnInfo('CHECKIN').subscribe(
    checkings => {
      this.checkingInfo = checkings.responseObj.txnValues;
      this.checkingTtcSum = checkings.responseObj.ttcSum;
        this.formattedCheckingPrice = this.numberUtil.formatPriceDefault(this.checkingTtcSum, ' M ').substring(2);
    });

     this.value.push(this.formattedCheckingPrice);
  }