I have the following DOM structure
<div #carousalElement>
<div class="singleCaousalElement">
<a>
<img [src]="carousalURL1" class="carousalImage">
</a>
</div>
<div class="singleCaousalElement">
<a>
<img [src]="carousalURL2" class="carousalImage">
</a>
</div>
</div>
I can get the all divs with carousalElements class using the ViewChildren
@ViewChildren('carousalElement') carousalElements;
PROBLEM: When I dynamically add a new div under the #carousalElement div, it does not show up under the carousalElements array.
Am I missing something obvious?
Angular doesn't recognize HTML not added by Angular directives or APIs. Also if the <div> doesn't have a template variable #carousalElement, @ViewChildren('carousalElement') won't find it.
Template variables need to be added statically in the components template. Adding them dynamically is meaningless. Angular processes Angular-specific template constructs only during compilation of a template.
You can add the service ChangeDetectorRef and call the method this.changeDetectorRef.detectChanges() when you add another child with the ref that you have referenced in ViewChildren QueryList. That worked for me!
At point when you add new element in your carousalElement div at that time check in DOM if that element is available or not.
If available get element by:
this.carousalElements.NativeElement......
If not available then try to set some timeout then after check again in DOM
setTimeout(() => {
//your logic
}, 200);
Still not find then try with below logic:
@ViewChildren('carousalElement', { read: ViewContainerRef })
public carousalElement: QueryList<ViewContainerRef>;
And where you check console.log(this.carousalElement)
Let me know what it gives