You want to create a component that projects a list of items and highlights the first projected item after content initialization. Which approach correctly uses ngAfterContentInit to achieve this?

You want to create a component that projects a list of items and highlights the first projected item after content initialization. Which approach correctly uses ngAfterContentInit to achieve this?

import { Component, AfterContentInit, ContentChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'highlight-list',
  template: ``
})
export class HighlightList implements AfterContentInit {
  @ContentChildren('item') items!: QueryList;

  ngAfterContentInit() {
    // What should go here?
  }
}

Options for ngAfterContentInit implementation: