index - Angular2 Obtener referencia al elemento creado en ngFor

ngfor angular 7

Question

¿Cómo iría para hacer referencia a un elemento en el dom que se creó en un bucle ngFor.

Por ejemplo, tengo una lista de elementos que itero sobre:

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 puedo hacer referencia a estos divs, por lo que podría agregar una clase css como "is-active". O mi enfoque es simplemente incorrecto.

Answer 1

Otra variación:

En el control de los padres:

// typescript
childControls: ChildComponent[] = [];
<!-- HTML -->
<ng-container *ngFor=''let period of periods''>
<app-child [period]=''period'' [parent]=''this''></app-child>
</ng-container>

En el control del niño:

private _parent: ParentComponent;
@Input() set parent(value: ParentComponent) {
this._parent.childControls.push(this);
}
get parent(): ParentComponent {
return this._parent;
}

Esto proporciona una serie de referencias a los controles secundarios en el padre.

Answer 2

Puedes usar ng-container que no se renderizará:

<ng-container *ngFor="let cookie of cookies">
<div id="cookie-tab-button-{{cookie.id}}" (click)="showcookie(cookie);">Cookie tab</div>
</ng-container>

Answer 3

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 desea obtener una referencia puede utilizar

<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'');
}

Answer 4

<div *ngFor="let item of items" (click)="itemClick($event.currentTarget)"></div>
itemClick(dom){
dom.style.color=''red'';
// ...
}

Answer 5

<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;
}