{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/15965","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/15965/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/15965/comments","events_url":"https://api.github.com/repos/angular/angular/issues/15965/events","html_url":"https://github.com/angular/angular/issues/15965","id":221671201,"number":15965,"title":"Trigger for animated routes cannot be disabled by setting host-bound property to false","user":{"login":"dmgudeman","id":7411132,"avatar_url":"https://avatars1.githubusercontent.com/u/7411132?v=4","gravatar_id":"","url":"https://api.github.com/users/dmgudeman","html_url":"https://github.com/dmgudeman","followers_url":"https://api.github.com/users/dmgudeman/followers","following_url":"https://api.github.com/users/dmgudeman/following{/other_user}","gists_url":"https://api.github.com/users/dmgudeman/gists{/gist_id}","starred_url":"https://api.github.com/users/dmgudeman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dmgudeman/subscriptions","organizations_url":"https://api.github.com/users/dmgudeman/orgs","repos_url":"https://api.github.com/users/dmgudeman/repos","events_url":"https://api.github.com/users/dmgudeman/events{/privacy}","received_events_url":"https://api.github.com/users/dmgudeman/received_events","type":"User","site_admin":false},"labels":[{"id":217956517,"url":"https://api.github.com/repos/angular/angular/labels/comp:%20animations","name":"comp: animations","color":"c7def8","default":false},{"id":375496864,"url":"https://api.github.com/repos/angular/angular/labels/freq1:%20low","name":"freq1: low","color":"fbca04","default":false},{"id":375497884,"url":"https://api.github.com/repos/angular/angular/labels/severity1:%20confusing","name":"severity1: confusing","color":"0052cc","default":false},{"id":218367747,"url":"https://api.github.com/repos/angular/angular/labels/state:%20Needs%20Design","name":"state: Needs Design","color":"006b75","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-04-13T20:20:02Z","updated_at":"2017-12-05T23:49:27Z","closed_at":"2017-12-05T23:49:27Z","author_association":"NONE","body":"<!--\r\nIF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE MIGHT CLOSE YOUR ISSUE WITHOUT INVESTIGATING\r\n-->\r\n\r\n**I'm submitting a ...**  (check one with \"x\")\r\n```\r\n[x ] bug report => search github for a similar issue or PR before submitting\r\n[ ] feature request\r\n[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n```\r\n\r\n**Current behavior**\r\nI am implementing route animations and need to be able to turn on or off the animations. It is my\r\nunderstanding that the trigger is bound to the component using HostBinding and this can  be disabled by setting the property to false.  Currently it does not matter if the property resolves to true or false or indeed is never set at all. The only way I can get it to be disabled is by commenting out the line.\r\n\r\n**Expected behavior**\r\nWhen using HostBinding with an animation trigger if the property evaluates to false the animation will be disabled.\r\n\r\n**Minimal reproduction of the problem with instructions**\r\nhttps://plnkr.co/edit/dnofDqzZcTNdUm02LOa9?p=preview\r\n\r\n**What is the motivation / use case for changing the behavior?**\r\nI want to slide the component in from the left if it slide out to the left and slide it in from the right if it slid out to the right. \r\n\r\n**Please tell us about your environment:**\r\nmacOS Sierra v 10.12.4, visual studio, webpack with an angular-cli.\r\n\r\n* **Angular version:** 2.0.X\r\nAngular version: 4.0.1\r\n\r\n* **Browser:**\r\nVersion 57.0.2987.133\r\n \r\n* **Language:**\r\nES5\r\n\r\n* **Node (for AoT issues):** `node --version` =   7.1.0\r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/349480462","html_url":"https://github.com/angular/angular/issues/15965#issuecomment-349480462","issue_url":"https://api.github.com/repos/angular/angular/issues/15965","id":349480462,"user":{"login":"matsko","id":93018,"avatar_url":"https://avatars2.githubusercontent.com/u/93018?v=4","gravatar_id":"","url":"https://api.github.com/users/matsko","html_url":"https://github.com/matsko","followers_url":"https://api.github.com/users/matsko/followers","following_url":"https://api.github.com/users/matsko/following{/other_user}","gists_url":"https://api.github.com/users/matsko/gists{/gist_id}","starred_url":"https://api.github.com/users/matsko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matsko/subscriptions","organizations_url":"https://api.github.com/users/matsko/orgs","repos_url":"https://api.github.com/users/matsko/repos","events_url":"https://api.github.com/users/matsko/events{/privacy}","received_events_url":"https://api.github.com/users/matsko/received_events","type":"User","site_admin":false},"created_at":"2017-12-05T23:49:27Z","updated_at":"2017-12-05T23:49:27Z","author_association":"MEMBER","body":"Unfortunately it does seem like setting the binding value to false will disable the animation, but this isn't the case. `false` is still seem as a value state to go to (and since `:enter` and `:leave` work as `void => *` and `* => void` under the hood this means that they will match it).\r\n\r\nSo the solution here is to add an empty transition that is matched when `false` is used.\r\n\r\n```ts\r\ntrigger('routeFadeState', [\r\n  transition('* <=> false', []), // this will ignore all animations that have false as the value\r\n  transition(':enter', [\r\n  ])\r\n])\r\n```"}}
{"actor":{"display_login":"matsko"}}