Angular2 how to change a css calls using ng class but only for specific elements

Question

I have a mat-accordion and when a user clicks mat-expansion-panel I want to change out the icon CSS class so far I have that working but I need it to change the class for only the selected panel here is my code

html

<mat-expansion-panel hideToggle (opened)="onExpand()" (closed)="onCollapse()">
  <mat-expansion-panel-header>
    <mat-panel-title>
      <mat-icon [ngClass]="calculateClasses()" id="panel1">lock</mat-icon>
      <div>
        <div class="header-text">Change password</div>
        <div class="header-text-sub">*********</div>
      </div>
    </mat-panel-title>
  </mat-expansion-panel-header>
  <app-change-password></app-change-password>
</mat-expansion-panel>

ts

onExpand() {
  this.panelOpenState = true
}

onCollapse() {
  this.panelOpenState = false
}

calculateClasses() {
  let element = document.getElementById('panel1');
  //document.getElementById('panel1')
  if (this.panelOpenState == true) {
    return "circle-icon-selected"
  } else {
    return "circle-icon"
  }
}

Trying to change the code for mat-icon [ngClass]="calculateClasses()"

Updated code, as you can see there are two panels and I only want to change the icon in the panel that is currently opened

<mat-expansion-panel hideToggle (opened)="onExpand()" (closed)="onCollapse()">
  <mat-expansion-panel-header>
    <mat-panel-title>
      <mat-icon [ngClass]="panelOpenState ? 'circle-icon-selected' : 'circle-icon'">lock</mat-icon>
      <div>
        <div class="header-text">Change password</div>
        <div class="header-text-sub">*********</div>
      </div>
    </mat-panel-title>
  </mat-expansion-panel-header>
  <app-change-password></app-change-password>
</mat-expansion-panel>

<mat-expansion-panel hideToggle (opened)="onExpand()" (closed)="onCollapse()">
  <mat-expansion-panel-header>
    <mat-panel-title>
      <mat-icon [ngClass]="panelOpenState ? 'circle-icon-selected' : 'circle-icon'">phone_outline</mat-icon>
      <div>
        <div class="header-text">Change support PIN</div>
        <div class="header-text-sub">3402</div>
      </div>
    </mat-panel-title>
  </mat-expansion-panel-header>
  <app-support-pin></app-support-pin>
</mat-expansion-panel>

you could use a conditional operator on ng class – Roopesh Kumar Ramesh Jul 24 '18 at 06:32 — Roopesh Kumar Ramesh, Jul 24 '18 at 06:32
like so `[ngClass]="isSet? 'class1': 'class2'"` – Roopesh Kumar Ramesh Jul 24 '18 at 06:35 — Roopesh Kumar Ramesh, Jul 24 '18 at 06:35

Brn.Rajoriya · Answer 1 · 2018-07-24T08:17:49.490

1

Read this one or this one.

[ngClass]="panelOpenState ? 'circle-icon-selected' : 'circle-icon'"

onExpand(num:number) {
    if(num==1) {
        this.panel1OpenState = true;
    } else if(num==2) {
        this.panel2OpenState = true;
    }
}

onCollapse(num:number) {
    if(num==1) {
        this.panel1OpenState = false;
    } else if(num==2) {
        this.panel2OpenState = false;
    }
}

And now call the function like onExpand(1) and onCollapse(1) in first panel and so on by changing number.

edited Jul 24 '18 at 08:17

answered Jul 24 '18 at 06:34

Brn.Rajoriya

1,534
2
23
35

That changes it for all the panels I have 5 panels and only want to change it for the selected or opened one – Almog Jul 24 '18 at 07:14
@AlmogKoren Sorry, I am unable to understand the problem. Please share code and describe the problem in detail. – Brn.Rajoriya Jul 24 '18 at 07:41
Updated the Answer. Please check and revert. – Brn.Rajoriya Jul 24 '18 at 09:14
This works but it means you have to create panelOpenState1 for each panel I have 10 so it's a lot vars, I was looking for something like jquery select element by id – Almog Jul 24 '18 at 12:25
you can define array. – Brn.Rajoriya Jul 24 '18 at 12:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176647/discussion-between-bhaskar-rajoriya-and-almog-koren). – Brn.Rajoriya Jul 24 '18 at 12:35
panelOpenState = []; // define this.panelOpenState[i] = false; in loop onExpand(num:number) { this.panelOpenState[num] = true; } onCollapse(num:number) { this.panelOpenState[num] = false; } – Brn.Rajoriya Jul 25 '18 at 03:52
No I did something else – Almog Jul 27 '18 at 01:04
Ok. Please post the Solution here. – Brn.Rajoriya Jul 27 '18 at 04:23

Angular2 how to change a css calls using ng class but only for specific elements

1 Answers1