Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular …

…into rename-igxInput-class

ROADMAP.md

@@ -6,7 +6,7 @@
 1.1. Adding component views like App Host, Tabs, List
 1.2. Updating the default project look
 1.3. Move the project navigation inside an App Host
-2. Product Themening 
+2. Product Theming 
 3. Grid Multi-column Headers [issue](https://github.com/IgniteUI/igniteui-angular/issues/488)
 4. Collapsible Column Groups with state templating (collapsed state column can be templated)
 5. Column pinning

src/grid/grid.component.ts

@@ -1,5 +1,7 @@
+import { DOCUMENT } from "@angular/common";
 import {
     AfterContentInit,
+    AfterViewInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
@@ -8,8 +10,10 @@ import {
     ComponentRef,
     ContentChild,
     ContentChildren,
+    ElementRef,
     EventEmitter,
     HostBinding,
+    Inject,
     Input,
     OnInit,
     Output,
@@ -40,7 +44,7 @@ let NEXT_ID = 0;
     styleUrls: ["./grid.component.scss"],
     templateUrl: "./grid.component.html"
 })
-export class IgxGridComponent implements OnInit, AfterContentInit {
+export class IgxGridComponent implements OnInit, AfterContentInit, AfterViewInit {
 
     @Input()
     public data = [];
@@ -186,6 +190,8 @@ export class IgxGridComponent implements OnInit, AfterContentInit {
 
     constructor(
         private gridAPI: IgxGridAPIService,
+        private elementRef: ElementRef,
+        @Inject(DOCUMENT) private document,
         public cdr: ChangeDetectorRef,
         private resolver: ComponentFactoryResolver,
         private viewRef: ViewContainerRef) {
@@ -207,6 +213,19 @@ export class IgxGridComponent implements OnInit, AfterContentInit {
         this._columns = this.columnList.toArray();
     }
 
+    public ngAfterViewInit() {
+        setTimeout(() => {
+            const computed = this.document.defaultView.getComputedStyle(this.nativeElement);
+            this.width = computed.getPropertyValue("width");
+            this.height = computed.getPropertyValue("height");
+            this.markForCheck();
+        });
+    }
+
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+
     get columns(): IgxColumnComponent[] {
         return this._columns;
     }