Textarea to ignore enter but need to trigger Save button

Extending the answer by @Pengyy

You can bind the bind the enter key to a pseudoSave function, and preventDefault inside of that, thus preventing both the Save function and the newline. Then you can either call the save function from there(assuming it is accessible such as a service) or you can emit an EventEmitter, and have that emit get caught to trigger the Save function.

you can bind the same function of Save button to keydown.enter of texterea, and call $event.preventDefault to avoid the newline.

sample plunker.

Assuming that your textarea is inside a form element.

{Plunker Demo}

You can achieve it by using a hidden submit input, like this

@Component({ selector: 'my-app', template: ` <form (submit)="formSubmitted($event)"> <input #proxySubmitBtn type="submit" [hidden]="true"/> <textarea #textArea (keydown.enter)="$event.preventDefault(); proxySubmitBtn.click()"> </textarea> </form> `, }) export class App { formSubmitted(e) { e.preventDefault(); alert('Form is submitted!'); } } 

You can create a service which can send a notification to other components that will handle the command. The service could look like this:

import { Injectable } from "@angular/core"; import { Subject } from "rxjs/Subject"; @Injectable() export class DataSavingService { private dataSavingRequested = new Subject<void>(); public dataSavingRequested$ = this.dataSavingRequested.asObservable(); public requestDataSaving(): void { this.dataSavingRequested.next(); } } 

... and should be registered in the providers section of the module. Note: if data must be passed in the notification, you can declare a non-void parameter type for the dataSavingRequested Subject (e.g. string).

The service would be injected in the component with the textarea element and called in the handler of the Enter keypress event:

import { DataSavingService } from "./services/data-saving.service"; ... @Component({ template: ` <textarea (keypress.enter)="handleEnterKeyPress($event)" ...></textarea> ` }) export class ComponentWithTextarea { constructor(private dataSavingService: DataSavingService, ...) { ... } public handleEnterKeyPress(event: KeyboardEvent): void { event.preventDefault(); // Prevent the insertion of a new line this.dataSavingService.requestDataSaving(); } ... } 

The component with the Save button would subscribe to the dataSavingRequested$ notification of the service and save the data when notified:

import { Component, OnDestroy, ... } from "@angular/core"; import { Subscription } from "rxjs/Subscription"; import { DataSavingService } from "../services/data-saving.service"; ... @Component({ ... }) export class ComponentWithSaveButton implements OnDestroy { private subscription: Subscription; constructor(private dataSavingService: DataSavingService, ...) { this.subscription = this.dataSavingService.dataSavingRequested$.subscribe(() => { this.saveData(); }); } public ngOnDestroy(): void { this.subscription.unsubscribe(); } private saveData(): void { // Perform data saving here // Note: this method should also be called by the Save button ... } } 

The code above assumes that the saving must be performed in the component with the Save button. An alternative would be to move that logic into the service, which would expose a saveData method that could be called by the components. The service would need to gather the data to save, however. It could be obtained with a Subject/Observable mechanism, or supplied directly by the components as a parameter to saveData or by calling another method of the service.

it could be 2 solutions:

1. Use javascript to handle enter event and trigger Save function in it

or

2. Use Same thing from Angular side as describe in this.

This may also help you