Two angular directives for 2 way binding without ngModel - make sure to declare in app module

two-way-binder.directive.ts

// sample usage: https://stackblitz.com/edit/angular-ivy-lvhg5u?file=src%2Fapp%2Ftwo-way-binder.directive.ts
// <input type="text" id="sample" [(appTwoWayBinder)]="name" />

import {
  Directive,
  EventEmitter,
  HostBinding,
  HostListener,
  Input,
  OnChanges,
  Output,
  SimpleChanges,
} from '@angular/core';

@Directive({
  selector: '[appTwoWayBinder]',
})
export class TwoWayBinderDirective implements OnChanges {
  @Input('appTwoWayBinder') model: any;
  @Output('appTwoWayBinderChange') update = new EventEmitter<any>();

  @HostBinding('value') value: string;
  constructor() {}

  @HostListener('input', ['$event'])
  handleInputChange(event) {
    this.update.emit(event.target.value);
  }

  ngOnChanges(changes: SimpleChanges) {
    const changedValue = changes['model'];
    this.value = changedValue.currentValue;
  }
}

two-way-form-control.directive.ts

// https://stackblitz.com/edit/angular-ivy-lvhg5u?file=src%2Fapp%2Ftwo-way-form-control.directive.ts
// <input type="text" id="sample" appTwoWayInput [(value)]="valueBind" />

import { Directive, EventEmitter, HostListener, Output } from '@angular/core';

@Directive({
  selector: '[appTwoWayInput]',
})
export class TwoWayInputDirective {
  @Output('valueChange') update = new EventEmitter<any>();
  @HostListener('input', ['$event'])
  handleInputChange(event) {
    this.update.emit(event.target.value);
  }
}