CODEWITHSUNDEEP
javascriptangularangular2-templateangular2-directives
lmcarreiro
lmcarreiro

Reputation: 5772

Angular 2 component without selector tag in DOM

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...

Upvotes: 9

Views: 12657

Answers (4)

Anant Anand Gupta
Anant Anand Gupta

Reputation: 738

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.

Upvotes: 8

luiscla27
luiscla27

Reputation: 6419

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.

Upvotes: 7

SoEzPz
SoEzPz

Reputation: 15912

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>

Upvotes: 6

dfsq
dfsq

Reputation: 193271

Use equivalent expanded *ngIf notation with template tag:

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

Upvotes: 4

Related Questions