My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Managing Dynamic Components inside a DOM in angular

Default profile photo
Anonymous
·Aug 3, 2018

Hi, How can DOM manipulation be achieved for dynamic generated components. I have a scenario where certain different components which needed to create them dynamically and their meta_info is updated inside a service. e.g.

//@ reference container
//@ using 'ViewContainerRef'
<div #dynamic></div>

// <app-sections><app-sections>
// app-sections further can have these dynamic components
// <app-card></app-card>
// <app-list></app-list>
// <app-image><app-image>
// <app-video><app-video>

So currently each component I have a meta-info for them in classes so whatever I need to create I call service to update service object with meta-info and add in DOM (e.g. section-component). At present these two (components and service object ) seems is tied very loosely (i.e. ) if I would delete any component I manually need to loop in array finds out which id and then splice it up. Now I need to move these dynamic components up and down in DOM. Any suggestion, link etc. will be very helpful.