How to highlight only one expansion panel onclick and reset if choose other

Question

Firstly, I am very new to Angular world. Trying to achieve a task. I really appreciate all inputs. Coming to the issue.

I am creating multiple expansion panel using a "ngFor". I want to highlight or change style sheet for only the panel that user selected. Rest all panels should have default style sheet. when user clicks the second panel then it should highlight second panel and reset the first panel to default.

"ngFor loop" is one component and it interacting with "mat expansion panel" in another component. So, I am finding difficulty to reset the previous highlighted panel when user clicks the other panel.

I used "css style - focus" it worked as charm. But the problem is, even if I click anywhere on the screen the css style sets to default. I want only when user selects other panel then it should reset.

I also tried finding previous element and current element and compare them based on that try to change the style. It is working but I am not able to reset if user select second panel. Both are getting highlighted.

This is first component HTML :

</div>
    <app-cpd-pres-deck-view *ngFor="let pres of allPres; let idx = index;" [pres]="pres" [isExpanded]= "idx==0" ></app-cpd-pres-deck-view>
</div>

This is mat expansion panel component html :

<mat-expansion-panel [expanded]="isExpanded" hideToggle="true" style="margin: 5px;" class="prestest"  [(expanded)]="expanded">
        <!-- <mat-expansion-panel [expanded]="false"  (click)="clickIcon()" hideToggle="true" style="margin: 5px;" class="prestest"  > -->
    <mat-expansion-panel-header (click)="openPresDeck()" [collapsedHeight]="'60px'" [expandedHeight]="'60px'">

    <mat-panel-title>
        <mat-icon class="arrow">{{expanded  ?  'arrow_drop_down' : 'arrow_right' }}</mat-icon>
        <div  class="col-md-9" >
            <label class="name" id="lblName"  >{{pres.profileName}}</label>
            <!-- <label class="name" id="lblName"  >{{pres.profileName}}</label>  -->
         </div>...
some more content 
  </mat-panel-description>
</mat-expansion-panel>

When page is loaded, it loads all panels with default style sheet. Now when use select any panel it should highlight that panel and reset if user select another panel.

Answer 1

There's a class in mat-expansion called 'mat-expanded', when this class is added to the selected tab. For example:

.mat-expanded {
  background: #f5f5f5;
}

When user click another panel, this class is added to another panel.

You can control the highlight based on that class.

Answer 2

welcome to SO and Angular.

i think you came very close when you tried this;

I also tried finding previous element and current element and compare them based on that try to change the style. It is working but I am not able to reset if user select second panel. Both are getting highlighted.

what you should have done is that instead of finding previous element;

• on each element keep track of selected status (initially false)

export class AppCpdPresDeckViewComponent implements OnInit {

  isSelected = false;
}

• find all elements on parent element

export class FirstComponent implements OnInit {
  @ViewChildren(AppCpdPresDeckViewComponent) panels: QueryList<AppCpdPresDeckViewComponent>;
}

• reset all elements to unselected state and select current element

  selectPanel(selectedPanel: AppCpdPresDeckViewComponent) {
    this.panels.forEach(p => p.isSelected = false);
    selectedPanel.isSelected = true;
  }

in first.component.html

<app-app-cpd-pres-deck-view #acdw *ngFor="let pres of allPres" [pres]="pres" (click)="selectPanel(acdw)"></app-app-cpd-pres-deck-view>

here is a working demo