Web

*NGFor rerendering all videos in component.

Jan 22, 2024, 22:00

View on Discord

Votes

Replies

Participants

Unknown

Messages

bytebuilders_Original post

Web Developer

Jan 22, 2024, 21:52

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.

Summary

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

bytebuilders_

Web Developer

Jan 22, 2024, 21:53

HTML CODE:

Markup

  <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>

*NGFor rerendering all videos in component.

Need support?_