Every once in a while a stack overflow post will grab me and this is one. The user wanted to loop over a list of items and--basically--hide or show more details as the user clicked on buttons.

This one caught my eye because the user was mixing Angular and JQuery. I jumped in in order to prevent him from destroying humanity as we know it.

I put together an sample showing how I might do it in Angular.

First, I reworked the HTML template a bit. Instead of using a numerical IDs to access the HTML element through JQuery, I used *ngIf and a boolean array:

view plain print about
1<div class="row" *ngFor="let doctor of doctordata;let i=index">
2 <button (click)="appointmentToggle(doctor, 'video', i)">video</button>
3 <button (click)="appointmentToggle(doctor,'clinic',i)">In-clinic</button>
4 <div class="row" id="clinicShow{{i}}" *ngIf="hideClinic[i]">
5 <button (click)="clinicdetails(i)">clinicName</button>
6 </div>
7 <div class="col-lg-12 col-sm-12" id="videoappointmentShow{{i}}" *ngIf="hideVideo[i]">
8 videocalendertimeslot
9 </div>
10</div>

The code loops over the doctordata array. Shows a few buttons that will call methods to show or hide other data. Since the original user was toggling everything, some things hidden will vanish when I don't think we'd want them to.

In the Angular component, I set up a DoctorData array:

view plain print about
1doctordata = [
2 {}, {}, {}, {}, {}, {}, {}, {}
3 ];

It was very easy to make dummy data since no data was displayed from the component in the view.

Then I created two variables to show or hide the two elements:

view plain print about
1hideVideo: boolean[] = [];
2 hideClinic: boolean[] = [];

In ngOnInit() I looped over the doctordata array and used that to hide everything inside hideVideo and hideClinic:

view plain print about
1ngOnInit(): void {
2 this.doctordata.forEach(() =>
{
3 this.hideVideo.push(false);
4 this.hideClinic.push(false);
5 });
6 }

Then to show or hide things, in the appointmentToggle() method, just do something like this:

view plain print about
1appointmentToggle(doctor, type, i): void {
2 this.hideClinic[i] = !this.hideClinic[i];
3 this.hideVideo[i] = !this.hideVideo[i];
4}

The original code was slightly more complex, potentially toggling other items and keep tracking of the previously selected item.

This is one approach to hide or display something. It may cause an issue when adding or removing items from the middle of the datadoctor array because you'd also have to update the two boolean arrays. I'd rather show, or hide, stuff based on the elements of the objects in the datadoctor array, however it does not always make sense to include display logic in your data objects.