title: Angular Parent/Children click events: Show child component in parent after click event on a different child in parent component?
body: <p>I'm a couple weeks into Angular 7 and I'm struggling to hide/show a child component <code>&lt;app-child-2&gt;</code> in a Parent component <code>&lt;parent&gt;</code> after a click event on a separate child <code>&lt;app-child-1&gt;</code> in the same parent component.</p>
  
  <p>All the children card divs <strong>only</strong> render if they have data, this is done via a <code>ngIf</code> method from the parent <code>shouldCardRender()</code> and <code>outputsMapToRead('Child 1')</code>. The <code>shouldCardRender()</code> method is used to check if the data object <code>groupName</code> is <code>checked: true</code> via another method in the parent called <code>this.checkIfCardHasAnyCheckedValues()</code> before showing. If false it doesn't render on parent, if true another method runs that feeds all the true data into the child component.</p>
  
  <p>Here's how both children are set in the parent.</p>
  
  <pre><code>&lt;div *ngIf="shouldCardRender('Child 1')"&gt;
          &lt;app-child-1 [outputsArray]="outputsMapToRead.get('Child 1')" [rawData]="rawData"&gt;&lt;/app-child-1&gt;
  &lt;/div&gt;
  
  &lt;div *ngIf="shouldCardRender('Child 2')"&gt;
          &lt;app-child-2 [outputsArray]="outputsMapToRead.get('Child 2')" [rawData]="rawData"&gt;&lt;/app-child-2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I believe the <code>[outputsArray]outputsMapToRead.get('Child #')</code> is the data that categories the groupName for that child and the feeds the true data for the child depending on the groupName.</p>
  
  <p>Here's an example of the data object that <code>shouldCardRender()</code> &amp; <code>this.checkCardValues()</code> check. If checked is true, card renders. Please note that a normal object, has close to 20 objects inside of it, if those objects are true, a different method gives those cards access to data for the child to plug and play, right now all 'checked` keys are set to <strong>true.</strong> </p>
  
  <pre><code>outputsMap.set('Child 1',  [
      {
        name: 'fraudScore',
        friendlyName: 'Fraud Score',
        checked: true, 
        groupName: 'Child 1'
      }, 
      .....
    ]);
  
  outputsMap.set('Child 2',  [
      {
        name: 'displayName',
        friendlyName: 'Display Name',
        checked: true, 
        groupName: 'Child 2'
      }, 
      .....
    ]);
  </code></pre>
  
  <p>My problem is that there is a button on the <code>&lt;app-child-1&gt;</code> thats says "Show <code>&lt;app-child-2&gt;</code>". 
  I am struggling to get <code>&lt;app-child-2&gt;</code> to hide/show since that currently depends on the <code>shouldCardRender</code> and the data object from <code>[outputsArray]</code>. </p>
  
  <p>I believe I have to use <code>@Output</code> and <code>EventEmitter</code> on child and have it bubble up to the parent. But I'm hitting a road block with the logic needed to turn data to false to hide component. I also thought about changing the checked key to <code>false</code> and making method on the child or parent? that turns checked into <code>true</code>. </p>
  
  <p>Any help would be appreciated, thanks.</p>