Angular Web Architecture using nested components and hiding them using ng-hide

Question

I am developing an application using Angular 1.X.

There is a component that is used across three pages.

I have several nested components into a main component. However there are two components that will only show on one page. I am currently ng-if(ing them) and was wondering if this is a bad option.

    <!-- Component 1 -->  
      <div class="wrapper">
       <div ng-if="showChildren">
          <component2> </component2> 
       </div>

    <!-- more code goes here  -->  

       <div ng-if="showChildren">
          <component3> </component3> 
       </div>
     </div>

On the required page I would add in the controller

<component1 showChildren="true"></component1>

The code works, it gives no errors on page or in console.

Even though there might be other solutions for this, is there anything about this that is actually bad design/implementation?

Answer 1

This is mostly a matter of preference, as there's nothing inherently wrong with your solution.

Just a couple suggestions though:

• If you are hiding all the children of the div.wrapper , why not apply the ng-show to the wrapper itself?
• Since it seems that the value of showChildren won't change, why not use ng-if instead, and simplify the DOM? ng-show still generates the hidden DOM elements and uses styling to hide them, while ng-if will simply not generate them.