CODEWITHSUNDEEP
angular
HamedFathi
HamedFathi

Reputation: 3969

How to create an Angular 6+ component containerless?

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

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?

enter image description here

Upvotes: 3

Views: 460

Answers (1)

Ingo Bürk
Ingo Bürk

Reputation: 20033

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.

Upvotes: 4

Related Questions