¿Cómo haría para hacer referencia a un elemento en el dom que se creó en un bucle ngFor?
por ejemplo, tengo una lista de elementos sobre los que itero:
var cookies: Cookie[] = [...]; <div *ngFor="#cookie of cookies" id="cookie-tab-button-{{cookie.id}}" (click)="showcookie(cookie);">Cookie tab</div> <div *ngFor="#cookie of cookies" id="cookie-tab-content-{{cookie.id}}" ">Cookie Details</div>¿Cómo haría referencia a estos divs, para poder agregar una clase css como "is-active"? ¿O mi enfoque es simplemente incorrecto?
Si desea agregar/eliminar una clase, use el enlace
<div *ngFor="let cookie of cookies" [class.isActive]="someExpression" ....>o
<div *ngFor="let cookie of cookies" [ngStyle]="{'isActive': someExpression}" ....>Ejemplo concreto:
activeCookie:string = 'b'; cookies:string[] = ['a', 'b', 'c']; <div *ngFor="letcookie of cookies" [class.isActive]="cookie == activeCookie" ....>Si realmente quieres obtener una referencia, puedes usar
<div #someName *ngFor="let cookie of cookies" id="cookie-tab-button-{{cookie.id}}" (click)="showcookie(cookie);">Cookie tab</div> @ViewChildren('someName') someDivs; ngAfterViewInit() { // or some event handler someDivs.toArray()[0].nativeElement.classList.add('isActive'); }<style> .active{ background:blue; } </style> <div [ngClass]="{active:(i==selectedIndex)}" *ngFor="#cookie of cookies;#i=index" id="cookie-tab-button-{{cookie.id}}" (click)="showcookie(cookie,i);">Cookie tab </div> showcookie(val, i){ console.log(val + i); this.selectedIndex=i; }Puede usar ng-container que no se representará:
<ng-container *ngFor="let cookie of cookies"> <div id="cookie-tab-button-{{cookie.id}}" (click)="showcookie(cookie);">Cookie tab</div> </ng-container>