I have a parent component where I get the data from BE and where I pass the data to the child component:
<app-team-tile [teamData]="team" (openNotes)="openNotes($event)"></app-team-tile>
teamData represents a collection of team members. In the teamTile component I pass the data to a next child component:
<app-team-firefighter
[firefighter]="firefighter"
[longestAlarm]="getTheLongestFirefighterAlarm(firefighter)"
></app-team-firefighter>
the longestAlarm is a method that returns an alarm to the child component. In the app-team-firefighter component I have a timer in the ngOnChanges method:
ngOnChanges(): void {
if (this.longestAlarm) {
interval(1000).pipe(
map((count: any) => this.format(count + this.longestAlarm.duration))
).subscribe((time: string) => {
this.timer = time;
});
}
}
In the template I display the this.timer value, but it flickers every 5 seconds because I get data from BE every 5 seconds, and I know that when I get data from BE in the parent, the child destroys. What can I do to remove this flicker. Thanks in advance!
Why are you doing this in ngOnChanges -> this lifecycle hook is called everytime an input value changes. But you are not using these change values, so you should move your subscription to ngOnInit.
If you are changing your inputs every 5 seconds, you are creating a new subscription each time the method runs! (probably causing your flicker). You are also not cleaning these up from what I can see so you are just making duplicate subscriptions every 5 seconds which will cause a memory leak.
You will want to unsubscribe! (I haven't included this below)
ngOnInit() {
interval(1000).pipe(
filter(_ => !!this.longestAlarm),
map((count: any) => this.format(count + this.longestAlarm.duration))
).subscribe((time: string) => {
this.timer = time;
});
}