trackBy with the async pipe
The problem is that you reassign the stream via this.items = this.itemService.loadItems();. So your Observable items does not emit new values, which Angular would track with your trackBy funciton, rather than you change the reference of the items, causing angular to do a full reload.
So just change your addItem-function of your service to emit the updated values to your previously gotten Observable via loadItems. After that you simply call
addItem(text) { this.itemService.addItem({text});}Example of a service:
@Injectable()export class Service { private items: Array<string> = []; private items$ = new Subject<Array<string>>(); loadItems(): Observable<Array<string>> { return this.items$.asObservable(); } addItem(text: string) { this.items = [...this.items, text]; this.items$.next(this.items); }}