Angular最速マスターへの道 第8章
Angular最速マスターへの道
もう第8章でございます。
第8章目次
- HostBinding
- HostListener
- Animations
HostBinding
これまでComponentやDirective自体、つまりホスト要素にstyleやclass、はたまたプロパティを指定することはしていませんでしたよね。
HostBindingを使うとそれができるというわけです。
以前第5章でstyleとclassのバインディングについてご紹介しましたが、それと少し動きは似ているかなと思います。
言葉だけではわかりにくいと思いますので早速コードで書いてみましょう。
export class HostBindingComponent {
@HostBinding('style.display') display: string = 'none';
@HostBinding('class.test-class') testClass: boolean = true;
}
styleとclassのBindingです。
上のように書くとイメージ的には以下のように指定したのと同じになります。
styleだけで言えばCSSに:host {display: none;}と書いているのと同じです。
<host-binding style="dislay: none;" class="test-class"></host-binding>
それぞれプロパティとして定義しているので、
何かアクションが起こった時などにこの値を随時変えることができるので便利です。
また、このHostBindingをInputデコレータと併用することもできます。
@HostBindingの前に@Input()をつけるだけなので簡単です。
styleとclass以外のプロパティも書き方はほぼ同じですが、ComponentやDirectiveに定義するプロパティ名がそれと同じ名前にならないようにだけ注意が必要です。
DEMOにはInputデコレータと併用したものをあげてみました。
HostBinding DEMO
HostListener
こちらもホスト要素に対するもので、イベントを監視することができます。
早速Componentに設定したものを書いてみましょう。
export class HostListenerComponent {
@HostListener('click')
public onClick() {
console.log('クリックされました！');
}
}
上記のようにするとComponentのテンプレート内のどこをclickしてもメソッド内の処理が発動します。
このHostListenerもイベント名とメソッド名が同じならないようにしておくのが望ましいです。
また、イベントの値を引数として持ってくることもできます。
clickイベントの場合は以下のように設定できます。
export class HostListenerComponent {
@HostListener('click', ['$event'])
public onClick(event: MouseEvent) {
console.log('クリックされました！');
}
}
個人的にですが、HostListenerはDirectiveに使いやすいです。
たとえば<input>はfocusやblurといったイベントの種類が多いので、その分HostListenerを使用する頻度・メリットも大きいです。
ということでDEMOにはそのDirectiveを作成してみました。イベントが起こる度に独自イベントを発火させています。
HostListener DEMO
おまけとしてHostBindingとHostListenerの両方を入れ込んだ画像選択Directiveを作ってみました。
画像は表示するだけでどこかに保存されたりはしませんので、試しに操作してみてください！
おまけ DEMO
おまけのコード
Animations
AnimationsはCSSアニメーションをComponentのメタデータとして設定するものです。
これは文章だけで説明するのが非常に難しいところなので、書いてしまいましょう。
使用する前にAppModuleにアニメーション用のモジュールを読み込む必要があるので忘れずに以下の設定をしてください。
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
// 省略
BrowserAnimationsModule
]
})
export class AppModule { }
それでは試しにブロックが横にスライドするアニメーションを設定してみましょう。
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
// 省略
animations: [
trigger('slide', [
state('inactive', style({
transform: 'translateX(200px)'
})),
state('active', style({
transform: 'translateX(0px)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
})
export class AnimationsComponent {
public state: string = 'inactive';
public toggleState(): void {
this.state = this.state === 'inactive' ? 'active' : 'inactive';
}
}
<div class="color-block" [@slide]="state"></div>
<button (click)="toggleState()">Click Me</button>
slideというアニメーションを設定し、プロパティstateが特定の値になった時に指定されたCSSを適用する、といった処理です。
stateの値はボタンで切り替えている感じですね。
ちなみにこのような表示になります。ちょっと画像だと動作がかくかくして見えてしまってますが、実際は滑らかにスライドします。
実現させたいアニメーションによって設定の仕方が違うので、割と自由が効くかと思います。
CSSアニメーションを自由なタイミングで設定できる、という風に捉えるとわかりやすいでしょうか。
もちろんそのままclassなどでも実現はできますが、あらかじめComponentに書いておくと後でわかりやすいかなと個人的には思います。
DEMOにいくつか作ったAnimationsがありますので遊んで見てください！
あるボタンを押すと夢の国の住人が荒ぶります←
Animations DEMO
まとめ
今回は表示や動きに関わるものの紹介でした。
HostBinding / HostListenerに関しては個人的にも良く使っているデコレータなので、覚えておくと非常に便利です。
私もAnimationsは簡単なものしかまだ作ったことがないので、これから複雑なものも作成していこうと思います。
次章予告
よく使うであろう基本的な部分は今回の章で終了です！
もうそろそろ飽きて来ましたでしょうし←
次章はこれまでの章で使ったテクニックをおさらいしながら、何か役に立つものを作ってみようかと考えています！
参考
Angular最速マスターへの道シリーズはGitHubに公開しています。
