{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/8968","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/8968/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/8968/comments","events_url":"https://api.github.com/repos/angular/angular/issues/8968/events","html_url":"https://github.com/angular/angular/issues/8968","id":158197232,"number":8968,"title":"Proposal: add `@BooleanInput` and `@NumberInput` decorators","user":{"login":"jelbourn","id":838736,"avatar_url":"https://avatars.githubusercontent.com/u/838736?v=3","gravatar_id":"","url":"https://api.github.com/users/jelbourn","html_url":"https://github.com/jelbourn","followers_url":"https://api.github.com/users/jelbourn/followers","following_url":"https://api.github.com/users/jelbourn/following{/other_user}","gists_url":"https://api.github.com/users/jelbourn/gists{/gist_id}","starred_url":"https://api.github.com/users/jelbourn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jelbourn/subscriptions","organizations_url":"https://api.github.com/users/jelbourn/orgs","repos_url":"https://api.github.com/users/jelbourn/repos","events_url":"https://api.github.com/users/jelbourn/events{/privacy}","received_events_url":"https://api.github.com/users/jelbourn/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/angular/labels/hotlist:%20angular-core-team","name":"hotlist: angular-core-team","color":"d4c5f9"},{"url":"https://api.github.com/repos/angular/angular/labels/hotlist:%20material2","name":"hotlist: material2","color":"d4c5f9"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2016-06-02T17:34:34Z","updated_at":"2016-06-15T00:08:54Z","closed_at":null,"body":"When building reusable components, using boolean properties, such as `checked`, `disabled`, `readyonly`, etc., is extremely common. This ends up looking like this:\r\n```ts\r\nclass CoolCheckbox {\r\n  private _checked: boolean;\r\n\r\n  @Input()\r\n  get checked() {\r\n    return this._checked;\r\n  }\r\n\r\n  set checked(v: boolean) {\r\n    // Is \"checked\" if *any* value is present other than `false` or `\"false\"`.\r\n    this._checked = value != null && `${value}` !== 'false';\r\n  }\r\n}\r\n```\r\nThis is a *lot* of boilerplate to create a simple boolean bound property, and something that needs to be done for *every* boolean `@Input`. The same problem also applies to `number` inputs.\r\n\r\nA simple approach for TypeScript users might be to create their own decorator, something like\r\n```ts\r\n@Input() @BooleanField() checked: boolean;\r\n```\r\n\r\nUnfortunately, this is incompatible with using the offline-compiler, as the presence of user-defined decorators prevents tree-shaking. As such, this seems to be something that should really be built into the framework itself. This could look something like:\r\n```ts\r\nclass CoolCheckbox {\r\n  @BooleanInput() checked: boolean;\r\n}\r\n```\r\n\r\n@pkozlowski-opensource has encountered the same friction for ngBootstrap.\r\n\r\ncc @tbosch @mhevery "},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/226053298","html_url":"https://github.com/angular/angular/issues/8968#issuecomment-226053298","issue_url":"https://api.github.com/repos/angular/angular/issues/8968","id":226053298,"user":{"login":"alexeagle","id":47395,"avatar_url":"https://avatars.githubusercontent.com/u/47395?v=3","gravatar_id":"","url":"https://api.github.com/users/alexeagle","html_url":"https://github.com/alexeagle","followers_url":"https://api.github.com/users/alexeagle/followers","following_url":"https://api.github.com/users/alexeagle/following{/other_user}","gists_url":"https://api.github.com/users/alexeagle/gists{/gist_id}","starred_url":"https://api.github.com/users/alexeagle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexeagle/subscriptions","organizations_url":"https://api.github.com/users/alexeagle/orgs","repos_url":"https://api.github.com/users/alexeagle/repos","events_url":"https://api.github.com/users/alexeagle/events{/privacy}","received_events_url":"https://api.github.com/users/alexeagle/received_events","type":"User","site_admin":false},"created_at":"2016-06-15T00:08:54Z","updated_at":"2016-06-15T00:08:54Z","body":"@jelbourn I'm adding a feature for `tsickle` so some decorators do not get re-written as annotations. So your `@BooleanField` could be preserved along with its runtime behavior, and still we can tree-shake the other decorators.\r\nMaybe this would not help because then any component that uses an `@BooleanField` ends up in the final application even if unused..."}}
{"actor":{"display_login":"alexeagle"}}