CODEWITHSUNDEEP
angulardomangular-template
DA.
DA.

Reputation: 40673

Render an angular template without ANY wrapping tag

I'm in a bind here. Working on refactoring the HTML of a rather messy pile of angular components and their templates.

The catch is that in one particular case, I can't have a parent element in the DOM. Right now, the template selector is set up as this:

<thisComponent *nIf="blah" [someParam]="hello"><thisComponent>

Which renders this in the DOM:

 <thisComponent>
    <div>Hello</div>
    <div>World</div>
 <thisComponent>

This is breaking the CSS we'd like to use and keep consistent with the rest of the content being rendered.

I'd like to have the above work without the parent thisComponent element.

I was thinking something like this might work:

<ng-container thisComponent *nIf="blah" [someParam]="hello"></ng-container>

(and then change the selector to an attribute selector ala [thisComponent])

But it appears this does not work.

Is there a way to accomplish the above without the parent element rendering in the DOM?

Some more context. There's another duplicate question that suggests using an attribute selector, but the catch is you still need a parent element (with an attribute). Ideally, angular would allow that parent element to be an ng-container, which doesn't render a parent element. But that is not supported.

Why this is needed:

CSS likes a clean DOM structure and some features depend entirely on it...namely flex layouts. Flex layouts completely break when there are extra DOM layers between the flex container and the flex objects.

Upvotes: 6

Views: 5919

Answers (1)

DA.
DA.

Reputation: 40673

Apparently the answer, at this time, is no, Angular does not support this and always needs a parent host element.

This is a problem and seems others have asked for this to be fixed in angular via this feature request.

It's an interesting read. One of the common suggestions is to have angular support what I suggested above, the ability to use an ng-container as a host element:

<ng-container mySelector></ng-container>

Alas, that is not something Angular supports.

Probably the best workaround suggestion from the above feature request discussion was this suggested css attribute:

<app-my-component style="display: contents"></app-my-component>

This (via CSS) does exactly what I'm looking for. Unfortunately, Safari support for this has some pretty big caveats making it unusable for my needs.

At this point, it looks like I need to give up on getting Angular to respect a particular DOM structure and instead need to create different CSS to handle the layouts we're trying to put together.

Upvotes: 6

Related Questions