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 { }
タグ:Angular2
【Angularの最新記事】
- Angularの構造ディレクティブ(St..
- AngularのRenderer2でDO..
- AngularでネイティブのDOMにアク..
- AngularでDirectiveの作成..
- Angularでカスタムパイプを作る
- AngularでURLのパラメーターを取..
- AngularでN文字以上をトリミング
- AngularでBehaviorSubj..
- Angularで「WARNING .. ..
- angularでdebounce
- angular cliで作ったプロジェク..
- Angular2でformControl..
- Angular2のloadChildre..
- ElementRef - @angula..
- Angular 2のng2-dragul..
- Angular 2のDatePipe
- Angular2のRouting2
- Angular2のRouting
- Angular2のライフサイクルメソッド..
- Angular2のサービス