Angular Directives

debounce.directive.ts

import {
  Directive,
  Input,
  OnDestroy,
  EventEmitter,
  Output,
} from '@angular/core';
import { NgModel } from '@angular/forms';
import { Subscription, Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Directive({
  selector: '[ngModel][debounce]',
  providers: [NgModel],
})
export class DebounceDirective implements OnDestroy {
  private sink = new Subscription();
  @Input() time = 400; // NOTE: milliseconds
  @Output() debounce = new EventEmitter<any>(true);
  private debouncer: Observable<any>;

  constructor(private model: NgModel) {}

  ngOnInit() {
    this.debouncer = this.model.control.valueChanges.pipe(
      debounceTime(this.time),
      distinctUntilChanged(),
    );
    this.sink.add(
      this.debouncer.subscribe(a => {
        this.debounce.emit(this.model.control.value);
      }),
    );
  }

  ngOnDestroy() {
    this.sink.unsubscribe();
  }
}

focus-on-init.directive.ts

import { Directive, ElementRef, AfterViewInit } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
  selector: '[focusOnInit]',
  providers: [NgModel],
})
export class FocusOnInitDirective implements AfterViewInit {
  private readonly allowedTypes = ['text', 'date', 'number', 'tel'];

  constructor(private el: ElementRef<HTMLInputElement>) {}

  ngAfterViewInit() {
    if (
      !(this.el.nativeElement instanceof HTMLInputElement) ||
      !this.allowedTypes.includes(this.el.nativeElement.type)
    ) {
      console.error(
        `The focusOnInput directive must attach to an HTMLInputElement of types: ${this.allowedTypes.join(
          ', ',
        )}`,
      );
    }

    setTimeout(() => {
      this.el.nativeElement.focus();
    });
  }
}