Merge pull request #6611 from IgniteUI/mvenkov/host-bind-correctly-class-in-nav-drawer-8.2.x

Retain classes added through markup in IgxNavDrawer 8.2.x

Author: Lipata

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts

@@ -571,6 +571,14 @@ describe('Navigation Drawer', () => {
         done();
     });
 
+    it('should retain classes added in markup, fix for #6508', () => {
+        const fix = TestBed.createComponent(TestComponent);
+        fix.detectChanges();
+
+        expect(fix.componentInstance.navDrawer.element.classList.contains('markupClass')).toBeTruthy();
+        expect(fix.componentInstance.navDrawer.element.classList.contains('igx-nav-drawer')).toBeTruthy();
+    });
+
     function swipe(element, posX, posY, duration, deltaX, deltaY) {
         const swipeOptions = {
             deltaX,
@@ -610,7 +618,7 @@ describe('Navigation Drawer', () => {
 
 @Component({
     selector: 'igx-test-cmp',
-    template: '<igx-nav-drawer></igx-nav-drawer>'
+    template: '<igx-nav-drawer class="markupClass"></igx-nav-drawer>'
 })
 class TestComponent {
     @ViewChild(IgxNavigationDrawerComponent, { static: true }) public navDrawer: IgxNavigationDrawerComponent;

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts

@@ -61,8 +61,12 @@ export class IgxNavigationDrawerComponent implements
     AfterContentInit,
     OnDestroy,
     OnChanges {
+
     private _isOpen = false;
-    @HostBinding('class') public cssClass = 'igx-nav-drawer';
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-nav-drawer')
+    public cssClass = true;
 
     /**
      * ID of the component