I need to get the ID attribute of each item in my QueryList from my carousel.component.ts in order to validate the selected item. Because to certain restrictions of the code that was developed, I cannot pass the value through an @Input from the parent, so I need to obtain it from the child.

This is an example from my code: https://stackblitz.com/edit/angular-1vnbxc-zc9fz8?file=src/app/carousel/carousel.component.ts

Child component property that i need to use to get the items

@ContentChildren(ProductCarouselDirective) slides: QueryList<ProductCarouselDirective>

Child Directive

export class ProductCarouselDirective implements OnInit {

  constructor(
    public templateRef: TemplateRef<any>,
    public viewContainer: ViewContainerRef) { }

    ngOnInit()
  {
    this.viewContainer.createEmbeddedView(this.templateRef)
  }

}

Function that I am using to test options on how to get the ID attribute with elementRef or viewContainer

  private getElementSelect() {
    this.slides.toArray().forEach((elements) => {
      console.log(elements.templateRef.elementRef.nativeElement);
      // console.log(elements.viewContainer);
    });
  }