title: Show/Hide using custom breakpoints and angular/flex-layout
body: <p>I'm using Angular(v5.0.2), and Angular-FlexLayout (v2.0.0-beta.10-4905443). I'm trying to use custom breakpoints with every directive provided by @angular/flex-layout.</p>
  
  <p>I have added custom breakpoints:</p>
  
  <pre><code>import {DEFAULT_BREAKPOINTS, BREAKPOINTS} from '@angular/flex-layout';
  
  const CUSTOM_BREAKPOINTS = [
    {
      alias: 'sm.landscape',
      suffix: 'SmLandscape',
      mediaQuery: 'screen and (min-width:55em) and (max-width: 80em) and (orientation: landscape)',
      overlapping: true
    }
  ];
  
  export const CustomBreakPointsProvider = {
    provide: BREAKPOINTS,
    useValue: [...DEFAULT_BREAKPOINTS,...CUSTOM_BREAKPOINTS],
  };
  </code></pre>
  
  <p>I have extended the ShowHideDirective:</p>
  
  <pre><code>import { Directive, ElementRef, Renderer2, Input, Optional, Self } from '@angular/core'
  import { ShowHideDirective, negativeOf, LayoutDirective, MediaMonitor } from '@angular/flex-layout'
  
  @Directive({
    selector: `
      [fxHide.sm.landscape],
      [fxShow.sm.landscape],
    `
  })
  export class CustomShowHideDirective extends ShowHideDirective {
    constructor(monitor: MediaMonitor, @Optional() @Self() protected _layout: LayoutDirective, protected elRef: ElementRef, protected renderer: Renderer2) {
      super(monitor, _layout, elRef, renderer)
    }
  
    @Input('fxHide.sm.landscape') set hideSmLandscape(val) {this._cacheInput("showSmLandscape", negativeOf(val))}
    @Input('fxShow.sm.landscape') set showSmLandscape(val: boolean) {this._cacheInput("showSmLandscape", &lt;boolean&gt;val)}
  }
  </code></pre>
  
  <p>Removing the <code>@Optional() @Self()</code> to stay closer to the <a href="https://github.com/angular/flex-layout/wiki/BreakPoints#custom-breakpoints-and-directives" rel="noreferrer">doc</a> triggers errors: <code>No provider found for LayoutDirective</code>. Adding <code>LayoutDirective, ElementRef</code> to the providers triggers the same error as <a href="https://github.com/angular/flex-layout/issues/440" rel="noreferrer">here</a>. I thus extend the class following the <a href="https://github.com/angular/flex-layout/blob/master/src/lib/api/ext/show-hide.ts#L104-L107" rel="noreferrer">source code</a>.</p>
  
  <p>I use what I have defined in my app.module:</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      CustomShowHideDirective,
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpModule,
      FlexLayoutModule,
    ],
    providers: [
      CustomBreakPointsProvider
    ],
    bootstrap: [AppComponent]
  })
  </code></pre>
  
  <p>I show or hide elements depending on the screen's size:</p>
  
  <pre><code>&lt;p&gt;
    &lt;span fxHide="false" fxHide.sm="true"&gt;fxHide.sm&lt;/span&gt;
    &lt;span fxShow="false" fxShow.sm="true"&gt;fxShow.sm&lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;span fxHide="false" fxHide.sm.landscape="true"&gt;fxHide.sm.landscape&lt;/span&gt;
    &lt;span fxShow="false" fxShow.sm.landscape="true"&gt;fxShow.sm.landscape&lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;span fxHide="true" fxHide.sm.landscape="false"&gt;hack fxShow.sm.landscape&lt;/span&gt;
    &lt;span fxShow="true" fxShow.sm.landscape="false"&gt;hack fxHide.sm.landscape&lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;span fxHide fxShow.sm.landscape&gt;hack2 fxShow.sm.landscape&lt;/span&gt;
    &lt;span fxShow fxHide.sm.landscape&gt;hack2 fxHide.sm.landscape&lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;span fxHide="false" fxHide.gt-sm="true"&gt;fxHide.gt-sm&lt;/span&gt;
    &lt;span fxShow="false" fxShow.gt-sm="true"&gt;fxShow.gt-sm&lt;/span&gt;
  &lt;/p&gt;
  &lt;span *ngIf="media.isActive('sm')"&gt;sm&lt;/span&gt;
  &lt;span *ngIf="media.isActive('sm.landscape')"&gt;sm.landscape&lt;/span&gt;
  &lt;span *ngIf="media.isActive('md')"&gt;md&lt;/span&gt;
  &lt;span *ngIf="media.isActive('lg')"&gt;lg&lt;/span&gt;
  </code></pre>
  
  <p>The expected behavior is thus the following:
  - no matter the screen size, exactly one item is shown per line, except for the last one, where all available mediaQueries are displayed
  - on each line appears fxHide or fxShow depending on the screen size</p>
  
  <p>The actual behavior is as presented on the attached screenshots: <a href="https://imgur.com/6pPCEOW" rel="noreferrer">Large screen</a>, <a href="https://imgur.com/Dvacm9f" rel="noreferrer">Custom media query activated</a>, <a href="https://imgur.com/Rwyd8VP" rel="noreferrer">Small screen</a>.</p>
  
  <p>You see that the ShowHideDirective doesn't work anymore for the default breakpoints. In addition, I can hide an element when the custom breakpoint is active, but the opposite behavior doesn't work.</p>
  
  <p>I have already updated all my npm packages to the latest available, delete the node_modules folder and ran <code>npm install</code> again, without effect.</p>
  
  <p>I also tried adding <code>LayoutDirective, ElementRef</code> to the list of providers. I then get the same error as <a href="https://github.com/angular/flex-layout/issues/440" rel="noreferrer">here</a>.</p>
  
  <p>Adding a print in the <code>showSmLandscape</code> method of my <code>CustomShowHideDirective</code> shows that the method is indeed called, and with the right arguments (as far as I can tell). Same thing for the fxShow.</p>
  
  <p>Adding the same kind of debug in <code>show</code> and <code>hide</code> (directly in my node_modules folder) shows that the <code>ShowHideDirective</code> is called with the right values.</p>
  
  <p>Any idea/hint/comment is welcome. I haven't managed to create a plunker yet, due to errors loading operators from rxjs...</p>
  
  <p>Edit: A working plunker is finally available <a href="https://plnkr.co/edit/sDMETYIbNlYd46Qyhvak?p=preview" rel="noreferrer">here</a> (working means showing the unexpected behavior ^^)</p>
  
  <p>Thanks for any contribution ;)</p>