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 { }