Rendering an Angular Component into the DOM without Component wrapper

Question

I have this button, that I use in multiple places throughout my site.

Because of that, I moved it to Component. I call it GetInvolvedButtonComponent.

However, I can't use this Component right now because Angular is wrapping a special HTML tag around it. That cause issue.

How do I render the HTML straight into the section without it being wrapped in that tag?

Here's what I have thus far:

get-involved-button.component.html

<!-- TODO: This is going to route to another page called "Get Involved" -->
<a class="btn btn-primary center" routerLink="/contact">Get Involved!</a>

get-involved-button.component.ts

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

@Component({
  selector: "[get-involved-button]",
  templateUrl: "./get-involved-button.component.html",
  styleUrls: ["./get-involved-button.component.css"],
})
export class GetInvolvedButtonComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

When I inspect the DOM element in the developer console, this is what I see:

If it is a component, there is no way to avoid having an html tag for the component. A workaround is to use some css that practically ignores the container element: ':host { display: contents; }` Check for compatibility. — alou
– alou, Commented Jul 19, 2020 at 15:23
@alou, really you can use as selector a name between [ and ] and you can applied to any html tag, e.g. a div — Eliseo
– Eliseo, Commented Jul 19, 2020 at 18:28
May I see what that looks like, for future reference? It's been literally years since I've done any Angular, and I didn't know this — Mike Warren
– Mike Warren, Commented Jul 20, 2020 at 1:04
@MikeWarren, he means using as component selector an actual html element, eg [div] which will practically render your component for all div tags. I don't know if that's really an option, but it would work. — alou
– alou, Commented Jul 20, 2020 at 18:22

riofly · Accepted Answer · 2025-02-28 05:08:23Z

The CSS solution works well, but it is not perfect:

:host { display: contents; }

This solution say to browser that the wrapper component tag must be ignored.

But this solution do no apply the right style if it is this:

table > :not(caption) > * > * { border-bottom-width: 1px; }

This CSS apply the border width to element in 3° descendant. For example:
tbody > tr > td

But if DOM structure contains the Angular wrapper, the 3° descendant is tr:
tbody > appMyTableRows > tr

To solve this issue I am using another solution: ng-container + ViewContainerRef.

Most complex but better solution

The solution is to draw the entire component inside a ng-template, then it will be rendered in caller component using ng-content.

How to draw component template:

<ng-template #bodyTempl>
  <tr>
    <td>This is</td>
    <td>the content</td>
    <td>of Component.</td>
  </tr>
  <tr>
    <td>This is</td>
    <td>the content</td>
    <td>of Component.</td>
  </tr>
</ng-template>

Then in Component code we must add something like this:

@ViewChild("bodyTempl") bodyTemplate: TemplateRef<any>;

As last step, we need to change how we use the component in template:

<table>
  <thead>
    <tr>
      <th>head</th>
      <th>head</th>
      <th>head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1</td>
      <td>row 1</td>
      <td>row 1</td>
    </tr>
    <app-my-table-tr #childComRef></app-my-table-tr>
    <ng-content *ngTemplateOutlet="childComRef.bodyTemplate"></ng-content>
  </tbody>
</table>

The HTML result shows the "app-my-table-tr" tag like child of TBODY, but it is empty. And the content of component will be injected like sibling of the component:

<table>
  <thead>
    <tr>
      <th>head</th>
      <th>head</th>
      <th>head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1</td>
      <td>row 1</td>
      <td>row 1</td>
    </tr>
    <app-my-table-tr _ngcontent-...></app-my-table-tr>
    <tr>
      <td>This is</td>
      <td>the content</td>
      <td>of Component.</td>
    </tr>
    <tr>
      <td>This is</td>
      <td>the content</td>
      <td>of Component.</td>
    </tr>
  </tbody>
</table>

To a perfect solution, write this in CSS of Component, so the wrapper will not rendered:

:host { display: none; }

(source: https://blog.josematos.work/how-to-render-an-angular-component-without-any-wrapping-tag-5084c84e0a62)

Mike Warren · Accepted Answer · 2020-07-19 15:35:16Z

1

Per @alou's comment on here, I just had to

:host { display:contents }

inside the component's CSS file, and it work.

answered Jul 19, 2020 at 15:35

Mike Warren

3,9109 gold badges54 silver badges111 bronze badges

Comments

JSON Derulo · Accepted Answer · 2024-06-06 15:30:43Z

1

For me,

:host {
    display: contents;
}

Works perfectly!

edited Jun 6, 2024 at 15:30

JSON Derulo

18.8k11 gold badges62 silver badges85 bronze badges

answered Jun 1, 2024 at 13:33

m4n50n1k0

215 bronze badges

Collectives™ on Stack Overflow

Rendering an Angular Component into the DOM without Component wrapper

3 Answers 3

Most complex but better solution

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Most complex but better solution

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related