D3 Pie in Angular 2?

Question

How to create a d3 diagram in Angular 2 If I want to calculate EMI. I have already created an EMI computing application. Now I want to show the PIE diagram regarding calculations

This is emi.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms'
import * as D3 from 'd3';


@Component({
    selector: 'emi-app',
    templateUrl: 'app/emi/emi.component.html',
    styleUrls:['app/emi/emi.component.css']
})
export class EmiComponent  { 
    loanamount:number
    interestrate:number
    loantenure:number
    emi:number
    newemi:number


    emiForm = new FormGroup({
        loanamount: new FormControl(null, [Validators.required]),
        interestrate: new FormControl(null, [Validators.required]),
        loantenure: new FormControl(null, [Validators.required]),

    });

    calculateEmi() {

        if(this.loanamount && this.interestrate && this.loantenure) {
            let interestPerMonth = this.interestrate/12/100;
            let numerator = Math.pow((1+interestPerMonth), this.loantenure);
            let denominator = numerator - 1;
            this.emi = ((this.loanamount * interestPerMonth) * 
            numerator/denominator);
            var newemi = this.emi.toFixed(2) ;
            console.log(newemi);
          }
        var pie = new d3pie()


    }
}

This is emi.component.html

    <div class="container">
    <h1> EMI Calculator</h1>

  <form [formGroup]="emiForm" name="calc">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group currency">
                <!--<label>Loan Amount:</label><i>&#x20b9;</i>
                <input type= "number" class = "form-control" formControlName = 
    "loanamount" [(ngModel)]="loanamount">  
        </div>

        <div class="form-group ">
            <label>Intrest Rate:</label>
            <i>%</i><input type="number" class="form-control" formControlName="interestrate"  [(ngModel)]="interestrate">
        </div>

        <div class="form-group ">
            <label>Loan Tenure:</label>
            <input type="number" class="form-control" formControlName="loantenure"  [(ngModel)]="loantenure">
        </div>
        <button (click)="calculateEmi()" class="btn btn-primary">Submit</button>
     </div>
     <div class="col-md-8">
        <div id="pieChart"></div>
     </div>
     </div>
    </form>

    <hr/>
        <div class="row" *ngIf="emi">
            <div class= "col-md-4"> 
                <h5>EMI</h5>
            </div>
            <div class= "col-md-4"> 
                   <h5>Total Payable Interest</h5>      
            </div>
            <div class= "col-md-4"> 
                    <h5>Total Payment(Principal amount + Interest)</h5>     
            </div>
        </div>
        <div class="row" *ngIf="emi">
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{emi.toFixed(2)}} / Month</h5>
            </div>
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{(emi*loantenure-loanamount).toFixed(2)}}</h5>
            </div>
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{(emi*loantenure).toFixed(2)}}</h5>
            </div>  
        </div>

    </div>

Now I am new to Angular 2 and d3 in general. Therefore, I would be glad if someone were kind enough to help me here.

Answer 1

You must use Angular lifecycle hooks so that OnInit , you can call calculateEmi (). At this point, you will set all the necessary values. Then you create your D3 diagram using AfterContentInit .

https://angular.io/guide/lifecycle-hooks http://www.palador.com/2017/02/28/create-a-pie-chart-with-dynamic-data-using-d3-js-angular-2/