My app is incredibly simple, just a basic hello world. To enhance its appearance, I incorporated bootstrap for the design and ng-bootstrap for the components.
Within one of my TS files, you will find the following code:
showMeTheKey(event: KeyboardEvent) {
console.log(event);
}
On an HTML page, I have included the following code:
<input (keyup)="showMeTheKey($event)">
Whenever I type a key, two identical events appear in the console, except for a slight difference in timestamps due to microseconds. Is this behavior normal or does it indicate an issue?
Thank you!
EDIT: In response to the comments requesting my app code, here are the details:
This is my app.module:
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { InputModule } from './input/input.module';
import { NavbarComponent } from './navbar/navbar.component';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
],
imports: [
BrowserModule,
HttpClientModule,
InputModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
This is my app component:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
showMeTheKey(event: KeyboardEvent) {
console.log(event);
event.stopImmediatePropagation();
}
}
And this is my app HTML:
<input (keyup)="showMeTheKey($event)">
EDIT 2: For those interested, I have provided an online demo with an editor allowing access to the code. Press F12 on the live demo to view the logs:
Live demo:
Editor: https://stackblitz.com/edit/angular-znlk4p
EDIT 3: Here is a screenshot showing the event firing twice in the demo image