Back
*NGFor rerendering all videos in component.
I have a component(gallery) which contains videos. i am loading them dynamically using *NgFor when i delete a video it rerenders all of the video and i want to avoid it.
TL;DR
The developer is having a problem with their component that contains videos. When they delete a video, all the videos in the component are being re-rendered. They want to avoid this unnecessary re-rendering.
Solution: The issue is caused by the lack of a unique identifier for each video item in the ngFor loop. To solve this problem, add a unique trackBy function to the ngFor directive. For example, you can track by the index of the video in the array:
```html
<div *ngFor="let media of group.mediaList.reverse(); trackBy: trackByIndex" class="video-container">
```
Then HTML CODE:
HTML CODE:
TypeScript
<div *ngIf="sortByName;" class="media-groups">
<ng-container *ngFor="let group of mediaService.getGroupedMediaList(); trackBy: trackByGroup">
<div class="media-group">
<h2 class="group-title">{{ group.date }}</h2>
<div class="video-grid">
<div *ngFor="let media of group.mediaList.reverse();" class="video-container">
<div class="video-information">
<div *ngIf="!media.isEditing" class="edit-container">
<a (click)="deleteVideo(media)" class="delete-video">
<img src="../../assets/Icons/delete.png" style="max-height: 34px; max-width: 24px;" alt="delete Icon">
</a>
<div class="video-name">{{ media.playlistFileName }}</div>
<a class="edit-name" (click)='media.isEditing = true'>
<img src="../../assets/Icons/edit.png" style="max-height: 34px; max-width: 24px;" alt="edit Icon">
</a>
</div>
<div *ngIf="media.isEditing" class="save-container">
<button (click)='saveEditedName(media)' class="save-name">Send</button>
<input id="videoNameInput" type="text" [(ngModel)]="media.playlistFileName" class="input-element">
</div>
</div>
<div class="video-item">
<video #video class="vjs-default-skin video-js" muted controls>
<source src="{{ media.playlistURL }}" type="application/x-mpegURL">
</video>
</div>
</div>
</div>
</div>
</ng-container>
</div>
