title: What is the recommended way to show/hide child components in Angular?
body: <p>The question is similar to <a href="https://stackoverflow.com/questions/52035963/what-is-the-preferred-way-to-show-hide-components-in-react-js">this one</a>, but there is no definitive answer there, and it relates to React, not Angular, so there is a chance that the answer would be different. Essentially, the question is &quot;Is adding/removing elements from the DOM preferred over showing/hiding them?&quot;
  Given:</p>
  <pre><code>&lt;app-parent&gt;
      Zero or one of many child components displayed here.
  &lt;/app-parent&gt;
  </code></pre>
  <p>and if each of the children wraps itself in a modal thus:</p>
  <pre><code>&lt;app-modal visible=&quot;isVisible&quot;&gt; Child n's content here &lt;/app-modal&gt;
  </code></pre>
  <p>Which of the two ways is the recommended Angular way of going about this?</p>
  <pre><code>a.   &lt;app-parent&gt;
          &lt;app-child1&gt;&lt;/app-child1&gt;
          &lt;app-child2&gt;&lt;/app-child2&gt;
       &lt;/app-child&gt;
  </code></pre>
  <p>And in the parent.component.ts file:</p>
  <pre><code>@ViewChild (Child1Component) child1: Child1Component;
  ...
  showChild(childNumber: number) =&gt; {
     if (childNumber === 1) {
        this.child1.isVisible = true 
     } else {
        this.child2.isVisible = true 
     }
  }
  </code></pre>
  <p>(isVisible will be set to false, to hide the modal and component, from within the child itself).</p>
  <h2>OR</h2>
  <pre><code>b.   &lt;app-parent&gt;
           &lt;app-child1 *ngIf=&quot;showchild1&quot;&gt;&lt;/app-child1&gt;
           &lt;app-child2 *ngIf=&quot;showchild2&quot;&gt;&lt;/app-child2&gt;
       &lt;/app-child&gt;
  </code></pre>
  <p>And in the parent.component.ts file:</p>
  <pre><code>    showChild(childNumber: number) =&gt; {
         if (childNumber === 1) {
            this.showChild1 = true 
         } else {
            this.showChild2 = true 
         }
      }
  </code></pre>
  <p>In Case 'a' both/all child components are mounted and rendered, hidden, and not <em>shown</em> until a condition is met.  In Case 'b', one child component is inserted, visible, into the DOM when a condition is met, and removed accordingly (That part is not shown).</p>
  <p>What is the recommended Angular way? Does the size of the child/ren component become a deciding factor?</p>