Track By

With Angular 17+ the @for control-flow block accepts a track expression that supplies a stable identity key. This lets the renderer reuse existing DOM nodes when the underlying array is rebuilt, instead of throwing them away and recreating them.

Basic usage

Since angular 17, you can use the control-flow syntax. This makes using bsTrackBy: 'id' obsolete.

Open devtools F12 and find and select the ul inside the bs-list-group
Click the button. Note that only the newly added bs-list-group-item is recreated

  
    
      
        <bs-list-group>
        
    
      
          @for (person of people; track person.id) {
        
    
      
            <bs-list-group-item>
        
    
      
              {{ person.firstName }} {{ person.lastName }}
        
    
      
            </bs-list-group-item>
        
    
      
          }
        
    
      
        </bs-list-group>

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import {
        
    
      
          BsListGroupComponent,
        
    
      
          BsListGroupItemComponent,
        
    
      
        } from '@mintplayer/ng-bootstrap/list-group';
        
    
      
        
        
    
      
        interface Person {
        
    
      
          id: number;
        
    
      
          firstName: string;
        
    
      
          lastName: string;
        
    
      
        }
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-track-by-demo',
        
    
      
          templateUrl: './my-track-by-demo.component.html',
        
    
      
          imports: [BsListGroupComponent, BsListGroupItemComponent],
        
    
      
        })
        
    
      
        export class MyTrackByDemoComponent {
        
    
      
          protected people: Person[] = [
        
    
      
            { id: 1, firstName: 'Andy',    lastName: 'Sharp' },
        
    
      
            { id: 2, firstName: 'Chelsea', lastName: 'Downs' },
        
    
      
          ];
        
    
      
        }