CODEWITHSUNDEEP
angular
Mike Warren
Mike Warren

Reputation: 3866

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:

enter image description here

Upvotes: 0

Views: 1380

Answers (2)

m4n50n1k0
m4n50n1k0

Reputation: 11

For me,

:host {
    display: contents;
}

Works perfectly!

Upvotes: 0

Mike Warren
Mike Warren

Reputation: 3866

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

:host { display:contents }

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

Upvotes: 1

Related Questions