Search code examples
angularionic-framework

How to create Angular components that accepts children

First of all, I'm a React developer learning Angular. I'm on a project that, by client's request, needs to be developed in Angular.

Now, I'm trying to create a admin panel component that acceps children components. So, I want to create a component (for example, app-admin-panel) where I can write anything inside it.

For example:

<app-admin-panel>
    <h1>Dashboard</h1>
    <div class="row">
        <div class="col-12 col-lg-6 col-xl-4">
            <p>Login statistics</p>
            <some-chart-component></some-chart-component>
        </div>
    </div>
</app-admin-panel>

For analogy, In React, I just need to write { props.children } inside my admin-panel component where I want to render the content. But, in Angular, how can I do that?

For note: I'm using Ionic with Angular, so if there's something in Ionic (non-Angular native) that can help, will be very helpful.

Thanks!

Solution

  • You can achieve this behaviour using the build in ng-content tag. Place this tag inside you're app-admin-panel template file, as a placeholder for where you want the nested components to render.