[Ionic 5 - Angular] Recommended way to add dynamic elements to the DOM

What is the recommended way to add and remove dynamic elements to the DOM with Ionic and Angular? I was just injecting them with Javascript appendChild which did append the element to the DOM but i am not able to modify the element once appended (like add/remove a class to the element).

The elements are varied, so i can’t use just a *ngFor loop.

Usecase: Its a calling app wherein each time a new user joins, i create a div with different elements and a video element and append it to the DOM, then when different events happen like user toggling off his camera, i need to apply changes to the appended element.

Thanks.

Can you explain this more, i don’t undestand why you cant use a loop?

The elements don’t have a fixed structure, and they are many variations so i prefer not to keep hiding and showing 20-30 elements.

Seems like i have to do something like this https://angular.io/guide/dynamic-component-loader

Were I in your position, I would move heaven and earth to avoid going down that road, as it’s basically kicking Angular to the curb.

What I would do in this situation would likely be to create a custom component for each variation (or some subset of them that makes sense). You could then use a structure like skeletons and bones to do your ngFor.

3 Likes

Thank you, i think this is the best way.