title: Rows automatically expanding in Angular 8 material table with expandable rows when I reroute to the page with the table
body: <p>I have a page with a Material table. The table has a custom data source since pagination is server side.  It also has a check box column. The rows in the table are expandable.</p>
  <p><strong>Problem:</strong> The expandable rows work fine until I go to some other page and reroute to the above page again. When I reroute back to the page many rows are in expanded state automatically.</p>
  <p>I found one question with a similar issue : <a href="https://stackoverflow.com/questions/64172189/angular-material-table-with-expandable-rows-automaticly-expanded-when-change-ta?answertab=active#tab-top">Similar problem</a> However I don't have tabs so the solution mentioned can't be applied to my problem and fundamentally I am not sure why the solution works.</p>
  <p>Code snippet which adds the expandable row to the table:</p>
  <pre><code>&lt;ng-container matColumnDef=&quot;expandedDetail&quot;&gt;
        &lt;td mat-cell *matCellDef=&quot;let element&quot; [attr.colspan]=&quot;displayedColumns.length&quot;&gt;
          &lt;div [@detailExpand]=&quot;element === expandedElement ? 'expanded' : 'collapsed'&quot;&gt;
           &lt;div&gt;Expandable row details go here&lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumns; sticky:true&quot;&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns&quot;
        (click)=&quot;toggle(row); expandedElement = expandedElement == row ? null : row&quot;
        [class.element-expanded-row]=&quot;expandedElement == element&quot; class=&quot;clickable-row element-row&quot;&gt;
      &lt;/mat-row&gt;
      &lt;mat-row *matRowDef=&quot;let row; columns: ['expandedDetail'];&quot;
        [@detailExpand]=&quot;row === expandedElement ? 'expanded' : 'collapsed'&quot;&gt;
      &lt;/mat-row&gt;
    &lt;/mat-table&gt;
  </code></pre>
  <p>In the TS file I have a variable which I reset to null on ngOnInit:</p>
  <pre><code>expandedElement: any;
  </code></pre>
  <p>Also,
  One more behavior that I observed when I come back to the page was that I have to click the row twice to close it which means the condition to collapse and open the row (element === expandedElement) is satisfied just that the row is visible when I come back to the page.</p>
  <p>Does any one has any clue what may be the problem?</p>
  <p><strong>Edit :</strong></p>
  <p>The <a href="https://material.angular.io/components/table/examples" rel="nofollow noreferrer">expandable table example</a> on angular materials page doesn't have to use
  [@detailExpand] for the expand detail mat-row however I have to use otherwise I see a empty row in between 2 rows of data. Why so? Does it have to do anything with this problem?</p>
  <pre><code> &lt;mat-row *matRowDef=&quot;let row; columns: ['expandedDetail'];&quot;
        [@detailExpand]=&quot;row === expandedElement ? 'expanded' : 'collapsed'&quot;&gt;
      &lt;/mat-row&gt;
  </code></pre>