Currently, I am working on a project in Angular version 10. Within this app, there is a component that can be shared and will utilize the provided content through ng-content. Typically, this content will consist of a list of items such as divs or buttons.
I am looking to implement logic that will relocate the last child of a container to another container based on specific conditions (specifically, if the width becomes too narrow, the items need to be moved elsewhere). I have already set up logic that saves the last item in an array and removes it from the original container. However, I am unsure of how to effectively add this element to the new container.
I attempted using 'innerHTML', but this displayed object text instead of an HTML element.
Similarly, trying to set the children of the new container to the moved items (either by pushing them or setting them to a new object) did not produce the desired outcome.
I am at a loss for what other options to explore.
If you would like to take a look, here is a quick StackBlitz demo I created: https://stackblitz.com/edit/angular-ivy-ioqhhx?file=src/app/app.component.html