diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts
index 89deea2112d..bbf33e33a45 100644
--- a/projects/igniteui-angular/src/lib/chips/chip.component.ts
+++ b/projects/igniteui-angular/src/lib/chips/chip.component.ts
@@ -9,9 +9,11 @@
     Output,
     ViewChild,
     Renderer2,
-    TemplateRef
+    TemplateRef,
+    Inject,
+    Optional
 } from '@angular/core';
-import { DisplayDensity } from '../core/displayDensity';
+import { DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
 import {
     IgxDragDirective,
     IDragBaseEventArgs,
@@ -50,7 +52,7 @@ let CHIP_ID = 0;
     selector: 'igx-chip',
     templateUrl: 'chip.component.html'
 })
-export class IgxChipComponent {
+export class IgxChipComponent extends DisplayDensityBase {
 
     /**
      * An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
@@ -163,43 +165,6 @@ export class IgxChipComponent {
         return this._selected;
     }
 
-    /**
-     * Returns the `IgxChipComponent` theme.
-     * ```typescript
-     * @ViewChild('myChip')
-     * public chip: IgxChipComponent;
-     *     ngAfterViewInit(){
-     *     let chipTheme = this.chip.displayDensity;
-     * }
-     * ```
-     */
-    @Input()
-    public get displayDensity(): DisplayDensity | string {
-        return this._displayDensity;
-    }
-
-    /**
-     * An @Input property that sets the `IgxChipComponent` theme.
-     * Available options are `compact`, `cosy`, `comfortable`.
-     * The default theme is `comfortable`.
-     * ```html
-     * <igx-chip #myChip [id]="'igx-chip-1'" [displayDensity]="'compact'"></igx-chip>
-     * ```
-     */
-    public set displayDensity(val: DisplayDensity | string) {
-        switch (val) {
-            case 'compact':
-                this._displayDensity = DisplayDensity.compact;
-                break;
-            case 'cosy':
-                this._displayDensity = DisplayDensity.cosy;
-                break;
-            case 'comfortable':
-            default:
-                this._displayDensity = DisplayDensity.comfortable;
-        }
-    }
-
     /**
      * An @Input property that sets the `IgxChipComponent` background color.
      * The `color` property supports string, rgb, hex.
@@ -340,15 +305,12 @@ export class IgxChipComponent {
     @HostBinding('attr.class')
     get hostClass(): string {
         const classes = [];
-        switch (this._displayDensity) {
-            case DisplayDensity.cosy:
-                classes.push('igx-chip--cosy');
-                break;
-            case DisplayDensity.compact:
-                classes.push('igx-chip--compact');
-                break;
-            default:
-                classes.push('igx-chip');
+        if (this.isCosy()) {
+            classes.push('igx-chip--cosy');
+        } else if (this.isCompact()) {
+            classes.push('igx-chip--compact');
+        } else {
+            classes.push('igx-chip');
         }
         classes.push(this.disabled ? 'igx-chip--disabled' : '');
         // The custom classes should be at the end.
@@ -398,26 +360,27 @@ export class IgxChipComponent {
      * @hidden
      */
     public get ghostClass(): string {
-        switch (this._displayDensity) {
-            case DisplayDensity.cosy:
-                return 'igx-chip__ghost--cosy';
-            case DisplayDensity.compact:
-                return 'igx-chip__ghost--compact';
-            default:
-                return 'igx-chip__ghost';
-        }
+       if (this.isCosy()) {
+            return 'igx-chip__ghost--cosy';
+       } else if (this.isCompact()) {
+            return 'igx-chip__ghost--compact';
+       } else {
+            return 'igx-chip__ghost';
+       }
     }
 
     public get chipTabindex() {
         return !this.disabled ? 0 : '';
     }
 
-    protected _displayDensity = DisplayDensity.comfortable;
     protected _selected = false;
     protected _selectedItemClass = 'igx-chip__item--selected';
     protected _movedWhileRemoving = false;
 
-    constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2) { }
+    constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+            super(_displayDensityOptions);
+        }
 
     /**
      * @hidden
diff --git a/projects/igniteui-angular/src/lib/chips/chip.spec.ts b/projects/igniteui-angular/src/lib/chips/chip.spec.ts
index ada9f11a7e1..20001858f14 100644
--- a/projects/igniteui-angular/src/lib/chips/chip.spec.ts
+++ b/projects/igniteui-angular/src/lib/chips/chip.spec.ts
@@ -227,14 +227,15 @@ describe('IgxChip', () => {
         expect(firstChipSuffixText).toEqual('suf');
     });
 
-    it('should make chip comfortable when density is not set', () => {
+   it('should make chip comfortable when density is not set', () => {
         const fix = TestBed.createComponent(TestChipComponent);
         fix.detectChanges();
 
         const components = fix.debugElement.queryAll(By.directive(IgxChipComponent));
         const firstComponent = components[0];
 
-        expect(firstComponent.componentInstance.displayDensity).toEqual(DisplayDensity.comfortable);
+        const isFirstChipComfortable = firstComponent.componentInstance.isComfortable();
+        expect(isFirstChipComfortable).toEqual(true);
 
         // Assert default css class is applied
         const comfortableComponents = fix.debugElement.queryAll(By.css('.igx-chip'));
diff --git a/projects/igniteui-angular/src/lib/core/displayDensity.ts b/projects/igniteui-angular/src/lib/core/displayDensity.ts
index b7d5613bfc8..168fa6f07bd 100644
--- a/projects/igniteui-angular/src/lib/core/displayDensity.ts
+++ b/projects/igniteui-angular/src/lib/core/displayDensity.ts
@@ -1,4 +1,5 @@
-import { InjectionToken, Input } from '@angular/core';
+import { InjectionToken, Input, Output, EventEmitter, DoCheck } from '@angular/core';
+
 
 /**
  * Defines the posible values of the components' display density.
@@ -12,20 +13,25 @@ export const enum DisplayDensity {
 /**
  * Describes the object used to configure the DisplayDensity in Angular DI.
  */
-export interface IDisplayDensity {
+export interface IDisplayDensityOptions {
     displayDensity: DisplayDensity;
 }
 
+export interface IDensityChangedEventArgs {
+    oldDensity: DisplayDensity;
+    newDensity: DisplayDensity;
+}
+
 /**
  * Defines the DisplayDensity DI token.
  */
-export const DisplayDensityToken = new InjectionToken<IDisplayDensity>('DisplayDensity');
+export const DisplayDensityToken = new InjectionToken<IDisplayDensityOptions>('DisplayDensity');
 
 /**
  * Base class containing all logic required for implementing DisplayDensity.
  */
-export class DisplayDensityBase {
-    protected _displayDensity: DisplayDensity | string;
+export class DisplayDensityBase implements DoCheck {
+    protected _displayDensity: DisplayDensity;
 
     /**
      * Returns the theme of the component.
@@ -44,6 +50,7 @@ export class DisplayDensityBase {
      * Sets the theme of the component.
      */
     public set displayDensity(val: DisplayDensity | string) {
+        const currentDisplayDensity = this._displayDensity;
         switch (val) {
             case 'compact':
                 this._displayDensity = DisplayDensity.compact;
@@ -52,15 +59,25 @@ export class DisplayDensityBase {
                 this._displayDensity = DisplayDensity.cosy;
                 break;
             case 'comfortable':
-            default:
                 this._displayDensity = DisplayDensity.comfortable;
         }
+        if (currentDisplayDensity !== this._displayDensity) {
+            const densityChangedArgs: IDensityChangedEventArgs = {
+                oldDensity: currentDisplayDensity,
+                newDensity: this._displayDensity
+            };
+            this.onDensityChanged.emit(densityChangedArgs);
+        }
     }
 
+    @Output()
+    public onDensityChanged = new EventEmitter<IDensityChangedEventArgs>();
+    protected oldDisplayDensityOptions: IDisplayDensityOptions = { displayDensity: DisplayDensity.comfortable };
+
     /**
      *@hidden
      */
-    protected isCosy(): boolean {
+    public isCosy(): boolean {
         return this._displayDensity === DisplayDensity.cosy ||
             (!this._displayDensity && this.displayDensityOptions && this.displayDensityOptions.displayDensity === DisplayDensity.cosy);
     }
@@ -68,7 +85,7 @@ export class DisplayDensityBase {
     /**
      *@hidden
      */
-    protected isComfortable(): boolean {
+    public isComfortable(): boolean {
         return this._displayDensity === DisplayDensity.comfortable ||
             (!this._displayDensity && (!this.displayDensityOptions ||
              this.displayDensityOptions.displayDensity === DisplayDensity.comfortable));
@@ -77,10 +94,23 @@ export class DisplayDensityBase {
     /**
      *@hidden
      */
-    protected isCompact(): boolean {
+    public isCompact(): boolean {
         return this._displayDensity === DisplayDensity.compact ||
             (!this._displayDensity && this.displayDensityOptions && this.displayDensityOptions.displayDensity === DisplayDensity.compact);
     }
+    constructor(protected displayDensityOptions: IDisplayDensityOptions) {
+        Object.assign(this.oldDisplayDensityOptions, displayDensityOptions);
+    }
 
-    constructor(protected displayDensityOptions: IDisplayDensity) {}
+    public ngDoCheck() {
+        if (this.oldDisplayDensityOptions && this.displayDensityOptions && !this._displayDensity &&
+            this.oldDisplayDensityOptions.displayDensity !== this.displayDensityOptions.displayDensity) {
+            const densityChangedArgs: IDensityChangedEventArgs = {
+                oldDensity: this.oldDisplayDensityOptions.displayDensity,
+                newDensity: this.displayDensityOptions.displayDensity
+            };
+            this.onDensityChanged.emit(densityChangedArgs);
+            this.oldDisplayDensityOptions = Object.assign(this.oldDisplayDensityOptions, this.displayDensityOptions);
+        }
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
index 799796c4406..3f3407d4eb0 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -461,7 +461,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
         if (this.grid.rowEditable) {
             const rowCurrentState = this.grid.transactions.getAggregatedValue(this.row.rowID, false);
             if (rowCurrentState) {
-                return rowCurrentState && rowCurrentState[this.column.field];
+                return rowCurrentState[this.column.field] !== undefined && rowCurrentState[this.column.field] !== null;
             }
         } else {
             const rowTransaction: State = this.grid.transactions.getState(this.row.rowID);
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
index 2fe58cf1443..cad6400de73 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -27,7 +27,8 @@ import {
     ViewChildren,
     AfterViewChecked,
     ViewContainerRef,
-    InjectionToken
+    InjectionToken,
+    Optional
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil, first } from 'rxjs/operators';
@@ -65,7 +66,7 @@ import {
 } from './grid.rowEdit.directive';
 import { IgxGridNavigationService } from './grid-navigation.service';
 import { DeprecateProperty } from '../core/deprecateDecorators';
-import { DisplayDensity } from '../core/displayDensity';
+import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
 import { IgxGridRowComponent } from './grid';
 import { IgxFilteringService } from './filtering/grid-filtering.service';
 import { IgxGridFilteringCellComponent } from './filtering/grid-filtering-cell.component';
@@ -153,7 +154,7 @@ export interface IFocusChangeEventArgs {
     cancel: boolean;
 }
 
-export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterContentInit, AfterViewInit {
+export abstract class IgxGridBaseComponent extends DisplayDensityBase implements OnInit, OnDestroy, AfterContentInit, AfterViewInit {
 
     /**
      * An @Input property that lets you fill the `IgxGridComponent` with an array of data.
@@ -388,43 +389,6 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo
     @Input()
     public paginationTemplate: TemplateRef<any>;
 
-    /**
-     * Return the display density currently applied to the grid.
-     * The default value is `comfortable`.
-     * Available options are `comfortable`, `cosy`, `compact`.
-     * ```typescript
-     * let gridTheme = this.grid.displayDensity;
-     * ```
-	 * @memberof IgxGridBaseComponent
-     */
-    @Input()
-    public get displayDensity(): DisplayDensity | string {
-        return this._displayDensity;
-    }
-
-    /**
-     * Sets the display density currently applied to the grid.
-     * ```html
-     * <igx-grid #grid [data]="localData" [displayDensity]="'compact'" [autoGenerate]="true"></igx-grid>
-     * ```
-	 * @memberof IgxGridBaseComponent
-     */
-    public set displayDensity(val: DisplayDensity | string) {
-        switch (val) {
-            case 'compact':
-                this._displayDensity = DisplayDensity.compact;
-                break;
-            case 'cosy':
-                this._displayDensity = DisplayDensity.cosy;
-                break;
-            case 'comfortable':
-            default:
-                this._displayDensity = DisplayDensity.comfortable;
-        }
-
-        this.onDensityChanged.emit();
-    }
-
     /**
      * Returns whether the column hiding UI for the `IgxGridComponent` is enabled.
      * By default it is disabled (false).
@@ -1189,12 +1153,6 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo
     @Output()
     public onFocusChange = new EventEmitter<IFocusChangeEventArgs>();
 
-    /**
-     * @hidden
-     */
-    @Output()
-    protected onDensityChanged = new EventEmitter<any>();
-
     /**
      * @hidden
      */
@@ -1448,26 +1406,22 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo
      */
     @HostBinding('attr.class')
     get hostClass(): string {
-        switch (this._displayDensity) {
-            case DisplayDensity.cosy:
+        if (this.isCosy()) {
                 return 'igx-grid--cosy';
-            case DisplayDensity.compact:
+        } else if (this.isCompact()) {
                 return 'igx-grid--compact';
-            default:
+        } else {
                 return 'igx-grid';
         }
     }
 
     get bannerClass(): string {
         let bannerClass = '';
-        switch (this._displayDensity) {
-            case DisplayDensity.cosy:
+        if (this.isCosy()) {
                 bannerClass = 'igx-banner--cosy';
-                break;
-            case DisplayDensity.compact:
+        } else if (this.isCompact()) {
                 bannerClass = 'igx-banner--compact';
-                break;
-            default:
+        } else {
                 bannerClass = 'igx-banner';
         }
         bannerClass += this.rowEditPositioningStrategy.isTop ? ' igx-banner__border-top' : ' igx-banner__border-bottom';
@@ -2032,7 +1986,6 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo
     private _height = '100%';
     private _width = '100%';
     private _rowHeight;
-    private _displayDensity = DisplayDensity.comfortable;
     private _ngAfterViewInitPaassed = false;
     private _horizontalForOfs;
 
@@ -2108,10 +2061,12 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo
         protected differs: IterableDiffers,
         private viewRef: ViewContainerRef,
         private navigation: IgxGridNavigationService,
-        public filteringService: IgxFilteringService) {
-        this.resizeHandler = () => {
-            this.calculateGridSizes();
-            this.zone.run(() => this.markForCheck());
+        public filteringService: IgxFilteringService,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+            super(_displayDensityOptions);
+            this.resizeHandler = () => {
+                this.calculateGridSizes();
+                this.zone.run(() => this.markForCheck());
         };
     }
 
@@ -2326,13 +2281,11 @@ export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterCo
 	 * @memberof IgxGridBaseComponent
      */
     get defaultRowHeight(): number {
-        switch (this._displayDensity) {
-            case DisplayDensity.compact:
+        if (this.isCosy()) {
+            return 40;
+        } else if (this.isCompact()) {
                 return 32;
-            case DisplayDensity.cosy:
-                return 40;
-            case DisplayDensity.comfortable:
-            default:
+        } else {
                 return 50;
         }
     }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts b/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts
index a080c29b94e..00c94d2aa4c 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts
@@ -2,7 +2,6 @@ import {
     ChangeDetectionStrategy, ChangeDetectorRef,
     Component, DoCheck, HostBinding, Input
 } from '@angular/core';
-import { DisplayDensity } from '../core/displayDensity';
 import { DataType } from '../data-operations/data-util';
 import { GridBaseAPIService } from './api.service';
 import { IgxColumnComponent } from './column.component';
@@ -59,17 +58,17 @@ export class IgxGridSummaryComponent implements DoCheck {
 
     @HostBinding('class.igx-grid-summary--compact')
     get compactCSS() {
-        return this.displayDensity === DisplayDensity.compact;
+        return this.gridAPI.get(this.gridID).isCompact();
     }
 
     @HostBinding('class.igx-grid-summary--cosy')
     get cosyCSS() {
-        return this.displayDensity === DisplayDensity.cosy;
+        return this.gridAPI.get(this.gridID).isCosy();
     }
 
     @HostBinding('class.igx-grid-summary')
     get defaultCSS() {
-        return this.displayDensity === DisplayDensity.comfortable;
+        return this.gridAPI.get(this.gridID).isComfortable();
     }
 
     get dataType(): DataType {
@@ -77,12 +76,10 @@ export class IgxGridSummaryComponent implements DoCheck {
     }
     public summaryItemHeight;
     public itemClass = 'igx-grid-summary__item';
-    private displayDensity: DisplayDensity | string;
 
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent>, public cdr: ChangeDetectorRef) { }
 
     ngDoCheck() {
-        this.displayDensity = this.gridAPI.get(this.gridID).displayDensity;
         this.summaryItemHeight = this.gridAPI.get(this.gridID).defaultRowHeight;
         this.cdr.detectChanges();
     }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts
index 9fa146d91b8..db8561bfc89 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts
@@ -4,10 +4,11 @@ import {
     HostBinding,
     Input,
     Optional,
-    ViewChild
+    ViewChild,
+    Inject
 } from '@angular/core';
 
-import { DisplayDensity } from '../core/displayDensity';
+import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
 import {
     CsvFileTypes,
     IgxBaseExporter,
@@ -30,7 +31,7 @@ import { ConnectedPositioningStrategy } from '../services/overlay/position';
     selector: 'igx-grid-toolbar',
     templateUrl: './grid-toolbar.component.html'
 })
-export class IgxGridToolbarComponent {
+export class IgxGridToolbarComponent extends DisplayDensityBase {
 
     /**
      * @hidden
@@ -196,41 +197,6 @@ export class IgxGridToolbarComponent {
         return this.grid.pinnedColumns.length;
     }
 
-    private _displayDensity: DisplayDensity | string;
-
-    /**
-     * Returns the theme of the `IgxGridToolbarComponent`.
-     * The default theme is `comfortable`.
-     * Available options are `comfortable`, `cosy`, `compact`.
-     * ```typescript
-     * let toolbarTheme = this.grid.toolbar.displayDensity;
-     * ```
-     */
-    @Input()
-    public get displayDensity(): DisplayDensity | string {
-        return this._displayDensity;
-    }
-
-    /**
-     * Sets the theme of the `IgxGridToolbarComponent`.
-     * ```html
-     * <igx-grid #grid [data]="localData" [displayDensity]="'compact'" [autoGenerate]="true"></igx-grid>
-     * ```
-     */
-    public set displayDensity(val: DisplayDensity | string) {
-        switch (val) {
-            case 'compact':
-                this._displayDensity = DisplayDensity.compact;
-                break;
-            case 'cosy':
-                this._displayDensity = DisplayDensity.cosy;
-                break;
-            case 'comfortable':
-            default:
-                this._displayDensity = DisplayDensity.comfortable;
-        }
-    }
-
     /**
      * Returns the theme of the `IgxGridToolbarComponent`.
      * ```typescript
@@ -240,21 +206,21 @@ export class IgxGridToolbarComponent {
 
     @HostBinding('attr.class')
     get hostClass(): string {
-        switch (this._displayDensity) {
-            case DisplayDensity.compact:
-                return 'igx-grid-toolbar--compact';
-            case DisplayDensity.cosy:
-                return 'igx-grid-toolbar--cosy';
-            case DisplayDensity.comfortable:
-            default:
-                return 'igx-grid-toolbar';
+        if (this.isCosy()) {
+            return 'igx-grid-toolbar--cosy';
+        } else if (this.isCompact()) {
+            return 'igx-grid-toolbar--compact';
+        } else {
+            return 'igx-grid-toolbar';
         }
     }
 
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent>,
         public cdr: ChangeDetectorRef,
         @Optional() public excelExporter: IgxExcelExporterService,
-        @Optional() public csvExporter: IgxCsvExporterService) {
+        @Optional() public csvExporter: IgxCsvExporterService,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+            super(_displayDensityOptions);
     }
 
     private _positionSettings: PositionSettings = {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts
index c6aa2a1c290..17f6f04a376 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts
@@ -420,7 +420,7 @@ describe('IgxGrid - Grid Toolbar', () => {
         fixture.detectChanges();
 
         const toolbar = getToolbar().nativeElement;
-        expect(grid.toolbar.displayDensity).toBe(DisplayDensity.comfortable);
+        expect(grid.toolbar.isComfortable()).toBe(true);
         expect(toolbar.classList[0]).toBe('igx-grid-toolbar');
         expect(parseFloat(toolbar.offsetHeight) > 55).toBe(true);
 
@@ -447,7 +447,7 @@ describe('IgxGrid - Grid Toolbar', () => {
         fixture.detectChanges();
 
         const toolbar = getToolbar().nativeElement;
-        expect(grid.toolbar.displayDensity).toBe(DisplayDensity.comfortable);
+        expect(grid.toolbar.isComfortable()).toBe(true);
         expect(toolbar.classList[0]).toBe('igx-grid-toolbar');
 
         grid.displayDensity = DisplayDensity.compact;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
index 761a7c819ba..9f095e138f3 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -2869,6 +2869,27 @@ describe('IgxGrid Component Tests', () => {
                 fixture.detectChanges();
                 expect(cell.value).toBe('Changed product');
             }));
+
+            it('Should properly mark cell/row as dirty if new value evaluates to `false`', fakeAsync(() => {
+                const fixture = TestBed.createComponent(IgxGridRowEditingTransactionComponent);
+                fixture.detectChanges();
+
+                const grid = fixture.componentInstance.grid;
+                const targetRow = grid.getRowByIndex(0);
+                let targetRowElement = targetRow.element.nativeElement;
+                let targetCellElement = targetRow.cells.toArray()[1].nativeElement;
+                expect(targetRowElement.classList).not.toContain('igx-grid__tr--edited', 'row contains edited class w/o edits');
+                expect(targetCellElement.classList).not.toContain('igx-grid__td--edited', 'cell contains edited class w/o edits');
+
+                targetRow.cells.toArray()[1].update('');
+                tick();
+                fixture.detectChanges();
+
+                targetRowElement = targetRow.element.nativeElement;
+                targetCellElement = targetRow.cells.toArray()[1].nativeElement;
+                expect(targetRowElement.classList).toContain('igx-grid__tr--edited', 'row does not contain edited class w/ edits');
+                expect(targetCellElement.classList).toContain('igx-grid__td--edited', 'cell does not contain edited class w/ edits');
+            }));
         });
 
         describe('Row Editing - Grouping',  () => {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
index 069f67de1e2..e24c0d5bd1d 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -1,6 +1,6 @@
 import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren,
     QueryList, ViewChild, ElementRef, TemplateRef, DoCheck, NgZone, ChangeDetectorRef, ComponentFactoryResolver,
-    IterableDiffers, ViewContainerRef, Inject, AfterContentInit, HostBinding, forwardRef, OnInit } from '@angular/core';
+    IterableDiffers, ViewContainerRef, Inject, AfterContentInit, HostBinding, forwardRef, OnInit, Optional } from '@angular/core';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseComponent, IgxGridTransaction, IFocusChangeEventArgs } from '../grid-base.component';
 import { IgxGridNavigationService } from '../grid-navigation.service';
@@ -11,7 +11,7 @@ import { IgxTextHighlightDirective } from '../../directives/text-highlight/text-
 import { IGroupByRecord } from '../../data-operations/groupby-record.interface';
 import { IgxGroupByRowTemplateDirective } from './grid.directives';
 import { IgxGridGroupByRowComponent } from './groupby-row.component';
-import { DisplayDensity } from '../../core/displayDensity';
+import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../../core/displayDensity';
 import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface';
 import { IBaseChipEventArgs, IChipClickEventArgs, IChipKeyDownEventArgs } from '../../chips/chip.component';
 import { IChipsAreaReorderEventArgs } from '../../chips/chips-area.component';
@@ -121,9 +121,10 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do
         differs: IterableDiffers,
         viewRef: ViewContainerRef,
         navigation: IgxGridNavigationService,
-        filteringService: IgxFilteringService) {
+        filteringService: IgxFilteringService,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
             super(gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation,
-                  filteringService);
+                  filteringService, _displayDensityOptions);
             this._gridAPI = <IgxGridAPIService>gridAPI;
     }
 
@@ -413,13 +414,12 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do
      * @hidden
      */
     get groupAreaHostClass(): string {
-        switch (this.displayDensity) {
-            case DisplayDensity.cosy:
-                return 'igx-drop-area--cosy';
-            case DisplayDensity.compact:
-                return 'igx-drop-area--compact';
-            default:
-                return 'igx-drop-area';
+        if (this.isCosy()) {
+            return 'igx-drop-area--cosy';
+        } else if (this.isCompact()) {
+            return 'igx-drop-area--compact';
+        } else {
+            return 'igx-drop-area';
         }
     }
 
@@ -843,6 +843,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do
     }
 
     public ngDoCheck(): void {
+        super.ngDoCheck();
         if (this.groupingDiffer) {
             const changes = this.groupingDiffer.diff(this.groupingExpressions);
             if (changes && this.columnList) {
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts
index 3c02da56685..38e2b440f94 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts
@@ -800,7 +800,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
 
     const testEditingNavigationTab =
         (fixture, treegrid: IgxTreeGridComponent, columns) => new Promise(async (resolve, reject) => {
-            const cell = treegrid.getCellByColumn(2, columns[2]);
+            let cell = treegrid.getCellByColumn(2, columns[2]);
 
             cell.nativeElement.dispatchEvent(new Event('focus'));
             await wait(DEBOUNCETIME);
@@ -811,6 +811,8 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
             UIInteractions.triggerKeyDownEvtUponElem('Enter', cell.nativeElement, true);
             await wait(DEBOUNCETIME);
             fixture.detectChanges();
+
+            cell = treeGrid.getCellByColumn(2, columns[2]);
             expect(cell.inEditMode).toBe(true);
 
             // Test tab on child row
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
index 8ce92bf0a07..f770e5c43ae 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
@@ -12,13 +12,15 @@ import {
     EventEmitter,
     Inject,
     NgZone,
-    forwardRef
+    forwardRef,
+    Optional
 } from '@angular/core';
 import { IgxSelectionAPIService } from '../../core/selection';
 import { IgxTreeGridAPIService } from './tree-grid-api.service';
 import { IgxGridBaseComponent, IgxGridTransaction } from '../grid-base.component';
 import { GridBaseAPIService } from '../api.service';
 import { ITreeGridRecord } from './tree-grid.interfaces';
+import { IDisplayDensityOptions, DisplayDensityToken } from '../../core/displayDensity';
 import { IRowToggleEventArgs } from './tree-grid.interfaces';
 import { TransactionService, HierarchicalTransaction, HierarchicalState, TransactionType } from '../../services/transaction/transaction';
 import { DOCUMENT } from '@angular/common';
@@ -245,9 +247,10 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent {
         differs: IterableDiffers,
         viewRef: ViewContainerRef,
         navigation: IgxGridNavigationService,
-        filteringService: IgxFilteringService) {
+        filteringService: IgxFilteringService,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
             super(gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation,
-                filteringService);
+                filteringService, _displayDensityOptions);
         this._gridAPI = <IgxTreeGridAPIService>gridAPI;
     }
 
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index df8f0029a31..908578dd7c7 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -17,7 +17,7 @@ import { IgxInputDirective, IgxInputState } from '../directives/input/input.dire
 import { IgxLabelDirective } from '../directives/label/label.directive';
 import { IgxPrefixDirective, IgxPrefixModule} from '../directives/prefix/prefix.directive';
 import { IgxSuffixDirective, IgxSuffixModule } from '../directives/suffix/suffix.directive';
-import { DisplayDensity, IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
+import { DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
 
 let NEXT_ID = 0;
 
@@ -254,7 +254,8 @@ export class IgxInputGroupComponent extends DisplayDensityBase {
         return this._type.toString();
     }
 
-    constructor(private _element: ElementRef, @Optional() @Inject(DisplayDensityToken) private _displayDensityOptions: IDisplayDensity) {
+    constructor(private _element: ElementRef,
+        @Optional() @Inject(DisplayDensityToken) private _displayDensityOptions: IDisplayDensityOptions) {
         super(_displayDensityOptions);
         this.element = _element;
     }
diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts
index 12daf4a7af7..3f1c85751fd 100644
--- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts
@@ -338,11 +338,11 @@ export class TreeGridFunctions {
                 await wait(DEBOUNCETIME);
                 fix.detectChanges();
 
-                const newCell = treeGrid.getCellByColumn(rowIndex, nextColumnName);
                 cell = treeGrid.getCellByColumn(rowIndex, firstColumnName);
                 if (cell !== undefined && cell !== null) {
                     TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell, false);
                 }
+                const newCell = treeGrid.getCellByColumn(rowIndex, nextColumnName);
                 TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, newCell);
                 expect(newCell.focused).toEqual(true);
 
@@ -371,6 +371,7 @@ export class TreeGridFunctions {
                 } else {
                     newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex + 1]);
                 }
+
                 TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, newCell);
                 expect(newCell.focused).toEqual(true);
 
@@ -420,12 +421,12 @@ export class TreeGridFunctions {
                 if (cell !== undefined && cell !== null) {
                     expect(cell.inEditMode).toBe(false);
                 }
-
                 if (columnIndex === columns.length - 1) {
                     newCell = treeGrid.getCellByColumn(rowIndex + 1, columns[0]);
                 } else {
                     newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex + 1]);
                 }
+
                 expect(newCell.inEditMode).toBe(true);
                 resolve();
             })
@@ -446,12 +447,12 @@ export class TreeGridFunctions {
                 if (cell !== undefined && cell !== null) {
                     expect(cell.inEditMode).toBe(false);
                 }
-
                 if (columnIndex === 0) {
                     newCell = treeGrid.getCellByColumn(rowIndex - 1, columns[columns.length - 1]);
                 } else {
                     newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex - 1]);
                 }
+
                 expect(newCell.inEditMode).toBe(true);
                 resolve();
             })
diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html
index 343d4172820..309564abc22 100644
--- a/src/app/grid-groupby/grid-groupby.sample.html
+++ b/src/app/grid-groupby/grid-groupby.sample.html
@@ -2,7 +2,7 @@
     <igx-switch [(ngModel)]="hideGroupedColumns" (change)="toggleGroupedVisibility($event)">Toggle Hiding Of Grouped Columns</igx-switch>
     <div class="separator"></div>
     <igx-grid #grid1 [data]="data" [allowFiltering]="true" [width]="'1200px'" (onGroupingDone)="onGroupingDoneHandler($event)" [hideGroupedColumns]="hideGroupedColumns" [groupingExpressions]='groupingExpressions'
-    [height]="'800px'" [rowSelectable]='true'  [primaryKey]="'ID'" [displayDensity]="density" (onFocusChange)="changeFocus($event)">
+    [height]="'700px'" [rowSelectable]='true'  [primaryKey]="'ID'" (onFocusChange)="changeFocus($event)">
         <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width"
             [hidden]='c.hidden' [sortable]='true' [groupable]='c.groupable' [movable]='true' [pinned]='!!c.pinned' [editable]="true" [filterable]="true">
         </igx-column>
@@ -24,5 +24,5 @@
     <button igxButton="raised" (click)="groupUngroupMultiple()">Ungroup "CompanyName", group "ContactTitle", "Address"</button>
     <br />
     <button igxButton="raised" (click)="toggleDensity()">Toggle density</button>
-
+    <div>Current Display Density: {{displayDensityOptions.displayDensity}}</div>
 </div>
diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts
index f057d0b9a53..627be7f271c 100644
--- a/src/app/grid-groupby/grid-groupby.sample.ts
+++ b/src/app/grid-groupby/grid-groupby.sample.ts
@@ -1,24 +1,24 @@
-import { Component, Injectable, ViewChild, OnInit } from '@angular/core';
+import { Component, Injectable, ViewChild, OnInit, Inject } from '@angular/core';
 
-import { IgxGridComponent,  SortingDirection, ISortingExpression, IGridFocusChangeEventArgs } from 'igniteui-angular';
-import { DisplayDensity } from 'projects/igniteui-angular/src/lib/core/displayDensity';
+import { IgxGridComponent,  SortingDirection, ISortingExpression, IgxInputGroupComponent } from 'igniteui-angular';
+import { IGridFocusChangeEventArgs } from 'projects/igniteui-angular/src/lib/grids/grid/grid.component';
+import { DisplayDensityToken, DisplayDensity, IDisplayDensityOptions } from 'projects/igniteui-angular/src/lib/core/displayDensity';
 import { detectChanges } from '@angular/core/src/render3';
 
 @Component({
-    providers: [],
+    providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact} }],
     selector: 'app-grid-sample',
     styleUrls: ['grid-groupby.sample.css'],
     templateUrl: 'grid-groupby.sample.html'
 })
-
 export class GridGroupBySampleComponent implements OnInit {
     @ViewChild('grid1') public grid1: IgxGridComponent;
     public data: Array<any>;
     public hideGroupedColumns = false;
     public columns: Array<any>;
     public groupingExpressions: Array<ISortingExpression>;
+    constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) {}
     public ngOnInit(): void {
-
         this.columns = [
             { field: 'ID', width: 100, hidden: true },
             { field: 'CompanyName', width: 300, groupable: true  },
@@ -32,12 +32,6 @@ export class GridGroupBySampleComponent implements OnInit {
             { field: 'Phone', width: 150, groupable: true  },
             { field: 'Fax', width: 150, groupable: true  }
         ];
-        this.groupingExpressions =  [
-            {
-                fieldName: 'CompanyName',
-                dir: SortingDirection.Asc
-            }
-        ];
         this.hideGroupedColumns = true;
 
         /* tslint:disable */
@@ -94,10 +88,10 @@ export class GridGroupBySampleComponent implements OnInit {
         this.grid1.hideGroupedColumns = !event.checked;
     }
     toggleDensity() {
-        switch (this._density) {
-            case DisplayDensity.comfortable: this.density = DisplayDensity.cosy; break;
-            case DisplayDensity.cosy: this.density = DisplayDensity.compact; break;
-            case DisplayDensity.compact: this.density = DisplayDensity.comfortable; break;
+        switch (this.displayDensityOptions.displayDensity ) {
+            case DisplayDensity.comfortable: this.displayDensityOptions.displayDensity = DisplayDensity.compact; break;
+            case DisplayDensity.compact: this.displayDensityOptions.displayDensity = DisplayDensity.cosy; break;
+            case DisplayDensity.cosy: this.displayDensityOptions.displayDensity = DisplayDensity.comfortable; break;
         }
     }
     getRowsList() {
diff --git a/src/app/input-group/input-group-child.sample.ts b/src/app/input-group/input-group-child.sample.ts
index abfc344cb16..defd45c4f3a 100644
--- a/src/app/input-group/input-group-child.sample.ts
+++ b/src/app/input-group/input-group-child.sample.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { DisplayDensityToken, DisplayDensity, IDisplayDensity } from 'projects/igniteui-angular/src/lib/core/displayDensity';
+import { DisplayDensityToken, DisplayDensity, IDisplayDensityOptions } from 'projects/igniteui-angular/src/lib/core/displayDensity';
 
 @Component({
     // tslint:disable-next-line:component-selector
@@ -14,7 +14,7 @@ export class InputGroupChildSampleComponent {
         lastName: 'Duduka'
     };
 
-    constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensity) {}
+    constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) {}
 
     changeDisplayDensity() {
         switch (this.displayDensityOptions.displayDensity) {