My current challenge is trying to focus on a specific card from a list of mat cards
Despite my efforts, I keep encountering an error that reads:
Cannot read property 'focus' of undefined
The desired functionality should include adding a gold outline when a button is clicked
import { Component, OnInit, QueryList, ElementRef, ViewChildren } from '@angular/core';
/**
* @title Basic cards
*/
@Component({
selector: 'card-overview-example',
templateUrl: 'card-overview-example.html',
styleUrls: ['card-overview-example.css'],
})
export class CardOverviewExample implements OnInit {
comments: number[];
@ViewChildren("commentCard") commentCardList: QueryList<ElementRef>;
ngOnInit() {
this.comments = [1, 2, 3, 4, 5, 6, 7, 8];
}
focus() {
const elementRef = this.commentCardList.find((item, index) => index === 4);
elementRef.nativeElement.focus();
//this.commentCardList[4].nativeElement.focus();
}
}