[Angular] src, srcset を設定するカスタムDirectiveを作成する

カスタムコンポーネントは作っても、カスタムディレクティブは作ったことないという人も多いのではないでしょうか。

あんまり使う機会ってありませんが、例えば src, srcset を毎回Attributeに設定するのってだるいですよね。そういうときにカスタムディレクティブは役に立ちます

HTMLコードの Before After

こんな感じになります↓

.html

<img src="/assets/images/icons/test/test.png" srcset="/assets/images/icons/test/[e-mail] 2x, /assets/images/icons/test/[e-mail] 3x">

↓

.html

<img appSrc="/assets/images/icons/test/test.png">

今回作成したDirective

.ts

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appSrc]',
})
export class SrcDirective {
  constructor(
    private el: ElementRef,
  ) {}

  @Input() set appSrc(path: string) {
    this.el.nativeElement.setAttribute('src', path);
    const pathWithoutExtension = path.replace(/\.[^\.]*$/, '');
    const extension = path.substring(path.lastIndexOf('.'));
    this.el.nativeElement.setAttribute('srcset', `${pathWithoutExtension}@2${extension} 2x, ${pathWithoutExtension}@3${extension} 3x`);
  }
}

仕様として、必ず 2x, 3x のものは、〇〇@2x.png のようなファイル名にすることを義務付けていはいますが、これでめんどうな src, srcset を簡単に速くかけます。

まとめ

Directive なんかよくわからないけど避けてきた人もいるのではないでしょうか。
今回の例のように、実は超簡単に強力なコードがかけます。