how to neatly reference multiple angular event handlers to html elements

Question

I am very new to angular2 and i was wondering if there is a shorter way to write the keypress and paste events so that the html code will be more readable (i am using Type Script):

 <textarea rows="1" class="txt" (keypress)="c()" (paste)="c()" [(ngModel)]="LeftText"></textarea>

There's an interesting thread here on Github on this very topic github.com/angular/angular/issues/6675 — JGFMK
– JGFMK, Commented Jul 29, 2017 at 9:07
Duplicate ? stackoverflow.com/questions/34983140/… this one wasn't two day ago though :) — Vega
– Vega, Commented Jul 29, 2017 at 9:49

Estus Flask · Accepted Answer · 2017-07-29 12:42:34Z

4

When HTML template becomes cluttered with Angular logic, this means that logic should be moved to directive/component classes.

In this case this can be a directive:

@Directive({  selector: '[modify]' })
class ModifyDirective  {
  @Input() modify;

  @HostListener('paste', ['$event.target'])
  @HostListener('keypress', ['$event.target'])
  onModify(e) {
    if (this.modify) {
      this.modify(e);
    }
  }
}

Which is used like

<textarea [modify]="c">

Notice that c is passed to the directive as a callback, this means that a method should be bound to the context in order to keep proper this.

answered Jul 29, 2017 at 12:42

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

Collectives™ on Stack Overflow

how to neatly reference multiple angular event handlers to html elements

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related