How to do nested components in Ionic Angular?

Ionic Framework Ionic Angular
1

Hey guys, I’m primarily a Vue developer and recently had to work with the ionic angular code base and I have been having trouble with using component inside another component.

Here’s what I want to do:

Page has a parentComponent --> parentComponent has a childComponent

Here’s what I’ve done:

Created one Page and two components (parentComponent, childComponent), now I can import and use parentComponent inside Page or childComponent inside Page, How do I import and use childComponent inside parentComponent.

When I googled a lot, the only way I could get it to work is importing both (parentComponent, childComponent) into Page and using childComponent inside parentComponent somehow seems to automatically work, Is this the correct approach?

Thanks

2

There isn’t a single “correct” approach, and if you’re maintaining a foreign codebase without much Angular experience, maybe what I’m about to say might not be a feasible strategy for you, but you don’t have to use Angular’s lazy loading. I don’t.

You can declare every single component in your app in the AppModule’s declarations stanza, at which point you don’t need any of the hassle of “importing” components into one another, or any of the annoying little module files. Since “pages” are really just components in the Angular world, you can embed whatever you want just by putting the HTML in the relevant template.

1 Like
3

Yes this is the ideal solution. You have to import components into a module. Because ionic angular defaults to lazy loading them you need to import each component on the page they are being used on.