[@.disabled]="true" causes console errors

Question

I want to disable the angular animation at certain times and therefor found the [@.disabled]="isDisabled" in the docs.

So I wanted to use it in like this: [@.disabled]="true" (just to test it) and I get constant errors:

Error Text:

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '[@.s' is not a valid attribute name.
    at DefaultDomRenderer2.push.../../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setAttribute (http://localhost:4200/vendor.js:134848:16)
    at AnimationRenderer.push.../../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.setAttribute (http://localhost:4200/vendor.js:133467:23)
    at DebugRenderer2.push.../../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setAttribute (http://localhost:4200/vendor.js:85125:23)
    at createElement (http://localhost:4200/vendor.js:81803:22)
    at createViewNodes (http://localhost:4200/vendor.js:84036:26)
    at createEmbeddedView (http://localhost:4200/vendor.js:83983:5)
    at callWithDebugContext (http://localhost:4200/vendor.js:84997:25)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (http://localhost:4200/vendor.js:84521:12)
    at TemplateRef_.push.../../node_modules/@angular/core/fesm5/core.js.TemplateRef_.createEmbeddedView (http://localhost:4200/vendor.js:82564:38)
    at ViewContainerRef_.push.../../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createEmbeddedView (http://localhost:4200/vendor.js:82430:35)

Code:

  <ng-container *ngIf="!something" [@.disabled]="true">
    ....
    <div [@fadingListAnimation]="otherthing">

Is there an import missing? Why is it saying ''[@.s' is not a valid attribute name. the attribute is @.disabled?

Aren't you supposed to place the disabled animation on the same element with the animation? — Christian, Mar 25 '19 at 14:32
And ng containers aren't rendered, how are you supposed to animate them anyway ! — , Mar 25 '19 at 14:34
@Christian from the doku: Place the @.disabled binding on an element to disable animations on the element itself, as well as any inner animation triggers within the element. — Stefan, Mar 25 '19 at 14:36
@trichetriche: yes that did the trick :). placing it on the same element, works too now (could have sworn it didn't). If you post it as an answer I will accept it :) — Stefan, Mar 25 '19 at 14:39
@Stefan not mine, notify Christian ! (But if I were you, I would delete my question, as it's only a typo on your end, hence making it non reproductible) — , Mar 25 '19 at 14:42
@trichetriche no the problem was that the animation was on the 'ng-container'. So not a typo, and it is a information which is not in the documentation. So it's a pretty niche problem but maybe it helps somebody..... — Stefan, Mar 25 '19 at 14:56

score 2 · Accepted Answer · answered Mar 25 '19 at 14:58

2

You have to remove your disabled animation from the ng-container, as those containers aren't rendered on the final HTML page.

You can't animate what doesn't exist !

answered Mar 25 '19 at 14:58

[@.disabled]="true" causes console errors

1 Answers1