<p dir="auto">I'm submitting a<br>
[X] feature request</p>
<p dir="auto">I have a component which provides some generic business logic. Let's say:</p>
<ul dir="auto">
<li>CRUD functionality</li>
<li>Productmanagement (product catalogue)</li>
<li>Cross department business management  (separate layout for each department)</li>
<li>...</li>
</ul>
<p dir="auto">Depending on a condition I want to show a layout (template) which is specific for a type of product, related to the user department, etc.<br>
Right now I can't load a template on the fly for doing this.<br>
I have read through all the issues here and on stackoverflow for possible ways on doing this.</p>
<p dir="auto">The most practicabel way is the ngTemplateLayout. But in real life if you have dozens of different layout types, it <strong>blows up your template file and make unmaintenable.</strong></p>
<p dir="auto">If you use the dynamiccomponentloader which is the most recommend way by the angular team, it adds an <strong>huge overhead of code</strong> for generating the component dynamically, even if the functionality for component and module creation is encapsulated.  In addition <strong>it doesn't allow a real generic solution</strong>, because in the ngModule which has also be created dynamically you have to provide all imports, exports, providers, ... to make the component work. So if you don't want to have a huge overhead in your generic component builder, you have to implement a generic componentbuilder for each "type" of your form types. Which is not practicable and increases the danger of recoding all after the next angular release</p>
<p dir="auto"><strong>Expected behavior</strong><br>
<strong>Provide a way of loading a template dynamically for a component</strong>. As it is available in Angular 1<br>
Please don't be dogmatic on this issue and consider supporting real world requirements in Angular 2<br>
Thanks</p>
<p dir="auto"><strong>Note: for support questions, please use one of these channels:</strong> <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question">https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question</a>. This repository's issues are reserved for feature requests and bug reports.</p>
<ul dir="auto">
<li>*<em>I'm submitting a ... *</em><br>
[X] bug report<br>
[ ] feature request<br>
[ ] support request =&gt; Please do not submit support request here, see note at the top of this template.</li>
<li><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
I report a bug</li>
<li><strong>What is the current behavior?</strong><br>
I have a class, which has 2 properties with <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/input/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/input">@input</a>() annotation(or decorator).<br>
I extend it with a component and I can use it as I expect it, but if I define a property for my component the input values become undefined.</li>
<li><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem</strong> via<br>
<a href="https://plnkr.co" rel="nofollow">https://plnkr.co</a> or similar (you can use this template as a starting point: <a href="http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5" rel="nofollow">http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5</a>).<br>
Here is my repo: <a href="https://github.com/tamasfoldi/TypewritingApp/commits/game">https://github.com/tamasfoldi/TypewritingApp/commits/game</a> If you run this in the console, you can see undefined logs. Waypoint's posx and posy are undefined but figure posx and posy are not, and if I remove the figurecomponent from the waypointcomponent the input values become correct again.</li>
<li><strong>What is the expected behavior?</strong><br>
It should not become undefined</li>
<li><strong>What is the motivation / use case for changing the behavior?</strong></li>
<li><strong>Please tell us about your environment:</strong></li>
<li>Angular version: 2.0.0-beta.7</li>
<li>Browser: Chrome 49.0.2623.87 m</li>
<li>Language: TypeScript 1.8.7</li>
<li><strong>Other information</strong> (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)</li>
</ul>
<p dir="auto">Maybe it is a Typescript related issue, I dont know.</p>