Currently, I have a map feature integrated with a video element. When the video is clicked, the classes of both components switch, resulting in the video becoming fullscreen and the map being displayed as an inset.
While utilizing NgClass to update the classes of the components, I observed some flickering in the class section of the map element while testing my app on Chrome.
Upon investigation, it appears that ngClass constantly updates the class starting from the app's launch, even when no changes are made to the component. I aim to only modify the class upon clicking the inset element.
Is this standard behavior? Are there any measures I can take to resolve this issue?
Here is the HTML code:
<map class="map" (click)="switchInset('map')" [ngClass]="setClass('map')"></map>
<app-video class="video" (click)="switchInset('video')" [ngClass]="setClass('video')"></app-video>
And here is the TypeScript logic:
mapFullscreen: boolean = true;
switchInset(target: string) {
switch (target) {
case 'map':
if (!this.mapFullscreen) {
this.mapFullscreen = this.mapFullscreen ? false : true;
}
break;
case 'video':
if (this.mapFullscreen) {
this.mapFullscreen = this.mapFullscreen ? false : true;
}
break;
default:
break;
}
}
setClass(target: string) {
let classes = {};
switch (target) {
case 'map':
classes = {
inset: !this.mapFullscreen,
fullscreen: this.mapFullscreen
}
break;
case 'video':
classes = {
inset: this.mapFullscreen,
fullscreen: !this.mapFullscreen
}
break;
default:
break;
}
return classes;
}