Angular 4 :Passing an array element from parent to child and display value in the child html

Question

I am developing an angular 4 application and need to pass an array NpvResults from parent component to child component. I would then need to access the array in the child component and display the value in the client of the child. As seen in the code snippet below , I would need to pass this.npvResults to the child component. How do I pass the value from parent to child and how would i bind that value on the client.

NpvResults (Array)

NpvResult = new Models.NpvResults()
                {
                    CommInsPremiumPaid = trigger2Output.NpvResults.CommIns.Where(x => x.layerId == 0).Sum(x=> x.premPaid),
                    CommInsTaxDeduction = trigger2Output.NpvResults.CommIns.Where(x => x.layerId == 0).Sum(x => x.taxDeduction),
                    CommInsNetCost = trigger2Output.NpvResults.NetCost.Where(x => x.layerId == 0).Sum(x => x.commInsNetCost),
                    SelfInsDiscountedTaxDeduction = trigger2Output.NpvResults.SelfIns.Where(x => x.layerId == 0).Sum(x => x.discountedTaxDeduction),
                    SelfInsDiscountedLossesPaid = trigger2Output.NpvResults.SelfIns.Where(x => x.layerId == 0).Sum(x => x.discountedLossesPaid),
                    SelfInsNetCost = trigger2Output.NpvResults.NetCost.Where(x => x.layerId == 0).Sum(x => x.selfInsNetCost),
                    CaptiveInsPremiumPaid = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.premPaid),
                    CaptiveInsTaxDeduction = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.discountedTaxDeduction),
                    CaptiveInsLoanToParent = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.discountedLoanToParent),
                    CaptiveInsCapitalContribution = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.discountedCapContriDistr),
                    CaptiveDividentDistribution = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.discountedDividendDistr),
                    CaptiveInsTerminalValue = trigger2Output.NpvResults.CaptiveIns.Where(x => x.layerId == 0).Sum(x => x.discountedTerminalVal),
                    CaptiveInsNetCost = trigger2Output.NpvResults.NetCost.Where(x => x.layerId == 0).Sum(x => x.captiveInsNetCost)

                }

ParentComponent

import { Component, OnInit } from '@angular/core';
import { RunService  } from '@wtw/platform/services';
import { Base } from '@wtw/toolkit';
import * as BackendDto from '../../../api/dtos';
import * as BackendProxy from '../../../api/proxies';


@Component({
  selector: 'app-results',
  templateUrl: './results.component.html'
})
export class ResultsComponent extends  Base.ReactiveComponent implements OnInit {
 run: BackendDto.CaptivesRun;
 npvResults : BackendDto.NpvResults;


  constructor(
    private _runService: RunService,

  ) {
    super();
  }

  ngOnInit() {
    this._subscriptions = [this._runService.activeRun.subscribe(r => {
    this.run = r.data;

       this.npvResults = this.run.strategies[0].results.npvResult;

      if (this.run.strategies) {
        if (!this.run.strategies[0].results) {
      // TODO: push this down to the strategy container and ensure params are set for the strategy id
           this._runService.executeTrigger(r.runId, r.data, {number: 2, param: ''}, r.currencyInfo).uiSignal('trigger 2').subscribe( x => this.run = x.data);
        }
      }
    })];

  }

}

Child component

import { Component, OnInit ,Input} from '@angular/core';
import { NpvResults } from '../../../../api/dtos';
import { BoxPlotChartComponent } from "../../../../shared/HighCharts/box-plot-chart/box-plot-chart.component";


@Component({
  selector: 'app-net-present-value-analysis',
  templateUrl: './net-present-value-analysis.component.html',
})
export class NetPresentValueAnalysisComponent implements OnInit {

  isExpanded = false;
  showTable = true;
  @Input() NpvResults: NpvResults[];

  constructor() { }



  ngOnInit() {

  }

ChildComponentUi

<div class="tb-row d-flex flex-row">
    <div class="tb-cell col-md-7 col-sm-6 col-6">Premium Paid</div>
    <div class="tb-cell col-sm-6 col-md-5 col-6">-142,927</div>
</div> 
 <div class="tb-row d-flex flex-row">
    <div class="tb-cell col-md-7 col-sm-6 col-6">Tax Deduction</div>
     <div class="tb-cell col-sm-6 col-md-5 col-6">57,171</div>
 </div>
  <div class="tb-row d-flex flex-row">
      <div class="tb-cell col-md-7 col-sm-6 col-6">Loan to Parent</div>
       <div class="tb-cell col-sm-6 col-md-5 col-6">0</div>
  </div> 
  <div class="tb-row d-flex flex-row"><div class="tb-cell col-md-7 col-sm-6 col-6">Capital Contribution/Distribution</div>
   <div class="tb-cell col-sm-6 col-md-5 col-6">-2500</div>
  </div>

Answer 1

In the parent.component.html you can bind it with property binding like this: <app-net-present-value-analysis [npvResults]="npvResults"></app-net-present-value-analysis>

Now you can access it in the like component with the @Input decorator like so: @Input() npvResults: NpvResults[];

In the child component.html you can use it in an ngFor to loop through the npvResults array like:

<div *ngFor="let result of npvResults">
  {{result.propertyName}}
</div>

Please refer to this guide to learn more about component interaction:https://angular.io/guide/component-interaction

Answer 2

In the parent component's template (that you aren't showing above), you would bind the child component's input property to the data you want to pass to it. So something like this:

<app-net-present-value-analysis [NpvResults] = npvResults>
</app-net-present-value-analysis>

I have a blog post with diagrams here: https://blogs.msmvps.com/deborahk/passing-data-to-and-raising-an-event-from-a-nested-component/