How do I create components that build inner html components in Angular

Question

I'm trying to create a component that has a similar usage as Material Tabs. I can create tabs with material tabs like so

<mat-tab-group mat-align-tabs="center">
    <mat-tab label="First Tab">
        <p>First tab works!</p>
    </mat-tab>
    <mat-tab label="Second Tab">
        <p>second tab works</p>
    </mat-tab>
</mat-tab-group>

However, I am trying to create a custom component that works in a similar way so that I have a parent container called 'foo' (mat tab equivalent 'mat-tab-group') that can have child components (mat tab equivalent 'mat-tab') that are controlled by the mat-tab-group component. How would I go about doing something this? I am very new to angular so I don't really know the proper terminology to explain this.

To further explain, I create my component like this:

<module-interface moduleName="PCDR"
                  moduleURL="pcdr/"
                  subModuleName="Positions"
                  subModuleURL="pcdr/positions">

    <p>test</p>
</module-interface>

The module-interface will render it's HTML, but not the p element. Ideally I want a usage like this

<module-interface moduleName="Foo"
                  moduleURL="Foo/"
                  subModuleName="Bar"
                  subModuleURL="Foo/Bar">

    <module-interface-tab>
        <p>test1</p>
    </module-interface-tab>
    <module-interface-tab>
        <p>test2</p>
    </module-interface-tab>

</module-interface>

And the module-interface component will handle how those module-interface-tab components are rendered in the parent view

Luke Luke · Accepted Answer · 2020-11-14T02:01:30

It's called content projection. Your parent component projects external content (<p>test1</p> or <p>tets2</p>) to your child component. All you need is <ng-content> in your child component, you can think it's like a marker in your child template. And every external content which you defined inside <module-interface-tab>...</module-interface-tab> will be replaced in that position.

Demo: https://stackblitz.com/edit/ng-content-projection-8ktwwk?file=app%2Fapp.component.html

More to read: https://blog.angular-university.io/angular-ng-content/

How do I create components that build inner html components in Angular

1 Answers