Using Pure Pipes To Generate NgFor TrackBy Identity Functions For Mixed Collections In Angular 7.2.7

// Import the core angular services.
import { Pipe } from "@angular/core";
import { PipeTransform } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

interface TrackByFunctionCache {
	[ propertyName: string ]: <T>( index: number, item: T ) => any;
}

// Since the resultant TrackBy functions are based purely on a static property names, we
// can cache these Functions across the entire app. No need to generate more than one
// Function for the same property names.
var cache: TrackByFunctionCache = Object.create( null );

@Pipe({
	name: "trackByProperty",
	pure: true
})
export class TrackByPropertyPipe implements PipeTransform {

	// I return a TrackBy function that plucks the given properties from the ngFor item.
	public transform( propertyNames: "$index" ) : Function;
	public transform( propertyNames: string ) : Function;
	public transform( propertyNames: string[] ) : Function;
	public transform( propertyNames: any ) : Function {

		console.warn( `Getting track-by for [${ propertyNames.toString() }].` );

		var cacheKey = propertyNames;

		// If the given property names are defined as an Array, then we have to generate
		// the item identity based on the composition of several item values (in which
		// each key in the input maps to a property on the item).
		if ( Array.isArray( propertyNames ) ) {

			cacheKey = propertyNames.join( "->" );

			// Ensure cached identity function.
			if ( ! cache[ cacheKey ] ) {

				cache[ cacheKey ] = function trackByProperty<T>( index: number, item: T ) : any {

					var values = [];

					// Collect the item values that will be aggregated in the resultant
					// item identity
					for ( var propertyName of propertyNames ) {

						values.push( item[ propertyName ] );

					}

					return( values.join( "->" ) );

				};

			}

		// If the property name is the special "$index" key, we'll create an identity
		// function that simply uses the collection index. This assumes that the order of
		// the collection is stable across change-detection cycles.
		} else if ( propertyNames === "$index" ) {

			// Ensure cached identity function.
			if ( ! cache[ cacheKey ] ) {

				cache[ cacheKey ] = function trackByProperty<T>( index: number, item: T ) : any {

					return( index ); // <---- Using INDEX.

				};

			}

		// By default, we'll use the provided item property value as the identity.
		} else {

			// Ensure cached identity function.
			if ( ! cache[ cacheKey ] ) {

				cache[ cacheKey ] = function trackByProperty<T>( index: number, item: T ) : any {

					return( item[ propertyNames ] ); // <---- Using VALUE.

				};

			}

		}

		return( cache[ cacheKey ] );

	}

}

// Import the core angular services.
import { Component } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

interface Person {
	type: "friend" | "foe";
	id: number;
	name: string;
}

@Component({
	selector: "my-app",
	styleUrls: [ "./app.component.less" ],
	template:
	`
		<h2>
			Friends &amp; Foes
		</h2>

		<p>
			<a (click)="cyclePeople()">Cycle people</a>
			&mdash;
			<a (click)="togglePeople()">Toggle people</a>
		</p>

		<ul *ngIf="isShowingPeople">
			<ng-template
				ngFor
				let-person let-index="index"
				[ngForOf]="people"
				[ngForTrackBy]="( [ 'type', 'id' ] | trackByProperty )">

				<li [mySpy]="person.name">
					{{ person.name }} - {{ person.type }}
				</li>

			</ng-template>
		</ul>
	`
})
export class AppComponent {

	public people: Person[];
	public isShowingPeople: boolean;

	// I initialize the app component.
	constructor() {

		this.people = this.generatePeople();
		this.isShowingPeople = true;

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I re-create the collection of people, thereby breaking any "object identity"
	// references to the old view-model.
	public cyclePeople() : void {

		console.warn( "Cycling people collection." );
		this.people = this.generatePeople();

	}


	// I toggle the rendering of the people collection.
	public togglePeople() : void {

		console.warn( "Toggling people collection." );
		this.isShowingPeople = ! this.isShowingPeople;

	}

	// ---
	// PRIVATE METHODS.
	// ---

	// I return a new collection of people.
	private generatePeople() : Person[] {

		// Notice that this collection contains a mixture of two different sets of
		// people, each of which have their own set of unique ID (primary keys). As such,
		// we can't use "id" alone to define uniqueness - we have to use the combination
		// of "type" AND "id" to define uniqueness within the collection.
		return([
			{ type: "friend", id: 1, name: "Liz" },
			{ type: "friend", id: 2, name: "Steve" },
			{ type: "foe", id: 1, name: "Katrina" },
			{ type: "foe", id: 2, name: "Joe" }
		]);

	}

}