How to have a wrapper component in angular?

Question

I have feature component with form and few tables. And I would like to have a wrapper component which I can use in feature component wrapping in a wrapper component. To be detailed,

In wrapper component, my wrapper.component.html will have just a div with some classes.

     <div class="something"></div>

In feature component, feature.component.html would be:

     <my-wrapper>
        <div>with some data</div>
        <form></form>
     </my-wrapper>

But my content inside my-wrapper is not getting loaded. Can you help me out?

Answer 1

Here's a working stackblitz with a "wrapper" component. Its a div with a class (and a red border style for demo purposes), and an example of how to use it inside AppComponent.

https://stackblitz.com/edit/angular-ivy-c6trj9

Wrapper component template

<div class="some-wrapper" style="border: 1px solid red">
<ng-content></ng-content>
</div>

Example usage of the new wrapper component (app-wrapper was the tag name given by default from angular cli, you can change it in the component)

<h1>Wrapper component example</h1>
 <app-wrapper>
    <div>with some data</div>
    <form></form>
</app-wrapper>

Answer 2

I believe what you are looking for is content projection. for the simplest case just use <ng-content> element like this

<div class="something">
  <ng-content></ng-content>
</div>