{"action":"created","issue":{"url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/534","repository_url":"https://api.github.com/repos/NativeScript/nativescript-angular","labels_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/534/labels{/name}","comments_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/534/comments","events_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/534/events","html_url":"https://github.com/NativeScript/nativescript-angular/issues/534","id":189104560,"number":534,"title":"Animation error when using *ngIf on animation element","user":{"login":"NickIliev","id":18008302,"avatar_url":"https://avatars2.githubusercontent.com/u/18008302?v=4","gravatar_id":"","url":"https://api.github.com/users/NickIliev","html_url":"https://github.com/NickIliev","followers_url":"https://api.github.com/users/NickIliev/followers","following_url":"https://api.github.com/users/NickIliev/following{/other_user}","gists_url":"https://api.github.com/users/NickIliev/gists{/gist_id}","starred_url":"https://api.github.com/users/NickIliev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NickIliev/subscriptions","organizations_url":"https://api.github.com/users/NickIliev/orgs","repos_url":"https://api.github.com/users/NickIliev/repos","events_url":"https://api.github.com/users/NickIliev/events{/privacy}","received_events_url":"https://api.github.com/users/NickIliev/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-11-14T12:49:47Z","updated_at":"2018-05-13T17:51:21Z","closed_at":"2017-03-29T12:53:19Z","author_association":"MEMBER","body":"_From @Plamen5kov on November 14, 2016 11:55_\n\n_From @MaklaCof on November 11, 2016 21:38_\r\n\r\nI get error when variable in *ngIf is changed:\r\n```\r\n> [JS      ] EXCEPTION: Uncaught (in promise): Error: Animation cancelled.\r\n[JS      ] ORIGINAL STACKTRACE:\r\n[JS      ] Error: Uncaught (in promise): Error: Animation cancelled.\r\n[JS      ]     at resolvePromise (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:416:31)\r\n[JS      ]     at resolvePromise (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:401:17)\r\n[JS      ]     at /data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:449:17\r\n[JS      ]     at ZoneDelegate.invokeTask (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:223:37)\r\n[JS      ]     at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (/data/data/com.telerik.Mobile/files/app/tns_modules/@angular/core/bundles/core.umd.js:6233:41)\r\n[JS      ]     at ZoneDelegate.invokeTask (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:222:42)\r\n[JS      ]     at Zone.runTask (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:123:47)\r\n[JS      ]     at drainMicroTaskQueue (/data/data/com.telerik.Mobile/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:355:35)\r\n[JS      ] Unhandled Promise rejection: Animation cancelled. ; Zone: angular ; Task: Promise.then ; Value: Error: Animation cancelled. Error: Animation cancelled.\r\n[JS      ]     at Animation._rejectAnimationFinishedPromise (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/animation/animation-common.js:110:22)\r\n[JS      ]     at Animation._onAndroidAnimationCancel (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/animation/animation.js:113:14)\r\n[JS      ]     at Animation._animatorListener.android.animation.Animator.AnimatorListener.onAnimationCancel (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/animation/animation.js:53:22)\r\n[JS      ]     at Animation.cancel (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/animation/animation.js:92:27)\r\n[JS      ]     at KeyframeAnimation.cancel (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/animation/keyframe-animation.js:105:31)\r\n[JS      ]     at Label.View._unregisterAllAnimations (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/core/view-common.js:1114:27)\r\n[JS      ]     at Style._resetCssValues (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/styling/style.js:925:20)\r\n[JS      ]     at CssState.apply (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/styling/style-scope.js:46:25)\r\n[JS      ]     at Label.View.applyCssState (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/core/view-common.js:1201:24)\r\n[JS      ]     at Label.View._onCssStateChange (/data/data/com.telerik.Mobile/files/app/tns_modules/ui/core/view-common.js:1194:14)\r\n[JS      ] Error: Uncaught (in promise): Error: Animation cancelled.\r\n```\r\nHTML:\r\n```\r\n<Label class=\"fa fa-spin\" text=\"&#xf013;\" *ngIf=\"isRunning\"></Label>\r\n```\r\nCSS:\r\n```\r\n`.fa {\r\n    font-family: FontAwesome;\r\n    font-size: 24;\r\n}\r\n\r\n.fa-spin {\r\n    animation-name: fa-spin;\r\n    animation-duration: 4;\r\n    animation-iteration-count: infinite;\r\n    animation-timing-function: linear;\r\n    vertical-align: middle;\r\n    text-align: center;\r\n}\r\n\r\n@keyframes fa-spin {\r\n    from { transform: rotate(0deg); }\r\n    to { transform: rotate(360deg); }\r\n}\r\n```\r\n\r\nTS:\r\n```\r\nexport class HomeComponent implements OnInit\r\n{\r\n    isRunning = false;\r\n\r\n    constructor(private router: Router, private page: Page, private zone: NgZone)\r\n    {\r\n    }\r\n\r\n    parseResponse(data: any)\r\n    {\r\n        this.zone.run(() =>\r\n        {\r\n            if (typeof data.isRunning !== \"undefined\" && data.isRunning !== null)\r\n                this.isRunning = data.isRunning;\r\n        });\r\n    }\r\n}\r\n```\r\n_I hope code is readable, because code formatting is not working._\r\n**The code works, even error is raised.**\r\n\r\n_Copied from original issue: NativeScript/nativescript-cli#2218_\n\n_Copied from original issue: NativeScript/NativeScript#3089_"},"comment":{"url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/comments/388644138","html_url":"https://github.com/NativeScript/nativescript-angular/issues/534#issuecomment-388644138","issue_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/534","id":388644138,"user":{"login":"vultix","id":5114062,"avatar_url":"https://avatars3.githubusercontent.com/u/5114062?v=4","gravatar_id":"","url":"https://api.github.com/users/vultix","html_url":"https://github.com/vultix","followers_url":"https://api.github.com/users/vultix/followers","following_url":"https://api.github.com/users/vultix/following{/other_user}","gists_url":"https://api.github.com/users/vultix/gists{/gist_id}","starred_url":"https://api.github.com/users/vultix/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vultix/subscriptions","organizations_url":"https://api.github.com/users/vultix/orgs","repos_url":"https://api.github.com/users/vultix/repos","events_url":"https://api.github.com/users/vultix/events{/privacy}","received_events_url":"https://api.github.com/users/vultix/received_events","type":"User","site_admin":false},"created_at":"2018-05-13T17:51:21Z","updated_at":"2018-05-13T17:51:21Z","author_association":"NONE","body":"@hdeshev I can confirm that this issue is still not resolved.  Can we re-open the issue?"}}
{"actor":{"display_login":"vultix"}}