angular - Angular2 stateless components style -

what doing:

i'm coding new app using stateless components angular 2.

what want do

i want create generic component list contain repeated widgets. there can few types of them:

• simple item
• habit widget item
• another widget item

so can create list of habits, list of users etc. , it's not table. can list of widget.

what doing reach it.

in statefull view html put list component , using web component's transclusion set type of widget should repeated inside.

statefull view

<list [items]="habits">   <div elements>     <list-item *ngfor="#item of habits"                [item]="item"></list-item>   </div> </list> 

list component

<ng-content select="[elements]"></ng-content> 

what's problem solution

• i need pass habits object 2 different places cause difficult find problem if don't pass same.
• need handle ngfor app view. i'm doing list component should handle itself.

conclusion

is there better solution how can put list component inside statefull view html , decide there type of widgets should contain?

of course create widgets.

i find strange create dom elements in 1 component , reproduce them in - should passing model down component tree (ideally smaller , smaller parts of model) using attributes. in particular example don't see 2 genuinely different parts of dom, not use nested components @ all.