title: Expand/Collapse functionality between components
body: <p>I have 2 different components where I am using Angular - Expansion Panel for expandable summary view.</p>
  <p>I am able to integrate <code>&lt;mat-expansion-panel&gt;</code> to individual components successfully.</p>
  <p>I need help to make <code>Component2.html</code> as parent of <code>Component1.html</code> (Expand within expand- Please see below Image)<a href="https://i.stack.imgur.com/rzmxF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rzmxF.png" alt="enter image description here" /></a></p>
  <ul>
  <li><p>Component 1 should be able to expand and collapse independently to show data</p>
  </li>
  <li><p>Component 2 should embed Component 1 within itself, so when <code>Component 1 is expanded it can show its data and display remaining Child components</code></p>
  </li>
  </ul>
  <p><strong>NOTE</strong> - Both the component has <strong>Sibling relation</strong>, <code>no parent child</code> or <code>child - parent</code></p>
  <p>Component1.html</p>
  <pre><code>  &lt;div class=&quot;row&quot;&gt;
      &lt;div class&gt;
        &lt;dl class=&quot;row property_set&quot; data-property-set-name=&quot;data&quot;&gt;
          &lt;mat-accordion&gt;
            &lt;mat-expansion-panel (opened)=&quot;doExpand = true&quot;
                               (closed)=&quot;doExpand = false&quot;&gt;
            &lt;mat-expansion-panel-header&gt;
              &lt;mat-panel-title&gt;
          &lt;dt class=&quot;col-sm-4 record_property&quot;&gt;data&lt;/dt&gt;
        &lt;/mat-panel-title&gt;
        &lt;mat-panel-description&gt;
          &lt;dd class=&quot;col-sm-8 record_property_value data_name&quot; id=&quot;{{genId(data.name)}}&quot;&gt;
            &lt;inline-misal-edit 
                          [(field)]=&quot;data.name&quot; [elementType]=&quot;a.bName&quot; (fieldChange)=&quot;dataModified(data)&quot;
                          cols=&quot;30&quot; rows=&quot;1&quot;&gt;&lt;/inline-misal-edit&gt;
            &lt;/dd&gt;
        &lt;/mat-panel-description&gt;
      &lt;/mat-expansion-panel-header&gt;
  
          &lt;dt class=&quot;col-sm-4 record_property&quot;&gt;news&lt;/dt&gt;
          &lt;dd class=&quot;col-sm-8 record_property_value&quot;&gt;{{data.news?.created | news}}&lt;/dd&gt;
        &lt;/mat-expansion-panel&gt;
      &lt;/mat-accordion&gt;
        &lt;/dl&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Component2.html</p>
  <pre><code>
    &lt;dl class=&quot;row property_set&quot; data-property-set-name=&quot;misal&quot;&gt;
      &lt;mat-accordion&gt;
          &lt;mat-expansion-panel (opened)=&quot;doExpand = true&quot;
                               (closed)=&quot;doExpand = false&quot;&gt;
            &lt;mat-expansion-panel-header&gt;
              &lt;mat-panel-title&gt;
                misal Id
              &lt;/mat-panel-title&gt;
              &lt;mat-panel-description&gt;
                &lt;dd class=&quot;col-sm-10 record_property_value&quot; data-property-type=&quot;select&quot;&gt;{{misal.id || 'new'}}&lt;/dd&gt;
              &lt;/mat-panel-description&gt;
            &lt;/mat-expansion-panel-header&gt;
            &lt;dd class=&quot;col-sm-10 record_property_value misal_name&quot;&gt;{{misal.data[0].name}}&lt;/dd&gt;
            &lt;dt class=&quot;col-sm-2 record_property&quot;&gt;Country Pass&lt;/dt&gt;
            &lt;dt class=&quot;col-sm-2 record_property&quot;&gt;Plugins Program&lt;/dt&gt;
            &lt;dd class=&quot;col-sm-10 record_property_value&quot;&gt;
              &lt;north-dhamma[(misal)]=&quot;misal&quot; [editMode]=&quot;editMode&quot; (misalChange)=&quot;recordModified.emit()&quot;&gt;&lt;/registry-number&gt;
            &lt;/dd&gt;
            &lt;dt *ngIf=&quot;misal.value === 'hovered'&quot; class=&quot;col-sm-2 record_property&quot;&gt;Related Plugins Program&lt;/dt&gt;
            &lt;dd *ngIf=&quot;misal.value === 'hovered'&quot; class=&quot;col-sm-10 record_property_value&quot;&gt;
              &lt;land-hole&gt;&lt;/land-hole&gt;
            &lt;/dd&gt;
                  &lt;/mat-expansion-panel&gt;
        &lt;/mat-accordion&gt;
    &lt;/dl&gt;
  </code></pre>
  <p>.ts file</p>
  <pre><code>  panelOpenState = true;                 
  
  </code></pre>
  <p><strong>UPDATE</strong></p>
  <p>The answer given below by Robbie works for <code>parent - child component relation </code> but not for the <code>sibling component</code></p>