{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/2869","labels_url":"https://api.github.com/repos/angular/angular/issues/2869/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/2869/comments","events_url":"https://api.github.com/repos/angular/angular/issues/2869/events","html_url":"https://github.com/angular/angular/issues/2869","id":92945970,"number":2869,"title":"Host attributes: Be able to conditionally add or remove an attribute","user":{"login":"matanlurey","id":168174,"avatar_url":"https://avatars.githubusercontent.com/u/168174?v=3","gravatar_id":"","url":"https://api.github.com/users/matanlurey","html_url":"https://github.com/matanlurey","followers_url":"https://api.github.com/users/matanlurey/followers","following_url":"https://api.github.com/users/matanlurey/following{/other_user}","gists_url":"https://api.github.com/users/matanlurey/gists{/gist_id}","starred_url":"https://api.github.com/users/matanlurey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matanlurey/subscriptions","organizations_url":"https://api.github.com/users/matanlurey/orgs","repos_url":"https://api.github.com/users/matanlurey/repos","events_url":"https://api.github.com/users/matanlurey/events{/privacy}","received_events_url":"https://api.github.com/users/matanlurey/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/angular/labels/hotlist:%20GT","name":"hotlist: GT","color":"d4c5f9"},{"url":"https://api.github.com/repos/angular/angular/labels/P2:%20required","name":"P2: required","color":"fad8c7"},{"url":"https://api.github.com/repos/angular/angular/labels/type:%20feature","name":"type: feature","color":"EEEEEE"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-07-03T22:51:50Z","updated_at":"2015-07-20T20:50:50Z","closed_at":null,"body":"A common S/CSS technique when styling a component within a `:host` selector is using the existence of an attribute to drive style. For example, Polymer's [`<paper-button>`](https://elements.polymer-project.org/elements/paper-button) works something like this:\r\n\r\n```scss\r\n:host {\r\n  &[disabled] {\r\n    pointer-events: none;\r\n  }\r\n}\r\n```\r\n\r\nUnfortunately the only way to manipulate one own's attributes is a simple bindings:\r\n\r\n```scss\r\n:host {\r\n  &[is-disabled=\"true\"] {\r\n    pointer-events: none;\r\n  }\r\n}\r\n```\r\n\r\n```dart\r\n@Component(\r\n  host: const {\r\n    '[attr.is-disabled]': 'isDisabled'\r\n  }\r\n)\r\nclass FooComponent {\r\n  bool _isDisabled = false;\r\n  String get isDisabled => _isDisabled.toString();\r\n}\r\n```\r\n\r\nOr, inject an `ElementRef` and access `nativeElement` :unamused: \r\n\r\nBoth of these are OK workarounds, but also mean it's not trivial to use Polymer components that rely on the existence of an attribute (not a value).\r\n\r\nProposal\r\n---\r\n\r\nHave an alternative syntax for adding/removing attributes:\r\n\r\n```html\r\n<!-- 'attr-if' looks for a boolean instead of a String -->\r\n<button [attr-if.disabled]=\"isDisabled\"></button>\r\n```"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/123032491","html_url":"https://github.com/angular/angular/issues/2869#issuecomment-123032491","issue_url":"https://api.github.com/repos/angular/angular/issues/2869","id":123032491,"user":{"login":"mhevery","id":111951,"avatar_url":"https://avatars.githubusercontent.com/u/111951?v=3","gravatar_id":"","url":"https://api.github.com/users/mhevery","html_url":"https://github.com/mhevery","followers_url":"https://api.github.com/users/mhevery/followers","following_url":"https://api.github.com/users/mhevery/following{/other_user}","gists_url":"https://api.github.com/users/mhevery/gists{/gist_id}","starred_url":"https://api.github.com/users/mhevery/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mhevery/subscriptions","organizations_url":"https://api.github.com/users/mhevery/orgs","repos_url":"https://api.github.com/users/mhevery/repos","events_url":"https://api.github.com/users/mhevery/events{/privacy}","received_events_url":"https://api.github.com/users/mhevery/received_events","type":"User","site_admin":false},"created_at":"2015-07-20T20:50:50Z","updated_at":"2015-07-20T20:50:50Z","body":"shouldn't this be covered with existing syntax?\r\n\r\n`<div [attr.my-boolean]=\"exp\">`\r\n\r\n* If `exp` is `\"foo\"` then `<div my-boolean=\"foo\">`\r\n* If `exp` is `\"\"` then `<div my-boolean>`\r\n* If `exp` is `undefined` or `null` then `<div>`\r\n\r\n"}}