ngFor reloading on input

Hi I have a problem with my Ionic Chat App
the Gifs in the Chat are starting from the beginning if I type something in my input box.
If I use the track by function I can see that the ngfor is reloading when I type something in the input box.

Hey @danielmm1997,

bei mir passiert da garnichts wenn ich was eingebe (bei deinem StackBlitz). Keine Logs, etc. Bitte mehr Informationen

1 Like

Hast du die Browser Konsole offen?
also console.log?

logo. Am Anfang werden die Indexe (0,1) einmal ausgeloggt. Beim tippen passiert garnicht

Hatte ausversehen daran gearbeitet. Sollte jetzt gehen.

Please ignore me if I’m not saying anything relevant, but I don’t think it’s fair to equate “the trackBy function got called” with “the ngFor got ‘reloaded’”. The trackBy function needs to get called in order to see what (if anything) needs to be changed in the DOM.

Try this experiment: use Chrome Developer Tools to change the element CSS on the “hallo” element to include color: red. Then type something in the input box. If the DOM were really being rebuilt using the ngFor, I would expect that element to go back to being black. It doesn’t for me, so I’m taking that to mean that the DOM hasn’t been updated.

i’m testing for 20 minutes now and would say @rapropos is right. I don’t think that the call of the trackBy function means the DOM refreshes. Also the Result of his CSS Test: The Color does not switch back, so i don’t think the DOM has been updated

Thank you for the Long answer.

In the sample Video you see my Problem, this happens only in my iOS App also in the Safari Browser on the iPhone.

If i rebuild it with stackblitz and open the Link in Safari, i cannot reproduce the bug there, only in my Ionic App.

I do not know how to find what caused the flikering.

If this only happens on iOS, is it possible that something like the interaction with the virtual keyboard is causing the rerendering?

I setup a new Ionic Project and testet the same on iOS i cant see the Bug anymore then i updated all ionic and angular Packages then i have the Bug (Angular 9 rc6). So i think it is something related to a ionic or angular update.

Do you have a idea where it could came from?

This makes me a bit suspicious - does the problem persist with 8.2.14?

If i use:

 "@angular-devkit/architect": "~0.803.20",
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular-devkit/core": "~8.3.20",
    "@angular-devkit/schematics": "~8.3.20",
    "@angular/cli": "~8.3.20",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.2.14",
"typescript": "^3.5.3"

it is working


    "@angular-devkit/architect": "~0.900.0-rc.6",
    "@angular-devkit/build-angular": "~0.900.0-rc.6",
    "@angular-devkit/core": "~9.0.0-rc.6",
    "@angular-devkit/schematics": "~9.0.0-rc.6",
    "@angular/cli": "~9.0.0-rc.6",
    "@angular/compiler": "~9.0.0-rc.6",
    "@angular/compiler-cli": "~9.0.0-rc.6",


Here if you wan’t to test;

It is related to the


You can open the project in the Safari Browser if you browse the URL

1 Like