Changing nesting within an Angular 2 component template

Question

I have a user-configurable layout where I believe I would need to change nesting of elements per configuration. I don't want multiple templates, as this would be a chore to maintain, but I would like to know if there is some way in Angular 2 to define a parent element whose child elements will display weather or not the parent element is displayed. So if I have:

<parent>
    <child />
</parent>

I would like to use some sort of toggle to remove the parent element from the display list without losing it's child. So upon toggling off, child would become a child of parent's parent.

Is that even possible?

Are you talking about the classes specifically, or components with view-children? — chrispy
– chrispy, Commented Jan 25, 2017 at 19:03
I will answer with a different approach if you actually need to remove that parent element from the DOM. — chrispy
– chrispy, Commented Jan 25, 2017 at 19:08
I have updated the question to clarify. I am not trying to toggle the class, but rather remove the parent element without losing its children. — BBaysinger
– BBaysinger, Commented Jan 25, 2017 at 20:15

chrispy · Accepted Answer · 2017-01-25 20:47:40Z

1

Editing to match the new question:

I'm not aware of any option to allow you to this easily. A simple solution that may not be comprehensive enough for your application:

<parent *ngIf="parentCondition">
    <child />
</parent>
<child *ngIf="!parentCondition" />

edited Jan 25, 2017 at 20:47

answered Jan 25, 2017 at 19:07

chrispy

3,6321 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BBaysinger Over a year ago

Brilliant. Thank you!

Collectives™ on Stack Overflow

Changing nesting within an Angular 2 component template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related