Breakpoint ng classes override the default ngClass class lists

[avatsaev]

https://github.com/angular/flex-layout/wiki/ngClass-API#merging-classes

Note that the default classes (specified by class="" and ngClass="..." will be preserved (and merged) into other activation class lists

this part of the documentation is completely untrue.

the breakpoint ngClasses are overriding the simple ngClass behaviour in this code:

<div class="viewport"

     [ngClass]="{
        'dark-mode': readerService.readerViewPortTheme == 'dark',
        'light-mode': readerService.readerViewPortTheme == 'light',
        'dusk-mode': readerService.readerViewPortTheme == 'dusk'
      }"

     [ngClass.gt-md]="'pad-3'"
     [ngClass.md]="'pad-3'"
     [ngClass.sm]="'pad-1'"
     [ngClass.xs]="'pad-0'"
>

when 'pad-x' class is added to the div it removes 'x-mode' class.

[M-Adoo]

same problem with me. beta.6 is ok.

[ThomasBurleson]

Should be fixed in Beta.9.

[Defmetalhead]

This still happens in "@angular/flex-layout": "^2.0.0-beta.12"

[ngClass.gt-md]="['desktop-view']" [ngClass]="{'loading-activity': true}"

"loading-activity" is gone once the breakpoint NgClass is set.

I got around it with

[class.loading-activity]="true"

[netkovedar]

Same as above still happens in "@angular/flex-layout": "5.0.0-beta.14".

[ngClass]="{'no-tabs': !tabContent, 'sync-failed': syncFailed}" ngClass.gt-md="desktop"

"no-tabs" and "sync-failed" classes disappear when ngClass.gt-md breakpoint triggers "desktop" class. Same workaround as @Defmetalhead .

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}