フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

Angular2 for TypeScriptのお勉強-sample(3)【clickしたら挨拶が変わるtoggleClick】

Angular2 for TypeScriptのお勉強-sample(3)【clickしたら挨拶が変わるtoggleClick】

今日2回目の更新で、いっきにこのまま月曜まで一人ハッカソンやろうかな。今年最初の猛暑日みたいです。

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

こういうのみたりこういうのみたりしてました。

なるほどなと思ったのは、

今回下のようなコードかいたのです。
これはclickしたらコンバンワかこんにちわを判定して変えるものです。

@Component({
selector: 'my-app',
template: `<h1>{{greeting}}</h1><div>
<button (click)="getGreetingEvening()">click</button></div>    `
})
export class AppComponent {
greeting: string;
constructor(){
this.getGreeting();
}
getGreeting(){
this.greeting = "ohayou";
}
getGreetingEvening() {
if(this.greeting == 'ohayou'){
this.greeting = "konbanwa";
} else {
this.greeting = "ohayou";
}
}
}

onClick属性でやっていたら動かなかったのですがみてのとおり(click)としなくてはいけないのですね。
あと2回目ででてきたアプリケーションロジックには何も書きませんでしたが、今回templateにアクションごとに描画させたくて
greetingを変えることをやってみました。
ReactでいうrenderのJSXですねtemplateは

今回のコード

でわーまたー

次のAngular2記事へ

他のAngualr2記事

他のjavascript記事