1

I have an issue in my Angular5 application where it takes an additional click or any key press on keyboard to render my components. I have tried adding cd.detectChanges() and also tried using blur() method to remove focus on my search box (users enter some text and hit enter on inputbox and I am supposed to render some related components related to that search). When I manually click anywhere on the page or press any key the required components gets loaded and until then it shows the previous components. It's almost like change detection is happening when an additional event gets fired. I even tried generating click event manually and nothing happened. Any help would be appreciated... thanks for your time!

There is a similar post for Angular 2, but I have tried all the solutions mentioned in that post. - Angular2 - Change detection not showing unless clicked

sankar
  • 807
  • 8
  • 11

2 Answers2

0

Use keyup instead of keypress.

<input (keyup)="onKey($event)">

keypress shouldn't be used to detect the content of the text input for following reasons:

  • keypress is event is not fired on special input such as enter
  • keypress even is fired before text input is complete
Maciej Caputa
  • 1,831
  • 12
  • 20
  • we are using onKeyUp like below.. onKeyUp(event) { if (event.keyCode === 13) { this.submit(); } } – sankar Mar 13 '18 at 14:51
  • Keypress doesn't work with special keyboard input such as enter (key code 13), hence if you used keypress that function wouldn't be even fired. – Maciej Caputa Mar 13 '18 at 14:52
  • thanks, but as I mentioned we are not using keypress event for this. On the view template of this component this is the how the event is wired up. – sankar Mar 13 '18 at 15:01
0

Adding (submit) event to the form did the trick instead of onKeyUp(). Initially I have added both (submit) event and a hidden button of type 'submit' and I was thinking that because of submit button the changes were working but that was not the case. It was the (submit) event wired to the angular form. (submit)="onSubmit()"

sankar
  • 807
  • 8
  • 11