Skip to content

Commit

Permalink
fix(ngClass): should properly remove classes without fallback (#995)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
CaerusKaru authored and ThomasBurleson committed Jan 15, 2019
1 parent 8307655 commit 47248b1
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 0 deletions.
17 changes: 17 additions & 0 deletions src/lib/extended/class/class.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/lib/extended/class/class.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export class ClassDirective extends BaseDirective2 implements DoCheck {
);
}
this.init();
this.setValue('', '');
}

protected updateWithValue(value: any) {
Expand Down

0 comments on commit 47248b1

Please sign in to comment.