Remove wrapper from Angular component

Question

Is it possible to add a component and keep only it's content?

Example of using a component:

<my-custom-component></my-custom-component>

This is rendered like:

<my-custom-component>
  <div> ... </div>
</my-custom-component>

Is it possible to render the content only? In this case it would be:

<div> ... </div>

I need this cause is screwing my CSS rules.

Answer 1

There is feature request that looks like you want to have

• https://github.com/angular/angular/issues/22208

For now you can workaround it by using attribute selector:

<div myComponent> ... </div>


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