angular custom directive don't response to host listener separately

I create a custom directive for time input and it work perfectly but if I wand to use multiple of it in same page the changes on each one apply on all of them. how can I use my directive and they work individually. it seems they use a shared host listener and response to it simultaneously.

my directive ts file is like below :

import { Directive, ElementRef, HostListener, Input } from "@angular/core"; @Directive({ selector: '[timeInput]', }) export class TimeInputDirective { @Input('timeInput') initialValue: string | undefined; constructor(private elementRef: ElementRef<HTMLInputElement>) { this.elementRef.nativeElement.className = 'timeInput'; } ngAfterViewInit() { this.elementRef.nativeElement.value = this.initialValue ? this.initialValue : '00:00'; } @HostListener('document:keydown', ['$event']) onKeyupHandler(event: KeyboardEvent) { if (event.key != 'Tab') { event.preventDefault(); let value = this.elementRef.nativeElement.value; let valuePart; switch (event.key) { case '0': case '1': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9': if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart < value.indexOf(':')) { valuePart = (value.substring(0, value.indexOf(':')) + event.key).substring(3, 1); valuePart = valuePart > '24' ? '0' + valuePart.substring(2, 1) : valuePart; this.elementRef.nativeElement.value = `${valuePart}:${value.substring(value.indexOf(':') + 1)}`; this.elementRef.nativeElement.selectionStart = 0; this.elementRef.nativeElement.selectionEnd = 2; } else { valuePart = (value.substring(value.indexOf(':') + 1) + event.key).substring(3, 1); valuePart = valuePart > '59' ? '00' : valuePart; this.elementRef.nativeElement.value = `${value.substring(0, value.indexOf(':'))}:${valuePart}`; this.elementRef.nativeElement.selectionStart = 3; this.elementRef.nativeElement.selectionEnd = 5; } break; case 'ArrowUp': if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart < value.indexOf(':')) { valuePart = (+value.substring(0, value.indexOf(':')) + 1).toString(); valuePart = ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1) > '24' ? '00' : ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1); this.elementRef.nativeElement.value = `${valuePart}:${value.substring(value.indexOf(':') + 1)}`; this.elementRef.nativeElement.selectionStart = 0; this.elementRef.nativeElement.selectionEnd = 2; } else { valuePart = (+value.substring(value.indexOf(':') + 1) + 1).toString(); if (valuePart <= '59') { this.elementRef.nativeElement.value = `${value.substring(0, value.indexOf(':'))}:${('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1)}`; } else { var hourPart = Math.floor(+valuePart / 60) + (+value.substring(0, value.indexOf(':'))); if (hourPart > 24) { this.elementRef.nativeElement.value = `${value.substring(0, value.indexOf(':'))}:00`; } else { this.elementRef.nativeElement.value = `${('0' + hourPart).substring(hourPart.toString().length + 1, hourPart.toString().length - 1)}:${('0' + (+valuePart % 60)).substring((+valuePart % 60).toString().length + 1, (+valuePart % 60).toString().length - 1)}` } } this.elementRef.nativeElement.selectionStart = 3; this.elementRef.nativeElement.selectionEnd = 5; } break; case 'ArrowDown': if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart < value.indexOf(':')) { valuePart = (+value.substring(0, value.indexOf(':')) - 1).toString(); valuePart = ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1) < '00' ? '24' : ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1); this.elementRef.nativeElement.value = `${valuePart}:${value.substring(value.indexOf(':') + 1)}`; this.elementRef.nativeElement.selectionStart = 0; this.elementRef.nativeElement.selectionEnd = 2; } else { valuePart = (+value.substring(value.indexOf(':') + 1) - 1).toString(); valuePart = ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1) < '00' ? '59' : ('0' + valuePart).substring(valuePart.length + 1, valuePart.length - 1); this.elementRef.nativeElement.value = `${value.substring(0, value.indexOf(':'))}:${valuePart}`; this.elementRef.nativeElement.selectionStart = 3; this.elementRef.nativeElement.selectionEnd = 5; } break; case 'ArrowLeft': if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart > this.elementRef.nativeElement.value.indexOf(':')) { this.elementRef.nativeElement.selectionStart = 0; this.elementRef.nativeElement.selectionEnd = 2; } break; case 'ArrowRight': if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart < this.elementRef.nativeElement.value.indexOf(':')) { this.elementRef.nativeElement.selectionStart = 3; this.elementRef.nativeElement.selectionEnd = 5; } break; case 'Delete': if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart < value.indexOf(':')) { this.elementRef.nativeElement.value = `00:${value.substring(value.indexOf(':') + 1)}`; this.elementRef.nativeElement.selectionStart = 0; this.elementRef.nativeElement.selectionEnd = 2; } else { this.elementRef.nativeElement.value = `${value.substring(0, value.indexOf(':'))}:00`; this.elementRef.nativeElement.selectionStart = 3; this.elementRef.nativeElement.selectionEnd = 5; } break; } } @HostListener('click') onClickHandler() { if (this.elementRef.nativeElement.selectionStart == null ? 0 : this.elementRef.nativeElement.selectionStart < this.elementRef.nativeElement.value.indexOf(':')) { this.elementRef.nativeElement.selectionStart = 0; this.elementRef.nativeElement.selectionEnd = 2; } else { this.elementRef.nativeElement.selectionStart = 3; this.elementRef.nativeElement.selectionEnd = 5; } 

I use it in component as below

<input id="test1" [timeInput]>