In my Angular project, I have a custom button component that I have used as a submit-form-button all throughout the application.
The problem is when the user wants to submit any of the forms on the website, the enter key does not work when focus is on the pro button component
.
This is my pro-button
component:
<ng-template [ngIf]="stroked" [ngIfElse]="normalButton">
<button
mat-stroked-button
[color]="color"
[type]="type"
[disabled]="disabled"
tabindex="-1"
#theButton
>
<ng-content></ng-content>
</button>
</ng-template>
<ng-template [ngIf]="stroked" #normalButton>
<button
mat-raised-button
[color]="color"
[type]="type"
[disabled]="disabled"
tabindex="-1"
#theButton
>
<ng-content></ng-content>
</button>
</ng-template>
Kindly note that I'm aware of Angular pseudo-events and know that something like this will probably work:
<pro-button
color="primary"
type="submit"
(keydown.enter)="onSubmit()"
#submitButton
>
submit
</pro-button>
But I'm using pro-button component
in my project a lot and I don't think it's good practice to keep adding (keydown.enter)="onSubmit()"
to all of my pro-button
selectors.
I fixed the issue by adding this bit of code to the
pro-button.component.ts
file: