Utilice los puntos de quiebre personalizados de Angular Flex Layout para mostrar/ocultar elementos.

Estoy trabajando en la implementación de puntos de interrupción personalizados para el diseño de flexión, extendiendo la ShowHideDirective.

Mi directiva personalizada se muestra a continuación.

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

const selector = `[fxHide.xs.ngb], [fxHide.sm.ngb]`;
const inputs = ['fxHide.xs.ngb', 'fxHide.sm.ngb'];

@Directive({ selector, inputs })
export class CustomShowHideDirective extends ShowHideDirective {
  protected override inputs = inputs;
}

También estoy definiendo un token como se muestra a continuación.

import { BreakPoint, BREAKPOINTS } from '@angular/flex-layout';

const CUSTOM_BREAKPOINTS: BreakPoint[] = [
  {
    alias: 'xs.ngb',
    mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.98px)',
  },
  {
    alias: 'sm.ngb',
    mediaQuery: 'screen and (min-width: 600px) and (max-width: 959.98px)',
  },
];

export const CustomBreakPointsProvider = {
  provide: BREAKPOINTS,
  useValue: CUSTOM_BREAKPOINTS,
  multi: true,
};

En un módulo compartido, declaro y proporciono la directiva y el proveedor.

@NgModule({
  declarations: [CustomShowHideDirective],
  providers: [CustomBreakPointsProvider],
  exports: [CustomShowHideDirective],
  imports: [CommonModule, FlexLayoutModule],
})
export class SharedModule {}

Y en la plantilla, estoy utilizando la directiva de la siguiente manera:

<div fxlayout="column">
  <span>Some text</span>
  <button fxhide.sm.ngb="true">Get started</button>
</div>

¿Por qué el elemento de botón no se oculta cuando el viewport es < sm.ngb?

¿Me falta más configuración con esta implementación?