Ag-Grid is not showing with angular 2?

Question

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:

"ag-grid": "^7.1.0",
    "ag-grid-ng2": "^7.1.2",
    "ag-grid-enterprise": "^7.1.0"

CSS Added in Layout(Using angular 2 with .net core(MVC)):

<link href="~/lib/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" />
        <link href="~/lib/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" />

Added in @ngModule

 AgGridModule.withComponents([AboutComponent.AboutComponent ]),

About is the component where i am using ag-grid

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 = <GridOptions>{};

        this.createRowData();

        this.createColumnDefs();

        this.showGrid = true;

    }

    ngOnInit(): void {
        //this.pages = this.pageService.getAll().subscribe(pages => this.pages = pages.Content);
    }

    private createRowData() {

        const rowData: any[] = [];


        for (let i = 0; i < 10000; i++) {

            const countryData = [];

            rowData.push({
                name: "Zeshan Munir",

                skills: {
                    android: Math.random() < 0.4,

                    html5: Math.random() < 0.4,

                    mac: Math.random() < 0.4,

                    windows: Math.random() < 0.4,

                    css: Math.random() < 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" }
                ]

            }
        ];

    }

Here is the html:

<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" 
 >
   </ag-grid-ng2>

I inspect the page and here is it's screen shot

Here is the console error but this is not related to ag-grid

Now i don't know why grid is not showing. Thanks in advance.

Answer 1

After some hours, i came to know the actual problem. Every thing was perfect. The actual problem was ag-grid width. It was 0px by default. I just set it's width and it is working fine.