{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/2721","labels_url":"https://api.github.com/repos/angular/angular/issues/2721/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/2721/comments","events_url":"https://api.github.com/repos/angular/angular/issues/2721/events","html_url":"https://github.com/angular/angular/issues/2721","id":90697340,"number":2721,"title":"Proposal: make use of native dom elements in templates explicit","user":{"login":"tbosch","id":690815,"avatar_url":"https://avatars.githubusercontent.com/u/690815?v=3","gravatar_id":"","url":"https://api.github.com/users/tbosch","html_url":"https://github.com/tbosch","followers_url":"https://api.github.com/users/tbosch/followers","following_url":"https://api.github.com/users/tbosch/following{/other_user}","gists_url":"https://api.github.com/users/tbosch/gists{/gist_id}","starred_url":"https://api.github.com/users/tbosch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tbosch/subscriptions","organizations_url":"https://api.github.com/users/tbosch/orgs","repos_url":"https://api.github.com/users/tbosch/repos","events_url":"https://api.github.com/users/tbosch/events{/privacy}","received_events_url":"https://api.github.com/users/tbosch/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-06-24T14:44:06Z","updated_at":"2015-07-02T07:04:54Z","closed_at":null,"body":"# Update by @mhevery\r\n\r\nWe should use explicit binding as such,\r\n```\r\n<input #user=\"element\">{{user.value}}\r\n```\r\n\r\n## Proposal\r\n\r\nRight now, users can write the following:\r\n```\r\n<input #user>{{user.value}}\r\n```\r\n\r\nWhich will just echo the input value in the text node. Looking at the template, it is not obvious, that the value of `user` is a DOM element.\r\n\r\n\r\nThis issue proposes the following syntax:\r\n```\r\n<input #user>{{user.$native.value}}\r\n```\r\nThe value of the variable `user` would then be an `ElementRef` (which would have a getter `$native` to get the actual DOM elements), instead of the DOM element itself.\r\n\r\n## Why\r\n\r\nSome users want to prevent direct access to the DOM in their templates:\r\n\r\n- Users who plan to use WebWorkers in the future, as synchronous reads don't work\r\n- Users that want to prerender on the server (i.e. their app runs on the server and client), as the native elements differ on the server and on the client\r\n\r\nFor these users, it is important to manually (e.g. in a code review) and automatically check that the template does not reference a DOM element. New users of Angular would also benefit from this explicit usage, as it would reveal a performance problem in the above code (it dirty checks a property on a DOM element, which is slow).\r\n\r\nThese users still need a way to reference elements via variables (e.g. to query for them or hand them into methods on the component), and would probably expect to get an `ElementRef` as value of the variable (see e.g. #2461). `ElementRef` as value seems like a good idea as all Angular APIs use it as well to reference elements (e.g. the `Renderer`, `ViewManager`, `DynamicComponentLoader`.\r\n\r\n/cc @matanlurey \r\n/cc @mhevery "},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/117936848","html_url":"https://github.com/angular/angular/issues/2721#issuecomment-117936848","issue_url":"https://api.github.com/repos/angular/angular/issues/2721","id":117936848,"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-02T07:04:54Z","updated_at":"2015-07-02T07:04:54Z","body":"- The syntax should be `<input #user=\"element\">{{user.value}}` not `<input #user>{{user.$native.value}}` since `user` may not have `$native` field if it is an angular component.\r\n\r\n- I am a bit on fence on this, but I think we can give this a try, and if we don't like it we can roll back. I don't see a lot of down side to giving it a try and collecting more data."}}