How to create and display Angular2 components?

Question

I am trying to learn angular2 (and Typescript) and, following a quick start guide and a few informal tutorials, I made progress to have a simple application with some components.

I understand the process of binding model data to a DOM element using the notation enclosed in square brackets in my templates: <h1>{{title}}</h1>

What I'm trying to understand is how I could dynamically create a new component from my Typscript code and then display it in the DOM.

If I import the component into my file and create a new instance, this will call the component constructor in the model. Can angular2 provide this or add a component to another component or the requested div element?

 import {ListComponent} from './list.component'; ... export class MainAppComponent { buttonClicked(){ // I'm creating a new list component. What is the proper way to render it within this MainAppComponent? this.list = new ListComponent(); } } 

Answer 1

You are missing many of the concepts from Angular2 . In Angular, you do not create the components themselves and do not add them to the DOM, Angular takes care of everything, the template:

• The presence of a parent component with a template
• Presence of a child component with a selector
• You import and add a child component selector inside the parent element of the component template
• The child component is displayed inside the parent component

There are too many things to learn, you need to follow the Angular2 tutorial HERE and then the Angular2 basics docs HERE