Angualr 2 Component

Component in Component

Use component in component

For Angular 2 basic, please look Angular 2 GetStarted

Steps

Prepare Components
Add Components to @NgModule

Prepare Components

Sub
sub.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'sub-component',
    template: '<div>I am Sub</div>'
})

export class SubComponent {
}

app.component.ts

import { Component } from '@angular/core';

import { SubComponent }   from './sub.component';

@Component({
    selector: 'app',
    templateUrl: './app/template/app.html',
    styles: ['./app/styles/app.css']
})
export class AppComponent {
    title = "Home";
}

app.html

<h1>Hello Angular App {{title}}</h1>
Sub Component Test
<sub-component></sub-component>

app.html includes sub component tag named sub-component

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }   from './app.component';
import { SubComponent }   from './sub.component';


@NgModule({
    imports:      [ BrowserModule ],
    declarations: [ AppComponent, SubComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Results