Is any ways to get ElementRef and Component ref in ViewChildren?
One way to solve it is to inject in each component the ElementRef as a public property and then, by iterating over the components(resulted from ViewChildren
), you can access everything you want.
my-component.component.ts
@Component({ /* ... */ })
export class MyComponent {
/* ... */
constructor (public elementRef: ElementRef) { }
/* ... */
}
parent.component.html
<virtual-scroller #scroll>
<my-component #element *ngFor="let c of components"></my-component>
</virtual-scroller>
parent.component.ts
@ViewChildren('element', { read: MyComponent }) private components: QueryList<MyComponent>
/* ... */
ngAfterViewChecked () {
this.components.forEach(c => console.log(c.elementRef))
}
One way to do this is to inject:
@ViewChildren('element', { read: MyComponent}) private components: QueryList<MyComponent>;
in parent component and expose elementRef
from child:
class MyComponent {
constructor(public elementRef: ElementRef) {}
}
and then just access elementRef
directly:
this.components.forEach(component => component.elementRef);