Angular2 for TypeScriptのお勉強-sample(3)【clickしたら挨拶が変わるtoggleClick】
今日2回目の更新で、いっきにこのまま月曜まで一人ハッカソンやろうかな。今年最初の猛暑日みたいです。
フロントエンドエンジニア芸人もりたけんじの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は
でわーまたー
