Angularでは、ディレクティブとパイプを使って、HTMLテンプレートの動作や表示を柔軟に制御できます。
本章では、よく使われる*ngIfや*ngFor、カスタムディレクティブ、そして標準パイプの使い方について解説します。
目次
1. ディレクティブとは？
ディレクティブ（Directive）は、テンプレート内のDOM要素に特別な振る舞いを追加するためのAngular機能です。
簡単にいうと、「HTMLに動きを加える命令」と考えるとわかりやすいでしょう。
■ よく使う構造ディレクティブ：*ngIfと*ngFor
*ngIf：条件による表示切り替え
<div *ngIf="isLoggedIn"> ようこそ、ユーザーさん！ </div>*ngIfは、条件がtrueなら要素を表示し、falseならDOMから完全に削除します。
*ngFor：リストの繰り返し表示
<ul> <li *ngFor="let item of items">{{ item }}</li></ul>例えばitems = ['リンゴ', 'バナナ', 'オレンジ']の場合、それぞれのアイテムがリストとして出力されます。
2. カスタムディレクティブとは？
標準ディレクティブだけでなく、独自の動作をもったカスタムディレクティブを作成することもできます。
たとえば、特定の条件下で背景色を変えるようなディレクティブです。
■ 簡単なカスタムディレクティブ例
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) {
}
@HostListener('mouseenter') onMouseEnter() {
this.el.nativeElement.style.backgroundColor = 'yellow';
}
@HostListener('mouseleave') onMouseLeave() {
this.el.nativeElement.style.backgroundColor = null;
}
} ■ 使用例
<p appHighlight>マウスを乗せると背景が黄色に！</p>このように、HTML要素に独自の属性（セレクタ）を付与するだけで、カスタム動作を適用できます。
3. Angular標準パイプの使い方
パイプ（Pipe）は、テンプレート内でデータを変換・整形するための機能です。
パイプは{{ data | パイプ名 }}という形式で記述します。
■ よく使う標準パイプ
| パイプ名 | 用途 | 例 |
|---|---|---|
| date | 日付を整形 | {{ today | date:'yyyy/MM/dd' }} |
| uppercase | 英字を大文字に変換 | {{ name | uppercase }} |
| currency | 通貨表記に変換 | {{ price | currency:'JPY' }} |
■ 具体例
<p>現在の日時: {{ today | date:'short' }}</p>
<p>名前（大文字変換）: {{ name | uppercase }}</p>
<p>価格表示: {{ price | currency:'JPY':'symbol' }}</p>このように、パイプを使うと、TypeScriptコードを書かずにテンプレート上でデータ整形が可能になります。
まとめ
AngularのディレクティブはHTMLに動作を加え、パイプはデータ表示を加工する強力な仕組みです。*ngIfや*ngForは頻繁に使用され、パイプは日付や通貨などの表示フォーマットを整えるのに役立ちます。
