title: Cannot read property 'setRowData' of undefined / Issue with HTML template?
body: <p>Am maintaining an AG-GRID re-usable template with all necessary methods (clear filer/ CSV download/ Autofit..etc options) --- Base Template.
  I have another AG-Grid template , which uses "Base Template" (thru dependency injection) and  populate grid with a row of data <strong>based on searchString value</strong>. (Sample file below)</p>
  
  <pre><code>import { Component, OnInit, } from '@angular/core';
  import { GridOptions, GridApi, } from "ag-grid-community";
  import { ReportersgridComponent } from '../../commonpages/reportersgrid/reportersgrid.component'
  
  @Component({
      selector: 'app-reporters',
      templateUrl: './reporters.component.html',
      styleUrls: ['./reporters.component.scss']
  })
  export class ReportersComponent implements OnInit {
  
      private reporterGrid: GridOptions;
      constructor(public reportersGrid: ReportersgridComponent, ) {
          this.reporterGrid = &lt;GridOptions&gt;{};
          this.reporterGrid.enableSorting = true;
          this.reporterGrid.enableFilter = true;
          this.reporterGrid.enableColResize = true;
          this.reporterGrid.columnDefs = this.reportersGrid.createColumnDefs();
          this.reporterGrid.rowData = this.reportersGrid.createRowData();
      }
      ngOnInit() {
      }
      //Search Function 
      performSearch() {
          let searchString = "";
          this.populateFiteredReporter(searchString);
          // this.reporterGrid.api.setRowData(reporterGrid.rowData)
      }
      populateFiteredReporter(searchString) {
          this.reporterGrid.rowData = [
              { fullName: 'fName,mName,lName2', address: "address2", country: "country2", postcode: "postcode2", phone: "phone", email: "email", qualification: "MBBS", institution: "institution", department: "department" },
          ];
          var str = JSON.stringify(this.reporterGrid.rowData);
          console.log('data:' + str);
          this.reporterGrid.api.setRowData(this.reporterGrid.rowData);
  
          //this.reportersGrid.populateFiteredReporter(searchString);
      }
  }
  </code></pre>
  
  <p>In HTML of the above file,  I am using "Base Template" s <strong>SELECTOR AS HTML TAG.</strong> (</p>
  
  <pre><code>&lt;app-reportersgrid&gt;&lt;/app-reportersgrid&gt;
  </code></pre>
  
  <p>) to display the grid portion.</p>
  
  <p>Above gives error ->  <strong>Cannot read property 'setRowData' of undefined</strong>.</p>
  
  <p>Please note that if I replace Base Template's selector with base template's FULL HTML portion for ag-grid (which has (gridReady)="onGridReady($event)"), page works fine.</p>
  
  <p>Can I get help to stick back to my original idea of keeping base template intact? (Note that all base template functions like export to csv, autofit etc works fine - those are coded in the base template along with OnGridReadty().)</p>
  
  <p>Thanks in Advance..
  ASJ.</p>
  
  <h2>22/10/2019  /* Template of reporters.component.html*/</h2>
  
  <pre><code>&lt;div&gt;
    &lt;div class="col-md-12"&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-header text-uppercase  font-weight-bold"&gt;
          Search
        &lt;/div&gt;
        &lt;div class="card-body"&gt;
          &lt;div&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-sm-4"&gt;
                &lt;div class="form-group"&gt;
                  &lt;span&gt;Name &lt;i&gt;(First/Middle/Last)&lt;/i&gt;&lt;/span&gt;
                  &lt;input type="text" class="form-control" [(ngModel)]="reporterName"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;    
          &lt;/div&gt;
        &lt;/div&gt;   
        &lt;div class="card-footer"&gt;
          &lt;div class="row"&gt;        
            &lt;div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"&gt;
              &lt;button type="button" class="btn btn-normal btn-primary" (click)="performSearch()" style="width: 100px; "&gt;Search&lt;/button&gt;
  
              &lt;button type="button" class="btn btn-normal btn-light" style="width: 100px;"&gt;Reset&lt;/button&gt;
            &lt;/div&gt;
  
  
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;app-reportersgrid&gt;&lt;/app-reportersgrid&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Base template - HTML of the AG-GRID</strong></p>
  
  <pre><code> &lt;div class="centered-content"&gt;
  
    &lt;div&gt;
  
      &lt;ag-grid-angular #agGrid style="width: 100%; height: 358px;" class="ag-theme-balham"
        [gridOptions]="reporterGrid" [enableSorting]="true" enableFilter [sideBar]="sideBar"
        enableColResize [pagination]="true" [paginationPageSize]=10             
         rowDragManaged=true
        (gridReady)="onGridReady($event)"&gt;
        &lt;ag-grid-column headerName="Name" field="fullName"&gt;&lt;/ag-grid-column&gt;
        &lt;ag-grid-column headerName="Address" field="address" [width]="150"&gt;&lt;/ag-grid-column&gt;
        &lt;ag-grid-column headerName="Country" field="country"&gt;&lt;/ag-grid-column&gt;
        &lt;ag-grid-column headerName="Postcode" field="postCode"&gt;&lt;/ag-grid-column&gt;
        &lt;ag-grid-column headerName="Phone" field="phone"&gt;&lt;/ag-grid-column&gt;
        &lt;ag-grid-column headerName="Email" field="email"&gt;&lt;/ag-grid-column&gt;
        &lt;ag-grid-column headerName="Qualification" field="qualification"&gt;&lt;/ag-grid-column&gt;
        &lt;ag-grid-column headerName="Institution" field="institution"&gt;&lt;/ag-grid-column&gt;             
        &lt;ag-grid-column headerName="Department" field="department" [cellRenderer]="countryCellRenderer"&gt;
        &lt;/ag-grid-column&gt;
      &lt;/ag-grid-angular&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>/<em>ReportersGridcomponent.ts file</em>/</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  //import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  import {GridOptions, GridApi, Grid} from "ag-grid-community";
  
  @Component({
    selector: 'app-reportersgrid',
    templateUrl: './reportersgrid.component.html',
    styleUrls: ['./reportersgrid.component.scss']
  })
  export class ReportersgridComponent implements OnInit {
    private reporterGrid: GridOptions;
    private gridApi:GridApi;
    private gridColumnApi;
    filterName: string | null;
  
    constructor( ) {
      this.reporterGrid = &lt;GridOptions&gt;{};
      this.reporterGrid.enableSorting = true;
      this.reporterGrid.enableFilter = true;
      this.reporterGrid.enableColResize = true;
      this.reporterGrid.columnDefs = this.createColumnDefs();
      this.reporterGrid.rowData = this.createRowData(); 
       }
    ngOnInit() {
    }
    createColumnDefs() {
      this.reporterGrid.columnDefs = [
       {
        headerName: "Name",
        field: "fullName", 
        width:100,      
    },
    {
      headerName: "Address",
      field: "address",
  },
  
  {
      headerName: "Country",
      field: "country",
  
  },
  {
    headerName: "Postcode",
    field: "postCode",
  },
  {
      headerName: "Phone",
      field: "phone",
  },
  
  {
      headerName: "Email",
      field: "email",
  },
  {
    headerName: "Qualification",
    field: "qualification",
  },
  {
      headerName: "Institution",
      field: "institution",
  },
  {
      headerName: "Department",
      field: "department",
  }
  
    ];
  return this.reporterGrid.columnDefs
    }
    createRowData(){
      this.reporterGrid.rowData = [
        //    {fullName: 'fName,mName,lName',address:"address1",country: "country",postcode: "postcode",phone: "phone",email:"email",qualification:"MBBS",institution:"institution",department:"department"},  
      ];
    return this.reporterGrid.rowData;
    }
  
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
      this.autoSizeAll()
    }
    autoSizeAll() {
      var allColumnIds = [];
      this.gridColumnApi.getAllColumns().forEach(function(column) {
      allColumnIds.push(column.colId);
    });
      this.gridColumnApi.autoSizeColumns(allColumnIds);
  
  }
  
  onCSVExport() {
  
    this.reporterGrid.api.exportDataAsCsv();
   } 
   onSearchTextChange(newData: string) {
     this.reporterGrid.api.setQuickFilter(newData);
   }
   clearFilters() {
   if (this.gridApi.isQuickFilterPresent())
   {
     this.gridApi.setQuickFilter('');
     this.filterName="";
   }
   }
  
  //  populateFiteredReporter(searchString){
  
  //     this.reporterGrid.rowData = [
  //       {fullName: 'fName,mName,lName2',address:"address2",country: "country2",postcode: "postcode2",phone: "phone",email:"email",qualification:"MBBS",institution:"institution",department:"department"},  
  //   ];
  //   var str= JSON.stringify(this.reporterGrid.rowData);
  //   console.log('data:'+str);  
  //   this.reporterGrid.api.setRowData(this.reporterGrid.rowData);
  //   //return this.reporterGrid.rowData;
  //   }
   }
  </code></pre>