title: Ag-Grid is not showing with angular 2?
body: <p>I am new to angular 2 and trying to configure ag-grid. There was some error on console regarding ag-grid. I have solved it. Now there is no error on the console except one but it is not related to ag-grid. But still grid is not showing.
  Here is the code: 
   In Package.json add:</p>
  
  <pre><code>"ag-grid": "^7.1.0",
      "ag-grid-ng2": "^7.1.2",
      "ag-grid-enterprise": "^7.1.0"
  </code></pre>
  
  <p>CSS Added in Layout(Using angular 2 with .net core(MVC)):</p>
  
  <pre><code>&lt;link href="~/lib/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" /&gt;
          &lt;link href="~/lib/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" /&gt;
  </code></pre>
  
  <p>Added in @ngModule</p>
  
  <pre><code> AgGridModule.withComponents([AboutComponent.AboutComponent ]),
  </code></pre>
  
  <p>About is the component where i am using ag-grid</p>
  
  <pre><code>Here is the about component:
  import { Component, OnInit } from "@angular/core";
  import { Routes, RouterModule } from "@angular/router";
  import PageService = require("../../services/page.service");
  import { AgGridModule } from "ag-grid-ng2/main";
  import { GridOptions } from "ag-grid/main";
  
  
  @Component({
      //no need for selector as it will be loaded via routing
      templateUrl: "/page/index"
  })
  export class PageComponent implements OnInit {
      private pages;
  
      private gridOptions: GridOptions;
      public showGrid: boolean;
      public rowData: any[];
      private columnDefs: any[];
      public rowCount: string;
  
  
      constructor(private pageService: PageService.PageService) {
          // we pass an empty gridOptions in, so we can grab the api out
  
         this.gridOptions = &lt;GridOptions&gt;{};
  
          this.createRowData();
  
          this.createColumnDefs();
  
          this.showGrid = true;
  
      }
  
      ngOnInit(): void {
          //this.pages = this.pageService.getAll().subscribe(pages =&gt; this.pages = pages.Content);
      }
  
      private createRowData() {
  
          const rowData: any[] = [];
  
  
          for (let i = 0; i &lt; 10000; i++) {
  
              const countryData = [];
  
              rowData.push({
                  name: "Zeshan Munir",
  
                  skills: {
                      android: Math.random() &lt; 0.4,
  
                      html5: Math.random() &lt; 0.4,
  
                      mac: Math.random() &lt; 0.4,
  
                      windows: Math.random() &lt; 0.4,
  
                      css: Math.random() &lt; 0.4
  
                  },
  
                  address: "Lahore",
  
                  years: Math.round(Math.random() * 100),
  
                  proficiency: Math.round(Math.random() * 100),
  
                  country: "Pakistan",
  
                  continent: "Asia",
  
                  language: "en-pk",
  
                  mobile: createRandomPhoneNumber(),
  
                  landline: createRandomPhoneNumber()
  
              });
  
          }
  
  
          this.rowData = rowData;
  
      }
  
  
      private createColumnDefs() {
  
          this.columnDefs = [
              {
                  headerName: "#",
                  width: 30,
                  checkboxSelection: true,
                  suppressSorting: true,
  
                  suppressMenu: true,
                  pinned: true
  
              },
              {
                  headerName: "Employee",
  
                  children: [
                      {
                          headerName: "Name",
                          field: "name",
  
                          width: 150,
                          pinned: true
  
                      },
                      {
                          headerName: "Country",
                          field: "country",
                          width: 150,
  
                          cellRenderer: countryCellRenderer,
                          pinned: true,
  
                          filterParams: { cellRenderer: countryCellRenderer, cellHeight: 20 }
  
                      },
                  ]
  
              },
              {
                  headerName: "IT Skills",
  
                  children: [
                      {
                          headerName: "Skills",
  
                          width: 125,
  
                          suppressSorting: true,
  
                          cellRenderer: skillsCellRenderer,
  
                          filter: ""
  
                      },
                      {
                          headerName: "Proficiency",
  
                          field: "proficiency",
  
                          width: 120,
  
                          cellRenderer: percentCellRenderer,
  
                          filter: ""
  
                      },
                  ]
  
              },
              {
                  headerName: "Contact",
  
                  children: [
                      { headerName: "Mobile", field: "mobile", width: 150, filter: "text" },
                      { headerName: "Land-line", field: "landline", width: 150, filter: "text" },
                      { headerName: "Address", field: "address", width: 500, filter: "text" }
                  ]
  
              }
          ];
  
      }
  </code></pre>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;ag-grid-ng2 #agGrid enable-sorting="true" enable-filter="true" row-height="22" row-selection="multiple" [columnDefs]="columnDefs" [showToolPanel]="showToolPanel" [rowData]="rowData"
   (cell-clicked)="onCellClicked($event)" (column-resized)="onColumnEvent($event)"  class="ag-fresh" 
   &gt;
     &lt;/ag-grid-ng2&gt;
  </code></pre>
  
  <p>I inspect the page and here is it's screen shot</p>
  
  <p><a href="https://i.stack.imgur.com/lqDq6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lqDq6.png" alt="enter image description here"></a></p>
  
  <p>Here is the console error but this is not related to ag-grid</p>
  
  <p><a href="https://i.stack.imgur.com/Pkzfr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Pkzfr.png" alt="enter image description here"></a></p>
  
  <p>Now i don't know why grid is not showing. Thanks in advance.</p>