Google Charts with *ngIf in Angular

Question

I am building an Angular app where I am using google charts. Faced some issue which seems to be related to async

My HTML code is:

<i class='bx bx-line-chart chart-icon' (click)="changeGraph('line')"></i>
<i class='bx bx-pie-chart chart-icon' (click)="changeGraph('pie')"></i>
<i class='bx bx-bar-chart chart-icon' (click)="changeGraph('bar')"></i>

<ng-container *ngIf="lineChart">
    <div id="curve_chart"></div>
</ng-container>

<ng-container *ngIf="pieChart">
    <div id="piechart"></div>
</ng-container>

<ng-container *ngIf="barChart">
    <div id="columnchart_material"></div>
</ng-container>

In component.ts the changeGraph() method is:

changeGraph(chart: string) {

    this.pieChart = chart === 'pie';
    this.lineChart = chart === 'line';
    this.barChart = chart === 'bar';


    google.charts.load('current', {'packages':['corechart', 'bar']});
    google.charts.setOnLoadCallback(() => {
      if(this.pieChart) {
        drawPieChart();
      } else if (this.barChart) {
        drawBarChart();
      } else {
        drawLineChart();
      }
    });
    

    function drawPieChart () {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
      ]);

      var options = {};

      var chartElement = document.getElementById('piechart');
      if (chartElement !== null) {
        var chart = new google.visualization.PieChart(chartElement);
        chart.draw(data, options);
      }
    }


    function drawBarChart () {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
      ]);

      var options: google.visualization.ColumnChartOptions = {
        legend: { position: 'none' }
      };

      var chartElement = document.getElementById('columnchart_material');
      if (chartElement !== null) {
        var chart = new google.visualization.ColumnChart(chartElement);
        chart.draw(data, options);
      }
    }


    function drawLineChart () {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004',  1000,      400],
        ['2005',  1170,      460],
        ['2006',  660,       1120],
        ['2007',  1030,      540]
      ]);

      var options: google.visualization.LineChartOptions = {
        curveType: 'function'
      };

      var chartElement = document.getElementById('curve_chart');
      if (chartElement !== null) {
        var chart = new google.visualization.LineChart(chartElement);
        chart.draw(data, options);
      }
    }
}

The problem I am facing is that the chart is visible only when I click <i> twice!

How can I ensure that when I click <i></i> one single click, the changeChart() method should be called and chart should appear on HTML screen?