207

I am struggling to find a way to do this. In a parent component, the template describes a table and its thead element, but delegates rendering the tbody to another component, like this:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody *ngFor="let entry of getEntries()">
    <my-result [entry]="entry"></my-result>
  </tbody>
</table>

Each myResult component renders its own tr tag, basically like so:

<tr>
  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>
</tr>

The reason I'm not putting this directly in the parent component (avoiding the need for a myResult component) is that the myResult component is actually more complicated than shown here, so I want to put its behaviour in a separate component and file.

The resulting DOM looks bad. I believe this is because it is invalid, as tbody can only contain tr elements (see MDN), but my generated (simplified) DOM is :

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <my-result>
      <tr>
        <td>Bob</td>
        <td>128</td>
      </tr>
    </my-result>
  </tbody>
  <tbody>
    <my-result>
      <tr>
        <td>Lisa</td>
        <td>333</td>
      </tr>
    </my-result>
  </tbody>
</table>

Is there any way we can get the same thing rendered using a child component to encapsulate the rendering of the table row without the wrapping <my-result> tag?

I have looked at ng-content, DynamicComponentLoader, the ViewContainerRef, but they don't seem to provide a solution to this as far as I can see.

3

8 Answers 8

172

You can use attribute selectors

@Component({
  selector: '[myTd]'
  ...
})

and then use it like

<td myTd></td>
21
  • 2
    No setAttribute is not my code. But I've figured it out, I needed to use the actual top level tag in my template as the tag for my component instead of ng-container so new working usage is <ul smMenu class="nav navbar-nav" [submenus]="root?.Submenus" [title]="root?.Title"></ul>
    – Aviad P.
    Commented Aug 25, 2017 at 11:05
  • 2
    You can't set attribute component on ng-container because it is removed from the DOM. That's why you need to set it on an actual HTML tag.
    – Robouste
    Commented Nov 6, 2017 at 13:30
  • 2
    @AviadP. Thanks much... I knew there was a minor change that was required and I was losing my mind over this. So instead of this: <ul class="nav navbar-nav"> <li-navigation [navItems]="menuItems"></li-navigation> </ul> I used this (after changing li-navigation to an attribute selector) <ul class="nav navbar-nav" li-navigation [navItems]="menuItems"></ul>
    – Mahesh
    Commented Nov 11, 2017 at 21:20
  • 6
    this answer doesn't work if you're trying to augment a material compoent e.g. <mat-toolbar my-toolbar-rows> will complain that you can only have one component selector not multiple. I could go <my-toolbar-component> but then it's putting the mat-toolbar inside a div
    – Rusty Rob
    Commented May 23, 2019 at 0:03
  • 2
    This solution works for simple cases (like OP's), but if you need to create a my-results that inside can spawn more my-results, then you need ViewContainerRef (check @Slim's answer below). The reason this solution doesn't work in that case is that the first attribute selector goes in a tbody, but where would the internal selector be? It can't be in a tr and you can't put a tbody inside of another tbody.
    – DWilches
    Commented Mar 12, 2020 at 22:14
85

You need "ViewContainerRef" and inside my-result component do something like this:

.html:

<ng-template #template>
    <tr>
       <td>Lisa</td>
       <td>333</td>
    </tr>
</ng-template>

.ts:

@ViewChild('template', { static: true }) template;


constructor(
  private viewContainerRef: ViewContainerRef
) { }

ngOnInit() {
  this.viewContainerRef.createEmbeddedView(this.template);
}
13
  • 10
    Works like a charm! Thank you. I used in Angular 8 the following instead: @ViewChild('template', {static: true}) template;
    – AlainD.
    Commented Aug 7, 2019 at 14:07
  • 5
    This worked. I had a situation i was using css display:grid and you can't have it still have the <my-result> tag as first element in the parent with all of the child elements of my-result rending as siblings to my-result. The problem was that one extra ghost element still broke the grids 7 columns "grid-template-columns:repeat(7, 1fr);" and it was rendering 8 elements. 1 ghost place holder for my-result and the 7 column headers. The work around for this was to simply hide it by putting <my-result style="display:none"> in your tag. The css grid system worked like a charm after that.
    – RandallTo
    Commented Feb 14, 2020 at 20:20
  • 1
    When I use this how can I avoid getting ExpressionChangedAfterItHasBeenCheckedError? Commented Apr 16, 2020 at 14:09
  • 3
    If anyone has errors with this.viewContainerRef, move code from ngOnInit to ngAfterViewInit.
    – Cafn
    Commented Aug 18, 2021 at 12:04
  • 9
    Thanks! This is the only approach that worked for me. In addition to your code, I also do this.viewContainerRef.element.nativeElement.remove() at the end, to remove the original (empty) component.
    – ZolaKt
    Commented May 19, 2022 at 12:43
58

you can try use the new css display: contents

here's my toolbar scss:

:host {
  display: contents;
}

:host-context(.is-mobile) .toolbar {
  position: fixed;
  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
  z-index: 2;
}

h1.app-name {
  margin-left: 8px;
}

and the html:

<mat-toolbar color="primary" class="toolbar">
  <button mat-icon-button (click)="toggle.emit()">
    <mat-icon>menu</mat-icon>
  </button>
  <img src="/assets/icons/favicon.png">
  <h1 class="app-name">@robertking Dashboard</h1>
</mat-toolbar>

and in use:

<navigation-toolbar (toggle)="snav.toggle()"></navigation-toolbar>
3
  • 3
    display: contents does the job. This is what I was looking for, it allows the child component to take its style without being hacked by extra child component's name tag(selector)
    – M_Idrees
    Commented Feb 6, 2022 at 9:05
  • 1
    doesn't answer the original question: "render a component without its wrapping tag"
    – alex351
    Commented Apr 5, 2023 at 10:38
  • 2
    I think it's worth noting, that using display: contents may cause some accessibility issues, so it should rather be used with caution (at least until it's totally safe in all major browsers): caniuse.com/css-display-contents Commented Apr 30, 2023 at 17:42
25

Attribute selectors are the best way to solve this issue.

So in your case:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody my-results>
  </tbody>
</table>

my-results ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-results, [my-results]',
  templateUrl: './my-results.component.html',
  styleUrls: ['./my-results.component.css']
})
export class MyResultsComponent implements OnInit {

  entries: Array<any> = [
    { name: 'Entry One', time: '10:00'},
    { name: 'Entry Two', time: '10:05 '},
    { name: 'Entry Three', time: '10:10'},
  ];

  constructor() { }

  ngOnInit() {
  }

}

my-results html

  <tr my-result [entry]="entry" *ngFor="let entry of entries"><tr>

my-result ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: '[my-result]',
  templateUrl: './my-result.component.html',
  styleUrls: ['./my-result.component.css']
})
export class MyResultComponent implements OnInit {

  @Input() entry: any;

  constructor() { }

  ngOnInit() {
  }

}

my-result html

  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>

See working stackblitz: https://stackblitz.com/edit/angular-xbbegx

1
  • selector: 'my-results, [my-results]', then I can use my-results as an attribute of the tag in HTML. This is the correct answer. It works in Angular 8.2. Commented Jan 8, 2020 at 17:46
14

Use this directive on your element

@Directive({
   selector: '[remove-wrapper]'
})
export class RemoveWrapperDirective {
   constructor(private el: ElementRef) {
       const parentElement = el.nativeElement.parentElement;
       const element = el.nativeElement;
       parentElement.removeChild(element);
       parentElement.parentNode.insertBefore(element, parentElement.nextSibling);
       parentElement.parentNode.removeChild(parentElement);
   }
}

Example usage:

<div class="card" remove-wrapper>
   This is my card component
</div>

and in the parent html you call card element as usual, for example:

<div class="cards-container">
   <card></card>
</div>

The output will be:

<div class="cards-container">
   <div class="card" remove-wrapper>
      This is my card component
   </div>
</div>
5
  • 8
    This is throwing an error because 'parentElement.parentNode' is null Commented Feb 21, 2019 at 2:10
  • 4
    Won't this mess with Angular's change detection and virtual DOM? Commented Mar 16, 2021 at 3:42
  • @BenWinding it won't because Angular internally represents a component using a data structure commonly referred to as a View or a Component View and all change detection operations, including ViewChildren run on a View, not the DOM. I have tested this code and I can confirm that all DOM listeners and angular bindings are working. Commented May 31, 2021 at 21:06
  • 1
    this solution doesn't work, throws null and destroys the ng structure
    – Shaybc
    Commented Nov 14, 2021 at 12:53
  • 1
    This removes the component altogether
    – Bopsi
    Commented Dec 6, 2021 at 7:30
8

Another option nowadays is the ContribNgHostModule made available from the @angular-contrib/common package.

After importing the module you can add host: { ngNoHost: '' } to your @Component decorator and no wrapping element will be rendered.

1
  • 9
    Just commenting because it looks like this package is not maintained anymore and there are errors with Angular 9+ Commented Feb 3, 2021 at 17:30
3

Improvement on @Shlomi Aharoni answer. It is generally good practice to use Renderer2 to manipulate the DOM to keep Angular in the loop and because for other reasons including security (e.g. XSS Attacks) and server-side rendering.

Directive example
import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[remove-wrapper]'
})
export class RemoveWrapperDirective implements AfterViewInit {
  
  constructor(private elRef: ElementRef, private renderer: Renderer2) {}

  ngAfterViewInit(): void {

    // access the DOM. get the element to unwrap
    const el = this.elRef.nativeElement;
    const parent = this.renderer.parentNode(this.elRef.nativeElement);

    // move all children out of the element
    while (el.firstChild) { // this line doesn't work with server-rendering
      this.renderer.appendChild(parent, el.firstChild);
    }

    // remove the empty element from parent
    this.renderer.removeChild(parent, el);
  }
}
Component example
@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss'],
})
export class PageComponent implements AfterViewInit {

  constructor(
    private renderer: Renderer2,
    private elRef: ElementRef) {
  }

  ngAfterViewInit(): void {

    // access the DOM. get the element to unwrap
    const el = this.elRef.nativeElement; // app-page
    const parent = this.renderer.parentNode(this.elRef.nativeElement); // parent

    // move children to parent (everything is moved including comments which angular depends on)
    while (el.firstChild){ // this line doesn't work with server-rendering
      this.renderer.appendChild(parent, el.firstChild);
    }
    
    // remove empty element from parent - true to signal that this removed element is a host element
    this.renderer.removeChild(parent, el, true);
  }
}
1
  • for some reason this solution did not work for me
    – Shaybc
    Commented Nov 14, 2021 at 13:39
2

This works for me and it can avoid ExpressionChangedAfterItHasBeenCheckedError error.

child-component:

@Component({
    selector: 'child-component'
    templateUrl: './child.template.html'
})

export class ChildComponent implements OnInit {
@ViewChild('childTemplate', {static: true}) childTemplate: TemplateRef<any>;

constructor(
      private view: ViewContainerRef
) {}

ngOnInit(): void {
    this.view.createEmbeddedView(this.currentUserTemplate);
}

}

parent-component:

<child-component></child-component>
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.