Adding / Removing components on the fly
As suggested by Tim,
quoting @tbosch's comment
Angular reuses previously created DOM elements by default
So to avoid this behavior, taken from the comment as well, you can use APP_VIEW_POOL_CAPACITY
and assign it 0
as value.
bootstrap(MyApp, [provide(APP_VIEW_POOL_CAPACITY, {useValue: 0})])
Update
Note that since beta.1 APP_VIEW_POOL_CAPACITY
was removed by #5993 and the DOM is being recreated correctly.
Related videos on Youtube
Tim Autin
Updated on September 14, 2022Comments
-
Tim Autin over 1 year
I need to be able to add & remove Angular components on the fly. To do so, I'm using loadIntoLocation and dispose methods, like it:
Adding a component (from a layout manager):
this.m_loader.loadIntoLocation(MyComponent, this.m_element, 'content').then(_componentRef => { // Create the window and set its title: var component: MyComponent = (_componentRef.instance); component.ref = _componentRef; // init the component content });
Removing a component (from the component):
this.ref.dispose();
It is nearly working: - if I add a component, and close it, it works - if I add several components, they work - but if I add component A, then remove it, then add component B, it seems like Angular gives me a reference to A, and keeps some old values (my components are draggable, and in this case the B will be created A was when I destroyed it)
Is there a way to make Angular destroy components properly, or at least to force it to create fresh ones?
-
Eric Martinez over 8 yearsCan you reproduce the behavior in a plnkr? I have this one working, but I'm not able (and I don't know really) how to reproduce your issue
-
Tim Autin over 8 yearsYep, I forked your plunker : plnkr.co/edit/lvQfnLfTImcRqRcxJaXU?p=preview . Click "Add new component", drag it somewhere, click "Remove", then click "Add new component" again : the component is created at the just removed one place.
-