ngClass gets overwritten by ngClass.xs

[vejitassj8]

Hi, So it's my first time making a responsive app with flex layout, and still trying to figure things out, since it's different than the old school bootstrap grids I'm used to. And I have a problem regarding the consistency of classes when going to mobile ngClass.xs removes my ngClass ones, my code:

<div [ngClass]="{'class0': condition == true,'class1': condition2 == true}"
ngClass.xs="mobile">

If I have regular class="class0 class1", it's fine the classes are preserved , I also tried, but the class0, is removed if it's not specified in the xs condition

<div
    ngClass="class0" 
    [ngClass.xs]="{'mobile':true}">
</div>

I don't want to have to copy paste code like (this does work):

<div [ngClass]="{'class0': condition == true,'class1': condition2 == true}"
ngClass.xs="{'class0': condition == true,'class1': condition2 == true,'mobile'}">

Can we have a cleaner solution for example: <div [ngClass]="{'class0': condition == true, 'class1': condition2 == true, 'mobile': xsBoolean}">

Please let me know what you think, or if there is a better way to do this.

Cheers.

[julianobrasil]

There's nothing wrong with your last solution. You just have to set the xsBoolean when you're using a small device (by, for example, using @angular/cdk/layout).

<div [ngClass]="{'class0': true, 'class1': true, 'mobile': xsBoolean}">

[vejitassj8]

Ok, but the proposal/question was if flex layout has these xs/sm/md/lg breakpoints booleans exposed for me to use, since the documentation behavior is not working as it should, not to create new ones using cdk/layout.

[CaerusKaru]

We have ObservableMedia, but otherwise no. This is a very interesting concept for expanding our existing Breakpoint interface, where we could expose whether or not the breakpoint is active at any given time, but for now you'd need to subscribe to ObservableMedia on your desired breakpoint and set the values accordingly. Or, you could use the @angular/cdk/layout BreakpointObserver if you prefer their implementation, as @julianobrasil suggested.

[takahser]

@julianobrasil 's suggestion worked for me:

1. Import the LayoutModule into your module

import { LayoutModule } from '@angular/cdk/layout';
@NgModule({
  imports: [
    LayoutModule,
  ], // etc.
})
export class AppModule { } // or your feature module

2. Listen to the breakpoint observer in your component

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.scss']
})
export class FooComponent implements OnInit {

  mobile = false;

  constructor(
    breakpointObserver: BreakpointObserver,
  ) {
    breakpointObserver.observe([
      Breakpoints.Handset, // ~ size "xs", see https://material.angular.io/cdk/layout/overview
    ]).subscribe(result => {
      if (result.matches) {
        this.mobile = true;
      } else {
        this.mobile = false;
      }
    });
  }
}

3. Use in your template, using the standard ngClass directive

<div [ngClass]="{ 'mobile': mobile, bar: 'bar' }">

[adamdport]

Not sure if this was a solution 2 years ago when this issue was created, but flex-layout won't clobber your dynamic classes if you use [class] instead of [ngClass]. Not only does it work the same, but Angular's docs say that ngClass might be on its way out:

However, using the above class binding syntax without NgClass is preferred because due to improvements in class binding in Angular, NgClass no longer provides significant value, and might eventually be removed in the future.

If it is removed someday, hopefully the flex-layout team will resolve this issue before they refactor to use class.xs instead of ngClass.xs.

[CaerusKaru]

class.xs is a non-starter because it would just apply the xs class to its host. We're thinking about alternatives and talking with the framework team to come up with something else.