Instance Angular 2 Component Two times

Question

I\'m trying to learn Angular 2, so I was making some hello world examples. Here is my code:

boot.ts

import {bootstrap}          


        

Answer 1

I have tested this. You can not make more than one Angular 2 Main Components with the same name. But you can make as many as you want for non-Main components.

How can main and non-main component are differentiated?

Main component is the one that gets bootstrapped.

Have a look of the screen shot.

My main component called: Which I made it twice in the HTML:

  Loading...
  Loading...

As you can see, there is a loading at the end of the bottom of the picture.

However, it works for non-main components. As you can see my-hero-detail components can be created as many as I can.

{{title}}


    

        

            

                My Heroes
            
            

                

                    

                        {{hero.id}} {{hero.name}}
                    
                
   
            
        
      
    
    


    
    

My Hero Detail Component:

import {Component} from 'angular2/core';
import {Hero} from '../hero';
@Component({
    selector: 'my-hero-detail',
    templateUrl: 'app/hero-detail/hero-detail.html',
    inputs: ['hero'],
})

export class HeroDetailComponent {
    public hero: Hero;
}