Clarity modal does not work properly with ngFor

Question

I have an issue with the clarity modal.

I have an ngFor displaying a list. In that ngFor, I have a button to display the modal. When I click the button, it will display the modal for each item that there is in the list.

I used the ngbootstrap modal before and it was working fine, only displaying a single modal.

The component displaying the modal is itself inside another component but it did not interfere with it before (when it was the bootstrap version). I reckon it has something to do with the boolean becoming "true" hence becoming true for all modals.

How can I reproduce the behavior of the ngbootstrap modal with the clarity modal ?

I tried to put in his own subcomponent but it did not work either.

HTML :

<div class="details">
    <div class="">
        <div *ngFor="let content of doctors" [ngClass]="{'deleted': content.deleted}">
            <mat-divider></mat-divider>
            <div class="subscription">

                <div class="dashboard-agendas" [ngClass]="{'list-group-item-danger': content.deleted}">
                    <div class="dash-title">Nom de l'agenda : {{content.information.name}}</div>
                    <clr-dropdown [clrCloseMenuOnItemClick]="true">
                        <button class="dropdown-toggle btn btn-outline-primary" *ngIf="!content.deleted"
                            clrDropdownTrigger>Options
                            <clr-icon shape="caret down"></clr-icon></button>
                        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
                            <button (click)="onNavigateEdition(content)" routerLinkActive="router-link-active"
                                class="dropdown-item" clrDropdownItem>Modifier
                                l'agenda</button>
                            <button [routerLink]="['/webSite']" routerLinkActive="active" class="dropdown-item"
                                clrDropdownItem>Configurer
                                le
                                site</button>
                            <button class="dropdown-item" clrDropdownItem>Importer les contacts</button>
                            <button (click)="opened = true" class="dropdown-item" clrDropdownItem>Suspendre
                                cet agenda</button>
                        </clr-dropdown-menu>
                        <button *ngIf="content.deleted" (click)="restoreAgenda(content)"
                            class="btn btn-outline-danger">RéACTIVER </button>

                    </clr-dropdown>
                    <hr>
                    <div class="agenda-informations">
                        <div class="dash">Email: {{content.email}}</div>
                        <div class="dash">Téléphone: {{content.information.phoneNumber}}</div>
                        <div class="dash">Téléphone portable: {{content.information.mobilePhoneNumber}}</div>
                        <div class="dash">Adresse: {{content.information.address}}</div>
                    </div>
                    <div class="agenda-informations-comp">
                        <div class="dash">Code postal: {{content.information.zipcode}}</div>
                        <div class="dash">Ville: {{content.information.city}}</div>
                        <div class="dash">CTI : {{content.information.ctiId}}</div>
                    </div>
                </div>

                <!-- <app-deletion-confirmation [opened]="opened" [content]="content" [idOrg]="idOrg"
                    (openModal)="displayChange($event)"></app-deletion-confirmation> -->

                <clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false" class="fadeDown in modal-dialog">
                    <h4 class="modal-title">Demande de confirmation</h4>
                    <div class="modal-body">
                        <p>Vous allez désactiver cette agenda</p>
                        <p>Confirmez-vous ?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" (click)="deleteAgenda(content)"
                            (click)="opened = false">Valider</button>
                        <button type="button" class="btn btn-danger" (click)="opened = false">Annuler</button>
                    </div>
                </clr-modal>

            </div>
        </div>
    </div>
</div>

TS:

 import { Component, OnInit, Input } from '@angular/core';
    import { HttpRequestService } from 'src/app/core/http/http-request.service';
    import { Router } from '@angular/router';
    import { DataSharedService } from 'src/app/core/services/data-shared.service';
    import { faTimes } from '@fortawesome/free-solid-svg-icons';

    @Component({
      selector: 'app-agenda-display',
      templateUrl: './agenda-display.component.html',
      styleUrls: ['./agenda-display.component.scss'],
      animations: [

      ]
    })
    export class AgendaDisplayComponent implements OnInit {

     @Input() doctors;
     @Input() idOrg;
     @Input() onShow;

     faTimes = faTimes;

     opened: boolean = false;

      constructor(private http: HttpRequestService, private router: Router, private data:        DataSharedService) { }

      ngOnInit(): void {
    
      }

      restoreAgenda(doctor: any) {
       this.http.restoreAgenda(this.idOrg, doctor.doctorRoleId).subscribe(data => {

      doctor.deleted = false;

    })

    }

     onNavigate(orga) {
      this.data.setSessionStorage('idOrg', orga.id);
      this.router.navigate(['/creation']);
    }

     onNavigateEdition(user) {
       this.router.navigate(['/creation'], { queryParams: { edition: user.userId } });
     }

     displayChange(e) {
       e = false;
     }

     deleteAgenda(doctor: any) {
       this.http.deleteAgenda(this.idOrg, doctor.doctorRoleId).subscribe(data => {

        doctor.deleted = true;
       this.opened = false;
      });

     }

     // onCloseModal() {
     //   this.openModal.emit(this.opened);
     // }
    }

Any help appreciated.