Can we change multiple variable dynamically using same function?

Take this as an example, there are 2 functions, clearSubstitutions and handleApply, And 2 input fields, EnteredAvailableZoneValues, and EnteredUnavailableZoneValues, both must act similar the difference is of variable. I dont want to write 4 different functions as they behave similarly, passing array by reference did not work, so I tried this approach which also failed.. Can someone please help me solve this problem...

<div class="flex flex-col flex-1"> <!-- Available Zones Section -->
<div class="view-text flex flex-col flex-1 justify-between" id="zones">
<div class="flex flex-row w-full items-center">
<span class="w-[20%] mr-4">{{ 'Available in' | translate }}</span>
<mat-form-field class="w-full relative">
<span *ngIf="enteredAvailableZoneValues" class="filter_label absolute right-0 font-bold" (click)="handleApply(true)" \> APPLY </span>
<mat-label>Put zone id separated by comma</mat-label>
<input matInput name="zone-id-input" [(ngModel)]="enteredAvailableZoneValues" required />
</mat-form-field>
</div>
<div *ngIf="enteredAvailableZones?.length > 0" class="flex flex-col w-[70%]">
<div class="w-full text-left mb-2">
<div class="clear-all cursor-pointer" (click)="clearSubstitution(true)"> Clear All </div>
</div>
<div class="flex flex-row flex-wrap">
<div *ngFor="let zone of enteredAvailableZones; trackBy: trackByZoneId" class="chip-wrapper" \> <mat-basic-chip class="chip visible"> {{ zone.name }} <strong class="cursor-pointer" (click)="clearSubstitution(true, zone.id)"> X </mat-basic-chip>
</div>
</div>
</div>
</div>


<!-- Not Available Zones Section -->
<div class="view-text flex flex-col flex-1 justify-between" id="zones">
<div class="flex flex-row w-full items-center">
<span class="w-[20%] mr-4">{{ 'Not Available in' | translate }}</span>
<mat-form-field class="w-full relative">
<!-- Display APPLY button when there are entered zone values -->
<span
*ngIf="enteredUnAvailableZoneValues"
class="filter_label absolute right-0 font-bold"
(click)="handleApply(false)"
>
APPLY
</span>
<mat-label>Put zone id separated by comma</mat-label>
<input
matInput
name="zone-id-input"
[(ngModel)]="enteredUnAvailableZoneValues"
required
/>
</mat-form-field>
</div>
<!-- Display the unavailable zones list if there are any zones -->
<div *ngIf="enteredUnAvailableZones?.length > 0" class="flex flex-col w-[70%]">
<div class="w-full text-left mb-2">
<div class="clear-all cursor-pointer" (click)="clearSubstitution(false)">
Clear All
</div>
</div>
<div class="flex flex-row flex-wrap">
<div
*ngFor="let zone of enteredUnAvailableZones; trackBy: trackByZoneId"
class="chip-wrapper"
>
<mat-basic-chip class="chip visible">
{{ zone.name }}
<strong class="cursor-pointer" (click)="clearSubstitution(false, zone.id)">
X
</strong>
</mat-basic-chip>
</div>
</div>
</div>
</div>
</div>


import { Component } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser";

@Component({
selector: "app-root",
standalone: true,
template: ""
})
export class App {
enteredAvailableZoneValue = "";
enteredUnAvailableZoneValue = "";
enteredAvailableZone = {};
enteredUnAvailableZone = {};

getEnteredZoneType(isAvailabeZone: boolean): { id: string; name: string }[] {
if (isAvailableZone) return this.enteredAvailableZone;
return this.enteredUnAvailableZone;
}

handleApply(isAvalableZone: boolean) {
if (
!this.enteredAvailableZoneValues &&
!this.enteredUnAvailableZoneValues
) {
return;
}
this.loading = true;

let zone = this.getEnteredZoneType(isAvalableZone);
this.zoneService
.getZonesById(
isAvalableZone
? this.enteredAvailableZoneValues
: this.enteredUnAvailableZoneValues,
)
.subscribe(
(zones: any[]) => {
zone = zones.map((zone) => ({ id: zone.id, name: zone.name }));

console.log(
"Updated zones:",
zone,
this.getEnteredZoneType(isAvalableZone),
);
console.log(this.enteredAvailableZones);
this.loading = false;
},
(error) => {
this.loading = false;
this.notify("Error fetching zones", {
position: "top",
duration: "3000",
type: "error",
});
},
);
}

clearSubstitution(isAvalableZone: boolean, id?: string) {
let zone = this.getEnteredZoneType(isAvalableZone);
if (id) {
zone = this.getEnteredZoneType(isAvalableZone).filter(
(zone) => zone.id !== id,
);
} else {
this.getEnteredZoneType(isAvalableZone).length = 0;
}
}
}

bootstrapApplication(App);

Continue reading...