Skip to content

Template Parse Errors #13645

Closed
Closed

Description

@ThomasBurleson

When I use Flex-Layout API:

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

All works fine. When I do not 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: I am using latest bundles on NPM: https://unpkg.com/angular/core/bundles/core.umd.js

Activity

  1. ThomasBurleson commented on Dec 22, 2016

    @ThomasBurleson
    Author

    @tbosch, @vicb - FYI.

  2. ThomasBurleson commented on Dec 22, 2016

    @ThomasBurleson
    Author

    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); };
  3. added a commit that references this issue on Dec 27, 2016
    881eb89
  4. added a commit that references this issue on Jan 6, 2017
    29ffdfd
  5. angular-automatic-lock-bot commented on Sep 10, 2019

    @angular-automatic-lock-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.

  6. locked and limited conversation to collaborators on Sep 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions