Rendering an Angular Component into the DOM without Component wrapper

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:



Continue reading...