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:

    <div class="row">
        <div class="col-12 col-lg-6 col-xl-4">
            <p>Login statistics</p>

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.



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.

Answered By – Jules

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published