Flex-layout: template parse error when using only responsive selectors.

[ThomasBurleson]

Developers currently must use the default API when one or more responsive APIs are defined.

Consider the following scenario where the default is fxShow and the responsive API defined is fxShow.xs:

<div fxShow [fxShow.xs]="menuOpen" class="banner">
  I should hide and show
</div>  

The above ^ works fine. When I do not, however, specify the default non-responsive selector fxShow:

<div [fxShow.xs]="menuOpen" class="banner">
  I should hide and show
</div>  

then a Template Parse error occurs:

Uncaught (in promise): Error: Template parse errors:
Can't bind to 'fxShow.xs' since it isn't a known property of 'div'. ("
    </button>

    <div [ERROR ->][fxShow.xs]="menuOpen" class="banner">
      I should hide and show
    </div>  
"): TestApp@5:9
Error: Template parse errors:
Can't bind to 'fxShow.xs' since it isn't a known property of 'div'. ("
    </button>

Here is the Plunkr Demo that shows this.

NOTE: this has also been reported in /angular/issues/13645

[ThomasBurleson]

Note that show.ts uses:

@Directive({selector: `
  [fxShow],
  [fxShow.xs]
  [fxShow.gt-xs],
  [fxShow.sm],
  [fxShow.gt-sm]
  [fxShow.md],
  [fxShow.gt-md]
  [fxShow.lg],
  [fxShow.gt-lg],
  [fxShow.xl]
`})
export class ShowDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {
  /**
   * Original dom Elements CSS display style
   */
  private _display = 'flex';

  /**
    * Subscription to the parent flex container's layout changes.
    * Stored so we can unsubscribe when this directive is destroyed.
    */
  private _layoutWatcher : Subscription;

  @Input('fxShow')       set show(val)     { this._cacheInput("show", val); }
  @Input('fxShow.xs')    set showXs(val)   { this._cacheInput('showXs', val); }
  @Input('fxShow.gt-xs') set showGtXs(val) { this._cacheInput('showGtXs', val); };
  @Input('fxShow.sm')    set showSm(val)   { this._cacheInput('showSm', val); };
  @Input('fxShow.gt-sm') set showGtSm(val) { this._cacheInput('showGtSm', val); };
  @Input('fxShow.md')    set showMd(val)   { this._cacheInput('showMd', val); };
  @Input('fxShow.gt-md') set showGtMd(val) { this._cacheInput('showGtMd', val); };
  @Input('fxShow.lg')    set showLg(val)   { this._cacheInput('showLg', val); };
  @Input('fxShow.gt-lg') set showGtLg(val) { this._cacheInput('showGtLg', val); };
  @Input('fxShow.xl')    set showXl(val)   { this._cacheInput('showXl', val); };

[ThomasBurleson]

@vicb has submitted a Pull Request fix: https://github.com/angular/angular/pull/13653

[ThomasBurleson]

Fixed in Angular SHA 881eb894b: will be available in Angular v4.0.0-beta.2.

[thekalinga]

@ThomasBurleson

A dumb question :)

Why is it angular 4 instead of angular 2?

[thekalinga]

Please ignore my previous comment

Found the reason for angular 4

https://angularjs.blogspot.com/2016/12/ok-let-me-explain-its-going-to-be.html

[angular-automatic-lock-bot[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._}