input tag not working properly with Angular 5

Issue

I was trying to implement a feature in angular 5 and encountered a problem that input tag isn’t working properly.

Here’s the link to the code : stackblitz

It would be awesome if someone could tell me if there’s something I have done wrong here, or is it just some angular version issue. Because the same code is working fine with angular 10.

Solution

The problem is that your keyvalue pipe every time returns a new reference of the array, so angular every time will re-render all of the ngFor items. You can fix this by adding trackBy on your ngFor. It will check before re-rendering the item. and will only render the items which need re-rendering.

Here is the working example:

Note: there is one workaround example for the angular less than 6 and solution for the angular 6+

https://stackblitz.com/edit/angular-5-tutorial-p4uywe?file=app%2Fapp.component.html

Answered By – Ashot Aleqsanyan

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.