Angular 2 component without selector tag in DOM

Question

I want this:

<div *ngIf="...">div 1...</div>
<div *ngIf="...">div 2...</div>
<div *ngIf="...">div 3...</div>

But I don't wanna repeat the *ngIf, so I created my component <my-component>, with this template:

<div>div 1...</div>
<div>div 2...</div>
<div>div 3...</div>

And I put *ngIf in my component tag: <my-component *ngIf="...">

The problem is that Angular 2 is putting the <my-component> tag in the DOM, and I don't want it.

For anyone who knows ASP.NET WebForms, I want a component in Angular 2 that works like <asp:PlaceHolder> control...

Arsine

Put in output means in DOM <my-component> is there and you dont want to have it? – Firebrick

exactly, that's it – Arsine

Answer 1

Use equivalent expanded *ngIf notation with template tag:

<template [ngIf]="check">
  <div>div 1...</div>
  <div>div 2...</div>
  <div>div 3...</div>  
</template>

Toodleoo

Is there another way to load a component without have his selector in the DOM ? I need this too, but I don't think I can't use template because I don't have condition. For information, I want to generate complex SVG with Angular2. – Holman

I'm also looking to see if this is possible with the framework. there are a lot of usecases where you don't want the components tag to be shown in the DOM just the contents of that component. – Holarctic

Answer 2

You can solve this by using CSS only, just set my-component as display: contents,

my-component {
    display: contents;
}

As stated on display: contents documentation, this causes to appear as if the component were direct children of the element's parent.

Ashlieashlin

Answer 3

There are various type of component selectors. You can choose based on your liking. Here are the examples:

1. Tag Selector (Default):

@Component({
  selector: 'app-component',
})

Above will render as (created automatically or dynamically, it will look same):

<app-component></app-component>

2. Class Selector:

@Component({
  selector: '.app-component',
})

Above will render as (automatically created by router or any other possible means):

<div class=”app-component”></div>

Note: Since this is class type selector, you can apply it to any tag when you are using it manually. Like below i can apply the same selector to a html <section> tag:

<section class=”app-component”></section>

Above logic will be true for rest of other type of selectors.

3. ID Selector:

@Component({
  selector: '#app-component',
})

Above will render as (automatically created by router or any other possible means):

<div id=”app-component”></div>

Note: Since ID should only exist uniquely once over the whole page rendering, this type of selectors shouldn't be used for components which repeated via any iterators or can be placed multiple times on a given page render.

4. Attribute Selector:

@Component({
  selector: '[app-component]',
})

Above will render as (automatically created by router or any other possible means):

<div app-component></div>

Note: This is the best choice and should have been the default selector for the angular by all means.

With all the above, in your component style you can place the below style to make the parent container get out of the way from the css styling of the parent of the component and children of the component:

:host {
  display: contents;
}

If you guys think that I have missed out anything, please help me complete the above answer.

Note: There are some other ways which intentionally left here untouched here as there are performance hit on rendering engine by using them. See few options by others here on this stackoverflow question.

Decahedron

Answer 4

To answer your question, you can also do this...

@Component({
  selector: '[my-component]'...

<my-component *ngIf="..."</my-component>

// becomes this in the dom

<div my-component _nghost...>

There is also ng-container for this purpose.

<ng-container *ngIf="something.is.there">
  <div class="here">
    Hello
  </div>
</ng-container>

// DOM: => <div class="here">Hello</div>

Martine