fix(ngClass): should properly remove classes without fallback (#995)

In some cases where a fallback `ngClass` is not defined, the ClassDirective had no way of knowing to remove its ngClass on deactivation. 

> Unlike other directives, the `removeStyles` action has no effect on ClassDirective.

By specifying an empty default fallback, we ensure that on deactivation - if no other default is specified - the ClassDirective will correctly fallback to an empty string case.


Fixes #992.

Author: CaerusKaru

src/lib/extended/class/class.spec.ts

@@ -87,6 +87,23 @@ describe('class directive', () => {
       expectNativeEl(fixture).not.toHaveCssClass('class2');
     });
 
+  it('should use responsive ngClass string and remove without fallback', () => {
+    createTestComponent(`<div [ngClass.xs]="'what class2'"></div>`);
+
+    expectNativeEl(fixture).not.toHaveCssClass('what');
+    expectNativeEl(fixture).not.toHaveCssClass('class2');
+
+    // the CSS classes listed in the string (space delimited) are added,
+    // See https://angular.io/api/common/NgClass
+    mediaController.activate('xs');
+    expectNativeEl(fixture).toHaveCssClass('what');
+    expectNativeEl(fixture).toHaveCssClass('class2');
+
+    mediaController.activate('lg');
+    expectNativeEl(fixture).not.toHaveCssClass('what');
+    expectNativeEl(fixture).not.toHaveCssClass('class2');
+  });
+
   it('should override base `class` values with responsive ngClass map', () => {
       createTestComponent(`
         <div class="class0" [ngClass.xs]="{'what':true, 'class2':true, 'class0':false}"></div>

src/lib/extended/class/class.ts

@@ -49,6 +49,7 @@ export class ClassDirective extends BaseDirective2 implements DoCheck {
       );
     }
     this.init();
+    this.setValue('', '');
   }
 
   protected updateWithValue(value: any) {