How to create an Angular 6+ component containerless?

Question

I wrote a very simple component based on Bootstrap 4 by Angular 7. The final result is:

Everything work perfectly but in Aurelia, we can create a component containerless. It is necessary for creating other components based on Bootstrap 4 that can not wrap into a non-bootstrap div element. (Angular div)

How can I remove the container of an Angular element and render just inside of it?

Answer 1

You cannot really just omit the surrounding container, no. However, you can create a component with an attribute selector:

@Component({
  selector: "[appFoo]",
  template: `<ng-content></ng-content>`,
})
export class AppFooComponent {}

You use it like this:

<div appFoo>Hello!</div>

That way you can decide what the surrounding container should be when using the component. You can also further restrict your selector to things such as div[appFoo] etc.

---

Note: By default, the codelyzer rules in an Angular CLI project will give you a linting error for this because it requires components to use component selectors, but you can just disable this in your tslint config.