CODEWITHSUNDEEP
javascriptangular
nick
nick

Reputation: 3711

Propagating enter in custom Angular input

I have a custom Angular input component that using a textarea as it's input field.

How do I propagate the enter key event to the parent form?

Upvotes: 0

Views: 588

Answers (2)

Ankit Kapoor
Ankit Kapoor

Reputation: 1754

You can create a custom event which will be send to the parent once your enter key event is received.

In your custom input element :

@Output() onEnterPressed:EventEmitter<any> = new EventEmitter<any>();


// Method called on KeyUp event. Using KeyUp as it recommended by Angular for Keyboard events.
handleKeyPressed(keyEvent:KeyboardEvent) {
   
  if(enter_key_is_pressed) {
    this.onEnterPressed.emit(keyEvent);
  }
}

In parent component template:

<custom-input [onEnterPressed]="handleEnterEvent($event)"></custom-input>

In parent component component class:

handleEnterEvent(event:KeyboardEvent):void {
  //do_whatever_you_want
}

Upvotes: 1

Kim Kern
Kim Kern

Reputation: 60357

Almost all events (including keyup events) bubble up to the parent elements by default.

Example

<form (keyup.enter)="addAction('form')">
  <textarea (keyup.enter)="addAction('textarea')"></textarea>
  <input-component (keyup.enter)="addAction('input')"></input-component>
</form>

For both the textarea as the component, the enter event will bubble up to the form.

Try it out with this plunker.

Upvotes: 0

Related Questions