title: How to get data event click in angular google chart-angular 2+
body: <p>I used the google charts in my angular project dashboard. </p>
  
  <p><a href="https://i.stack.imgur.com/Cfp2g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cfp2g.png" alt="enter image description here"></a></p>
  
  <p>By reading the document: <a href="https://github.com/FERNman/angular-google-charts" rel="nofollow noreferrer">https://github.com/FERNman/angular-google-charts</a> , I used the below code for getting the event(which should contain the elements of the chart which I selected)</p>
  
  <p>As per the document, the select event is emitted when an element in the chart gets selected.</p>
  
  <pre><code>&lt;google-chart (select)="onSelect($event)"&gt;&lt;/google-chart&gt;
  </code></pre>
  
  <p>I used the same in my code.</p>
  
  <p>Html:`          </p>
  
  <pre><code>      &lt;google-chart #chart [title]="Bartitle" [type]="Bartype" [data]="Bardata" [columnNames]="BarcolumnNames"
          [options]="Baroptions" [width]="Barwidth" [height]="Barheight" 
          (select)="onSelect($event)"&gt;
        &lt;/google-chart&gt;`
  </code></pre>
  
  <p>Component.Ts</p>
  
  <pre><code>this.Bartitle = 'Current and Target';
  this.Bartype = 'BarChart';
  this.Bardata = [
    ["2012", 900, 390],
    ["2013", 1000, 400],
    ["2014", 1170, 440],
    ["2015", 1250, 480],
    ["2016", 1530, 540]
  ];
  this.BarcolumnNames = ["Year", "Current", "Target"];
  this.Baroptions = {
    hAxis: {
      title: 'Maturity'
    },
    vAxis: {
      title: 'Month'
    },
  };
  this.Barwidth = 200;
  this.Barheight = 200;
  
  onSelect(event) {
     console.log(event);
  }
  </code></pre>
  
  <p>But I dont get the values which I selected..<a href="https://i.stack.imgur.com/HYfhe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HYfhe.png" alt="enter image description here"></a></p>
  
  <p>I need the values of maturity and the year... How i get that?? Did I made any changes??</p>