I am working on an angular 6 application which uses dynamic components. I am using @ViewChild('<id>', { read: ViewContainerRef }) <id>; in order to refer to the divs I would populate with dynamic components. The ViewContainerRef looks for a # tag with an id to identify which item it refers to in the template. I have created an accordion within which I want to dynamically add a specific reusable component, which I have been doing throughout the rest of the application by the process mentioned above. However, since there are many tabs in an accordion I want to add a loop using *ngFor that would do the job for me, where I set the #id using a value specified in the loop. I implemented the following template: <app-create-feature-modal></app-create-feature-modal> <app-button description="{{ 'pages[knowledge_base][buttons][accordion_add]' | translate }}" class="btn btn-primary btn-md accordion-button" (callFunction)="add()"></app-button> <div class="acc"> <div *ngFor="let item of meta; let i = index"> <button class="accordion" (click)="toggle(i)">{{item.name}}</button> <div class="{{'panel panel-'+ i}}"> <div #{{item.value}}></div> <!--here--> </div> </div> </div> However, on running the application, the id is not properly set and on inspecting the console I see that the reference to @ViewChild is undefined, and even within the html there are no id's defined, just plain divs. I cannot use id="{{item.value}}" because the ViewContainerRef does not recognize it, which is why this solution would not work for me. Is there any possible way I can achieve this? Continue reading...
