I'm currently working on an Angular 1.X application and have encountered a scenario where a component is shared across three different pages.
Within the main component, there are several nested components but only two of them should be displayed on a single page. I've implemented ng-if to conditionally show these components and I'm unsure if this is the best approach.
<!-- Component 1 -->
<div class="wrapper">
<div ng-if="showChildren">
<component2> </component2>
</div>
<!-- more code goes here -->
<div ng-if="showChildren">
<component3> </component3>
</div>
</div>
In order to display the required components on the specific page, I would add the following code in the controller:
<component1 showChildren="true"></component1>
The current implementation works without any errors being thrown on the page or console.
While there may be alternative solutions for this situation, I'm curious if there are any potential design flaws or drawbacks in how it has been implemented.