angular - How to instantiate and render Angular2 components? -

i'm trying learn angular2 (and typescript) , having followed quick start guide , few unofficial tutorials i've made progress have simple application components.

i understand process of binding model data dom element using bracketed notation in templates: <h1>{{title}}</h1>

what i'm struggling understand how dynamically instantiate new component within typscript code, , render in dom.

if import component file , instantiate new one, trigger component's constructor in model. angular2 allow me render this, or append component component or queried div element?

import {listcomponent} './list.component'; ... export class mainappcomponent {      buttonclicked(){         // i'm creating new list component. proper way render within mainappcomponent?         this.list = new listcomponent();     } } 

you missing many concepts angular2. in angular not instantiate components , add them dom, angular takes care of everything, pattern :

• having parent component has template
• having child component has selector
• you import , add child component selector inside parent component template
• the child component rendered inside parent component

there many things learning questioning here, need follow angular2 tutorial here, , angular2 basics docs here