Not able to remove stylesheet from first row when click on any other row in Expandable Mat-Table in Angular

Please find my code here

I need help to remove style sheet from first row when click on any other row

Here is a code of Parent Row - Its always highlighted when refresh page

    <tr mat-row *matRowDef="let element; columns: columnsToDisplay; let i= 
      dataIndex" 
      [class.example-element-row]="element.addresses?.data.length" 
      [class.example-expanded-row]="expandedElement === element" 
      [ngClass]="i===0?'innerRowSelected':''"
      (click)="toggleRow(element)"   >
    </tr>

Here is a code from CSS

.innerRowSelected{
  background: purple;
 }
.selectedInnerRow
{
  font-weight: bold;
}
.example-expanded-row
{
    background: purple;

 }