How to add event to input in Angular 5 app using directive?

Question

I have the following directive groupingFormat which perform grouping to an input text when user use the key up:

@Directive({
  selector: '[groupingFormat]'
})
export class GroupingFormatDirective {

  private el: HTMLInputElement;  
  constructor(elRef: ElementRef) {
    this.el = elRef.nativeElement;
  }

  ngAfterViewInit(): void {
    let elem : HTMLInputElement = this.el; 
     elem.addEventListener('keyup',() => { 
      this.el.value = this.digitGrouping(this.el.value);
     });
   }
}

Example of usage:

<input type="text" #myValue="ngModel" name="my_value" [(ngModel)]="myObj.myValue" id="my_value" required groupingFormat>

This directive is working as expected but now I have new requirement: The input text should use the directive also when the page is load and also if the a form is open inside the page with the input becoming visible.

Is there an easy way to update the directive to support this functionality or any alternative solution? Attach another directive ? Thanks.

The directive is not working when the form is visible that's all because I have only event for keyup. — user2304483
– user2304483, Commented Mar 6, 2019 at 6:37
no, if you think that's the solution for the problem can you try answer the question? thanks — user2304483
– user2304483, Commented Mar 6, 2019 at 6:42

Kshitij · Accepted Answer · 2019-03-06 06:55:53Z

1

<input type="text" name="my_value" [appInputevent]="myValue" [(ngModel)]="myValue">

directive file

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

@Directive({
  selector: '[appInputevent]'
})
export class InputeventDirective {

  constructor(private el:ElementRef) { }

  @Input('appInputevent') params: string;

 @HostListener('keyup', ['$event'])
  onKeyUp(event: KeyboardEvent) {
    console.log('got parameters: '+this.params);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }

}

change hostlistner event according to your need.

For demonstration-- https://stackblitz.com/edit/ionic2-test?file=app%2Finputevent.directive.ts

edited Mar 6, 2019 at 6:55

answered Mar 6, 2019 at 6:39

Kshitij

3804 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2304483 Over a year ago

I've tried this solution and I'm getting now: Can't bind to 'appInputevent' since it isn't a known property of 'input'

Kshitij Over a year ago

i have added link for demonstration. check only for InputeventDirective, as there is one more directive.

user2304483 Over a year ago

I've removed the brackets [] and now no errors, but It doesn't work.

Kshitij Over a year ago

don't remove bracket. check if you have imported directive properly. have you went thorough the link?

Kshitij Over a year ago

myvalue variable needs to be declared also.

|

Collectives™ on Stack Overflow

How to add event to input in Angular 5 app using directive?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related