Angular Ag-Grid not displaying correctly

I'm trying to use Angular Ag-Grid in my Web Application.

I've followed these tutorials

1. 
   Angular Grid | Get Started with ag-Grid
   
   
2. 
   ag-Grid Angular Component
   

Problem / Issue I Follwed every thing exactly. Even data is being loaded in grid but View is not very appreciable. Here what I'm getting (not alignment, no coloring)

What I tried I search extensively over Google and Stack Overflow. Some Answers recommend that CSS is not loading Properly ( which is solid argument) but I double check my import statements on Component.css and Also tried adding .css reference in index.html. The .css files which I refer are exists and reference was also good.

What I Expect



Codes

appComponent.html

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>


appComponent.ts

import { Component } from '@angular/core';
import { Grid } from 'ag-grid/main';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {

title = 'Grid1';
columnDefs = [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" },
];

rowData = [
{ make: "Toyota", model: "m1", price: 35351 },
{ make: "Ford", model: "m2", price: 6546 },
{ make: "M3", model: "m3", price: 646 },
{ make: "M765", model: "m4", price: 56486 }
]
}


app.component.scss

@import "~ag-grid/dist/styles/ag-grid.css";
@import "~ag-grid/dist/styles/ag-theme-balham.css";


I Also tried other tutorial which says this app.component.scss

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

Continue reading...