Render Pi-Chart multiple times?

I am creating an Angular project and want to implement pi-charts. I have searched a lot but didn't found anything helpful for me. I have implemented this charts from angular2-google-chart. In my HTML I want to show multiple charts ( more than 10 ). I write HTML to show pi-charts for multiple times. But it is showing only once. Can anyone suggest me why this is happening?

profile.component.ts:

    import { Component, OnInit,Input }         from '@angular/core';
    import { Router,ActivatedRoute }                 from '@angular/router';
    import { GoogleChart}                             from'../../../../directives/angular2-google-chart.directive';

    @Component({
        selector: 'profile-component2',
        directives: [GoogleChart],
        templateUrl:`../app/modules/dashboard/dashComponents/profileComponents/profile.component.html`,
    })

  export class ProfileComponent2 {
      public pie_ChartData = [
                         ['Task', 'Hours per Day'],
                         ['Present',     20],
                         ['Earned Leaves',     7],
                         ['Unplanned Leaves', 3],
        ];

     public pie_ChartData1 = [
                         ['Task', 'Hours per Day'],
                         ['Present',     10],
                         ['Earned Leaves',     17],
                         ['Unplanned Leaves', 3],
        ];

    public pie_ChartData2 = [
                         ['Task', 'Hours per Day'],
                         ['Present',     10],
                         ['Earned Leaves',     17],
                         ['Unplanned Leaves', 3],
        ];

    public pie_ChartOptions  = {
                 title: 'Employee\'s Details',
                 width: 500,
                 height: 400
               };  
    public pie_ChartOptions1  = {
                 title: 'Employee\'s Details',
                 width: 500,
                 height: 400
               };
    public pie_ChartOptions2  = {
                 title: 'Employee\'s Details',
                 width: 500,
                 height: 400
               };
        }

profile.component.html:

<h1>Profile</h1>
<div id="pie_chart" 
    [chartData]="pie_ChartData"  
    [chartOptions] = "pie_ChartOptions" 
    chartType="PieChart" 
    GoogleChart>    </div> 

<div id="pie_chart1" 
    [chartData]="pie_ChartData1"  
    [chartOptions] = "pie_ChartOptions2" 
    chartType="PieChart" 
    GoogleChart>    </div> 

<div id="pie_chart2" 
    [chartData]="pie_ChartData2"  
    [chartOptions] = "pie_ChartOptions2" 
    chartType="PieChart" 
    GoogleChart>    </div>

See the snapshot what I got for above code:

Use this code :

    import { Component, OnInit,Input }               from '@angular/core';
    import { Router,ActivatedRoute }                 from '@angular/router';
    import { GoogleChart}                             from'../../../../directives/angular2-google-chart.directive';

@Component({
selector: 'profile-component2',   
         templateUrl:`../app/modules/dashboard/dashComponents/profileComponents/profile.component.html`,
    })

    export class ProfileComponent2 implements OnInit {
    ngOnInit() {
          console.log("profile component2 initialized");
      }
           public pie_ChartData = [
                     ['Task', 'Hours per Day'],
                     ['Present',     22],
                     ['Earned Leaves',     5],
                     ['Unplanned Leaves',3],
    ];
          public pie_ChartData1 = [
                     ['Task', 'Hours per Day'],
                     ['Present',     24],
                     ['Earned Leaves',     5],
                     ['Unplanned Leaves', 1],
            ];
           public pie_ChartOptions  = {
             title: 'Vikas Patel',
             width: 500,
             height: 400
           };
          public pie_ChartOptions1  = {
             title: 'Shubham Verma',
             width: 500,
             height: 400
           };  
    }

your html should be like this:

<div class="col-md-6" id="pie_chart" 
    [chartData]="pie_ChartData"  
    [chartOptions] = "pie_ChartOptions" 
    chartType="PieChart" 
    GoogleChart>    </div> 

<div class="col-md-6" id="pie_chart1" 
    [chartData]="pie_ChartData1"  
    [chartOptions] = "pie_ChartOptions1" 
    chartType="PieChart" 
    GoogleChart>    </div>