{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/9599","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/9599/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/9599/comments","events_url":"https://api.github.com/repos/angular/angular/issues/9599/events","html_url":"https://github.com/angular/angular/issues/9599","id":162286368,"number":9599,"title":"Proposal: Declarative Dynamic Components","user":{"login":"joelrich","id":4216919,"avatar_url":"https://avatars.githubusercontent.com/u/4216919?v=3","gravatar_id":"","url":"https://api.github.com/users/joelrich","html_url":"https://github.com/joelrich","followers_url":"https://api.github.com/users/joelrich/followers","following_url":"https://api.github.com/users/joelrich/following{/other_user}","gists_url":"https://api.github.com/users/joelrich/gists{/gist_id}","starred_url":"https://api.github.com/users/joelrich/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joelrich/subscriptions","organizations_url":"https://api.github.com/users/joelrich/orgs","repos_url":"https://api.github.com/users/joelrich/repos","events_url":"https://api.github.com/users/joelrich/events{/privacy}","received_events_url":"https://api.github.com/users/joelrich/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-06-25T15:30:24Z","updated_at":"2016-07-01T17:49:00Z","closed_at":null,"body":"**I'm submitting a ...**  (check one with \"x\")\r\n```\r\n[ ] bug report\r\n[x] feature request\r\n[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n```\r\n\r\n**Current behavior**\r\n\r\nAs discussed in #8817, there is currently no convenient way to render a dynamic component. ```viewContainerRef.createComponent``` is too low-level for most use cases and requires to implement the update and destroy hook manually. This likely leads to bugs as well as suboptimal performance.\r\n\r\n**Expected/desired behavior**\r\n\r\nI suspect that ```createComponent``` will mostly be used to render a dynamic component at a certain position of a template. If this assumption holds true, then the same behaviour could be achieved with html code like the following:\r\n\r\n```html\r\n<template [ngComponent]=\"componentClass\"\r\n\t[prop1]=\"propValue1\"\r\n\t[ngProperties]=\"propertyValues\">\r\n```\r\n\r\nWhen the code above is rendered, it would first resolve the component for the componentClass and instantiate the component. Then it would set all the regular properties. Since some properties may not be known at compile time, it would also be possible to provide an object with additional properties. At the end, the component is added directly to the DOM (without a wrapper element).\r\n\r\nThis could then also be used to render a list of dynamic components like this:\r\n\r\n```html\r\n<template\r\n\t*ngFor=\"let c of components\"\r\n\t[ngComponent]=\"c.componentClass\"\r\n\t[prop1]=\"c.propValue1\"\r\n\t[ngProperties]=\"c.propertyValues\">\r\n```\r\n\r\nWhenever the component class changes, the current component would replaced with a component instance of the new type.\r\n\r\nI have chosen ```<template>``` for the placeholder because the placeholder itself must not be added to the DOM. I am not sure if this is the ideal element for the placeholder though.\r\n\r\nThis proposal could also be used as a replacement for ngInclude (#7596 and #2753)."},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/230008312","html_url":"https://github.com/angular/angular/issues/9599#issuecomment-230008312","issue_url":"https://api.github.com/repos/angular/angular/issues/9599","id":230008312,"user":{"login":"zoechi","id":405837,"avatar_url":"https://avatars.githubusercontent.com/u/405837?v=3","gravatar_id":"","url":"https://api.github.com/users/zoechi","html_url":"https://github.com/zoechi","followers_url":"https://api.github.com/users/zoechi/followers","following_url":"https://api.github.com/users/zoechi/following{/other_user}","gists_url":"https://api.github.com/users/zoechi/gists{/gist_id}","starred_url":"https://api.github.com/users/zoechi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zoechi/subscriptions","organizations_url":"https://api.github.com/users/zoechi/orgs","repos_url":"https://api.github.com/users/zoechi/repos","events_url":"https://api.github.com/users/zoechi/events{/privacy}","received_events_url":"https://api.github.com/users/zoechi/received_events","type":"User","site_admin":false},"created_at":"2016-07-01T17:49:00Z","updated_at":"2016-07-01T17:49:00Z","body":"@joelrich I didn't intend to provide a fzll-featured implementation. I just tried to demonstrate how it can be done. Bindings are easy to add but the inputs need to be generic in some way because the input names have to be defined statically on the wrapper element.\r\n\r\n@cmiagssh the post contains updated code for `ViewContainerRef.createComponent as well."}}
{"actor":{"display_login":"zoechi"}}