● Angularで2度押し禁止ボタンをカスタムディレクティブで作成する

html

次のコンポーネントの HTML でボタンを次のようにします

<button type="button">送信する</button>

　↓ （ appOnClickDisable="1" を追加 ）

<button
    appOnClickDisable="1"
    type="button" >
    送信する
</button>

カスタムディレクティブを作成します app/directives/app-on-click-disable.directive.ts

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

 @Directive({
  selector: '[appOnClickDisable]'
})
export class AppOnClickDisableDirective {
  @Input() appOnClickDisable: number;
  constructor(
    private renderer: Renderer2, 
  ) { }
  @HostListener('click', ['$event']) onClick(event) {
    console.log( 'AppOnClickDisableDirective clicked' );
    if ( this.appOnClickDisable == 1 ){
      event.target.disabled = true;
    }
  }
}

app.module.ts　で読み込みます app/app.module.ts

import { AppOnClickDisableDirective } from './directives/app-on-click-disable.directive';

@NgModule({
  declarations: [
    AppComponent,
    AppOnClickDisableDirective,  // 追加
  ],

以上で一度クリックするとボタンが disabled になります。 （　disabled解除は app-on-click-disable.directive.ts ソース内に実装する必要があります。）