How to use Angular Flex ngClass with custom breakpoints?

Question

I found that great package @angular/angular-flex and in the first moment everything was fine. Then I noticed that the default breakpoints differ to the breakpoints of Bootstrap4. But no problem: custom breakpoints.

But here is a problem: because the defined breakpoints are being ignored and I can't find a solution. Also the documentation is a bit confusing. Sometimes I saw imports from BREAKPOINT and the next time BREAKPOINTS where imported. What is correct now?

But this this not the fight. The fight is to get the code running and I hope that somebody can help me please. I'm using Angular 9 for my project.

The breakpoints are defined in: custom-breakpoints.ts

import { BREAKPOINT } from '@angular/flex-layout';

export const BS4_BREAKPOINTS = [
    { alias: 'xs', mediaQuery: 'screen and (max-width: 575px)' },
    { alias: 'sm', mediaQuery: 'screen and (min-width: 576px) and (max-width: 767px)' },
    { alias: 'md', mediaQuery: 'screen and (min-width: 768px) and (max-width: 991px)' },
    { alias: 'lg', mediaQuery: 'screen and (min-width: 992px) and (max-width: 1199px)' },
    { alias: 'xl', mediaQuery: 'screen and (min-width: 1200px) and (max-width: 5000px)' },

    { alias: 'lt-sm', mediaQuery: 'screen and (max-width: 575px)' },
    { alias: 'lt-md', mediaQuery: 'screen and (max-width: 767px)' },
    { alias: 'mdtest', mediaQuery: 'screen and (max-width: 767px)' },
    { alias: 'lt-lg', mediaQuery: 'screen and (max-width: 991px)' },
    { alias: 'lt-xl', mediaQuery: 'screen and (max-width: 1199px)' },

    { alias: 'gt-xs', mediaQuery: 'screen and (min-width: 576px)' },
    { alias: 'gt-sm', mediaQuery: 'screen and (min-width: 768px)' },
    { alias: 'gt-md', mediaQuery: 'screen and (min-width: 992px)' },
    { alias: 'gt-lg', mediaQuery: 'screen and (min-width: 1200px)' },
];

export const CustomBreakPointsProvider = {
    provide: BREAKPOINT,
    useValue: BS4_BREAKPOINTS,
    multi: true,
};

and the module declares:

import { CustomBreakPointsProvider } from './services';
import { BS4_BREAKPOINTS } from './services';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        FlexLayoutModule.withConfig({ disableDefaultBps: true }, BS4_BREAKPOINTS),
        ...
    ],
    declarations: [
        ...
    ],
    providers: [
        CustomBreakPointsProvider, // Adds breakpoints mediaQueries
    ],
})

Then I try to apply the breakpoint in the HTML, like:

...

The result is that ngClass.mdtest is being ignored. But what I'm doing wrong?

user_13685454 · Answer

You need to first make a custom directive and import it in your modules. Since your using for ClassDirectives, to fix it:

custom-breakpoints.ts

If you want to override the default breakpoints set priority 1001.

import { BREAKPOINT } from '@angular/flex-layout';

export const BS4_BREAKPOINTS = [
    { alias: 'lt-sm', mediaQuery: 'screen and (max-width: 575px)', overlapping: false, priority: 1001 },
    { alias: 'lt-md', mediaQuery: 'screen and (max-width: 767px)', overlapping: false, priority: 1001 },
    { alias: 'mdtest', mediaQuery: 'screen and (max-width: 767px)', overlapping: false, priority: 1001 },
    { alias: 'lt-lg', mediaQuery: 'screen and (max-width: 991px)', overlapping: false, priority: 1001 },
    { alias: 'lt-xl', mediaQuery: 'screen and (max-width: 1199px)', overlapping: false, priority: 1001 },

];

export const CustomBreakPointsProvider = {
    provide: BREAKPOINT,
    useValue: [...BS4_BREAKPOINTS],
    multi: true,
};

custom-directives.ts

import { Directive } from '@angular/core';
import { ClassDirective } from '@angular/flex-layout';

const selector = `[ngClass.mdtest]`;    

const inputs = ['ngClass.mdtest'];


@Directive({selector, inputs})
export class CustomClassDirective extends ClassDirective {
    protected inputs = inputs;
}

custom.module.ts

import { CustomBreakPointsProvider } from './services';
import { BS4_BREAKPOINTS } from './services';
import { CustomClassDirective } from './custom-directives';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        FlexLayoutModule.withConfig({ disableDefaultBps: true }, BS4_BREAKPOINTS),
        ...
    ],
    declarations: [
        CustomClassDirective  // Add your custom directive here
    ],
    providers: [
        CustomBreakPointsProvider, // Adds breakpoints mediaQueries
    ],
})

Try this code it may works now:

...

How to use Angular Flex ngClass with custom breakpoints?

1 Answers