Angular 2 invisible component container

Question

Containers like <app-root></app-root> can do break the css layout, especially if working with flexbox.

Is it possible to have invisible component containers? I tried selector: '[app-root]' already with the following tags, but they all create a dom element:

<template>, <ng-template>, <ng-template>, <ng-container>

If this container is really needed, would be awesome if Angular would just render an HTML comment.

"Is it possible to have invisible component containers" does this mean that you don't wanna show the tag in the DOM? @Mick — Saiyaff Farouk, Feb 25 '17 at 19:25
what do you mean by **just the content**?? you dont want the selector tag? in your HTML DOM?? — Aravind, Feb 25 '17 at 19:35
I don't get your purpose of doing so. If you want to hide some templates according to a condition add an *ngIf="" directive. Try to make the question much clear — Saiyaff Farouk, Feb 25 '17 at 19:35
Just no whats so hard to understand there. The component template without any container html dom tag. — Mick, Feb 25 '17 at 20:09
I thought so, too. It works e.g. for *ngIf an becomes a html-tag: `` But in this case it stays a html-tag. — Mick, Feb 25 '17 at 20:22
Possible duplicate of [Remove the host HTML element selectors created by angular component](http://stackoverflow.com/questions/34280475/remove-the-host-html-element-selectors-created-by-angular-component) — AngularChef, Feb 25 '17 at 20:24
`` doesn't create a DOM element, but it also doesn't do what you want. — Günter Zöchbauer, Feb 25 '17 at 23:12

score 4 · Answer 1 · answered Feb 25 '17 at 19:37

4

Personally I think the best way is to use selector as an attribute. For example, you have @Component like this:

...
@Component({
    selector: '[your-component]'
})
...

This way, your-component is an attribute, which you can use like this:

<div your-component>Some content...</div>

In this case you guarantee that styles won't break.

P.S. as far as I know this feature (replace in Angular 1) was deprecated in Angular 1, so it is not something that you would expect from Angular 2.

answered Feb 25 '17 at 19:37

lomboboo

1,221
1
12
27

But i don't want no container at all, not even
– Mick Feb 25 '17 at 20:08
@Mick, you can't. ``Replace`` functionality was deprecated in Angular 1 – lomboboo Feb 25 '17 at 20:20
@AngularFrance, simple, with ``ng-content`` – lomboboo Feb 25 '17 at 20:20
Thank you! This is exactly what I needed for creating a component in an HTML table. I was able to put my template directly on the tbody element and all of the rendering errors were fixed! – slander May 17 '17 at 15:44

score 3 · Answer 2 · answered Jun 15 '17 at 08:51

You can use display: contents on the host element to make it invisible to flexbox and grid layouts. The element does appear in the DOM, but it won't interfere with layout: its children will obey the layout rules of their grand-parent.

Unfortunately, display: contents is only available in Firefox right now, but support will grow with time. https://caniuse.com/#feat=css-display-contents

Angular 2 invisible component container

2 Answers2