Responsive ngClass (ngClass.xs...ngClass.xl) removing class applied by normal ngClass

Bug Report

When we have Responsive ngClass and normal ngClass responsive ngClass removed class applied by normal ngClass

Example:

<div ngClass="box" ngClass.xs="extra-small-device" ngClass.sm="small-device" ngClass.md="medium-device" ngClass.lg="large-device"
 ngClass.xl="extra-large-device">
	test
</div>

What is the expected behavior?

For above code that div should always have class “box”. Also based on screen size that responsive class also should get added

What is the current behavior?

Only responsive class get added that default class “box” got removed

What are the steps to reproduce?

https://stackblitz.com/edit/angular-eqf3ac?file=src%2Fapp%2Fapp.component.html

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

{
    "@angular/cdk": "^8.0.0-rc.0",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/forms": "^8.0.0",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "core-js": "2",
    "rxjs": "^6.5.2",
    "zone.js": "^0.9.1"
  }

Is there anything else we should know?

[fxck]

update from 7 to 8, now

      <div
        ngClass.xs="__top-content--xs"
        ngClass.sm="__top-content--sm"
        class="__top_content">

__top_content class is removed completely

[retripcon]

Just stumbled across the same issue. I would expect the ngClass directive to be applied all the time. As @ravinsinghd figured out this behaviour is also described in the documentation.

However, the class directive did work for me and is not overwritten by the responsive ngClass and I can use this as workaround.

Does not work (but I would expect test to be applied except it is overwritten in the ngClass.lt-md): <div [ngClass]="{ 'test': true }" [ngClass.lt-md]="{ 'bla': true }"

Does work for me: <div [class.test]="true" [ngClass.lt-md]="{ 'bla': true }"

The workaround gets kind of messy and hard to read if you want to apply multiple classes with the regular ngClass.