{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/2693","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/2693/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/2693/comments","events_url":"https://api.github.com/repos/angular/angular/issues/2693/events","html_url":"https://github.com/angular/angular/issues/2693","id":90337199,"number":2693,"title":"append DOM elements into component view","user":{"login":"rolandjitsu","id":1479737,"avatar_url":"https://avatars.githubusercontent.com/u/1479737?v=3","gravatar_id":"","url":"https://api.github.com/users/rolandjitsu","html_url":"https://github.com/rolandjitsu","followers_url":"https://api.github.com/users/rolandjitsu/followers","following_url":"https://api.github.com/users/rolandjitsu/following{/other_user}","gists_url":"https://api.github.com/users/rolandjitsu/gists{/gist_id}","starred_url":"https://api.github.com/users/rolandjitsu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rolandjitsu/subscriptions","organizations_url":"https://api.github.com/users/rolandjitsu/orgs","repos_url":"https://api.github.com/users/rolandjitsu/repos","events_url":"https://api.github.com/users/rolandjitsu/events{/privacy}","received_events_url":"https://api.github.com/users/rolandjitsu/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-06-23T09:40:35Z","updated_at":"2016-04-01T00:06:00Z","closed_at":"2015-07-20T20:32:06Z","body":"I've asked a similar question [before](https://github.com/angular/angular/issues/2491) and I also looked at [#2476](https://github.com/angular/angular/issues/2476), but I still do not get how you append a DOM element into a component view (or a directive).\r\n\r\nSay I have the following component:\r\n```js\r\nimport { Component, View } from 'angular2/annotations';\r\nimport { ViewContainerRef } from 'angular2/core';\r\n\r\nimport { supportsNativeShadowDOM } from 'common/shadow_dom';\r\nimport { IconStore } from 'app/services';\r\n\r\n@Component({\r\n\tselector: 'icon',\r\n\tproperties: [\r\n\t\t'src'\r\n\t]\r\n})\r\n\r\n@View({\r\n\ttemplateUrl: 'app/components/icon/icon.html', // remove once the relative resolve of styles will work properly\r\n\tstyles: [\r\n\t\t'@import \"icon.css\";'\r\n\t]\r\n})\r\n\r\nexport class Icon {\r\n\tel;\r\n\tconstructor(private viewContainer: ViewContainerRef, public icon: IconStore) {\r\n\t\tthis.el = this.viewContainer.element.domElement;\r\n\t}\r\n\tset src(src: string) {\r\n\t\tlet that: Icon = this;\r\n\t\tlet root;\r\n\t\tif (supportsNativeShadowDOM) root = this.el.shadowRoot;\r\n\t\telse root = this.el; \r\n\t\tthis.icon.get(src).then((svg) => {\r\n\t\t\troot.appendChild(svg);\r\n\t\t});\r\n\t}\r\n}\r\n```\r\nThis works fine, but is there an API that would allow me to append the DOM element inside the view without me having to check if there is a `shadowRoot` or not?"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/204180983","html_url":"https://github.com/angular/angular/issues/2693#issuecomment-204180983","issue_url":"https://api.github.com/repos/angular/angular/issues/2693","id":204180983,"user":{"login":"bwells78","id":838784,"avatar_url":"https://avatars.githubusercontent.com/u/838784?v=3","gravatar_id":"","url":"https://api.github.com/users/bwells78","html_url":"https://github.com/bwells78","followers_url":"https://api.github.com/users/bwells78/followers","following_url":"https://api.github.com/users/bwells78/following{/other_user}","gists_url":"https://api.github.com/users/bwells78/gists{/gist_id}","starred_url":"https://api.github.com/users/bwells78/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bwells78/subscriptions","organizations_url":"https://api.github.com/users/bwells78/orgs","repos_url":"https://api.github.com/users/bwells78/repos","events_url":"https://api.github.com/users/bwells78/events{/privacy}","received_events_url":"https://api.github.com/users/bwells78/received_events","type":"User","site_admin":false},"created_at":"2016-04-01T00:06:00Z","updated_at":"2016-04-01T00:06:00Z","body":"I'm curious about your hacky way (or the best way if someone can help us)... I am building an app that needs to host legacy content driven by jQuery UI widgets.  \r\n\r\nOn first load of a legacy page, the widget loads correctly and inserts all its needed DOM elements.  If I then switch to another page (route change) and then go back, I want for the previously loaded DOM to return (its state to be persisted).  But all the markup is gone since I'm intentionally preventing a full re-init of the jquery widget.  \r\n\r\nDefinitely a collision of philosophies between Angular and jQuery and I'm still learning Angular's approach, but hoping there is a way to pull this off efficiently- "}}