{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/507","labels_url":"https://api.github.com/repos/angular/angular/issues/507/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/507/comments","events_url":"https://api.github.com/repos/angular/angular/issues/507/events","html_url":"https://github.com/angular/angular/issues/507","id":56107352,"number":507,"title":"Support creating view variables in templates","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},"labels":[{"url":"https://api.github.com/repos/angular/angular/labels/%23core","name":"#core","color":"bfdadc"},{"url":"https://api.github.com/repos/angular/angular/labels/%23core/compiler","name":"#core/compiler","color":"bfdadc"}],"state":"open","locked":false,"assignee":{"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},"milestone":{"url":"https://api.github.com/repos/angular/angular/milestones/15","labels_url":"https://api.github.com/repos/angular/angular/milestones/15/labels","id":958989,"number":15,"title":"M4: Basic Apps","description":"The goal of this sprint is to enable developers a pain free way to build apps on top of Angular2.\r\n\r\n- [ ] publish JS to NPM #364\r\n  - [ ] Have an in browser AtScript mode with minimal js files\r\n  - [ ] Have a singles ES5 dev/prod script\r\n- [ ] publish Dart to pub\r\n- [ ] template references (var/#) #507\r\n- [ ] Special property bindings\r\n  - [ ] class #505\r\n  - [ ] hidden #506\r\n- [ ] Template Loading\r\n  - [ ] HTML #419\r\n  - [ ] CSS #421","creator":{"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},"open_issues":9,"closed_issues":0,"state":"open","created_at":"2015-01-30T22:49:49Z","updated_at":"2015-02-03T19:33:06Z","due_on":null,"closed_at":null},"comments":2,"created_at":"2015-01-31T01:50:11Z","updated_at":"2015-02-03T23:17:49Z","closed_at":null,"body":"```\r\n<button (click)=\"myDiv.hidden = !myDiv.hidden\">toggle</button>\r\n<div var-my-div>see me</div>\r\n```\r\n\r\nalt syntax: `<div #my-div>`\r\n\r\nThe above code allows creation of view variable `myDiv` which should than be injected and available for use as shown.\r\n\r\nPointers to get started:\r\n- [View.setLocal()](https://github.com/angular/angular/blob/master/modules/core/src/compiler/view.js#L71) for setting the value.\r\n- [ProtoView.variableBindings](https://github.com/angular/angular/blob/master/modules/core/src/compiler/view.js#L71)\r\n- [PropertyBindingParser.process](https://github.com/angular/angular/blob/master/modules/core/src/compiler/pipeline/property_binding_parser.js#L43)\r\n\r\nSteps needed:\r\n1. Compiler extracts the `var` and `#` syntax from the template\r\n1. make sure that the var information gets into `ProtoView`\r\n1. Assign element into the variable during `ProtView` to `View` creation."},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/72757477","html_url":"https://github.com/angular/angular/issues/507#issuecomment-72757477","issue_url":"https://api.github.com/repos/angular/angular/issues/507","id":72757477,"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},"created_at":"2015-02-03T23:17:49Z","updated_at":"2015-02-03T23:17:49Z","body":"```\r\n<input #i value=\"works\">\r\n<div>{{i.value}}<div>\r\n```"}}