Angular2のコンポーネント

Angular2でコンポーネントapp.modules.tsにコンポーネントを登録しておけば利用できるようになる。

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <my-h1 myText="h1"></my-h1>
    <my-h2 myText="h2"></my-h2>
  `
})
export class AppComponent {

}

h1.component.ts

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'my-h1',
  template: `
    <h1>{{myText}}</h1>
  `
})
export class h1Component {
  @Input() myText:String;
}

h2.component.ts

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'my-h2',
  template: `
    <h2>{{myText}}</h2>
  `
})
export class h2Component {
  @Input() myText:String;
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
import { h1Component } from './h1.component';
import { h2Component } from './h2.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
  ],
  declarations: [
    AppComponent,
    h1Component,
    h2Component
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }