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:

Answer 1

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

:host { display:contents }

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