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