[Fixed] How to change value (from selecting) but not change the reference value

Issue

I got a problem in angular framework
when I click to choose value form ng-for

<tr *ngFor="let dept of department" (click)="clinicChoose(dept)">
  <td class="text-center">{{dept.sectionCode}}</td>
  <td>{{dept.sectionName}}</td>
  <td class="text-center" [style.color]="dept.flagStatus == 0 ? 'blue' : 'red'"></td>
</tr>

in clinicChoose function is

 clinicChoose(dept: CSection) {
    this.clinic = dept
  }

and then at the UI when I change value in this.clinic like this.clinic.flagStatus == 1
value that I choose in table is change too!!
I don’t want it change, so what should I do?

when click row (red) on table I will get data (green)

but when I change something, data in table that I choose is changed too whyyyyyyy

Solution

You should perform a deep cloning of your dept when assigning it. So, create a function (or use a library) that clones an object and assign it like this.clinic = deepClone(dept); Your this.clinic will be a separate object now and will not affect the original list anymore.