Open Modal on a component within several other components. What is the best practice?

    <app-loop4 [data4]="data4"></app-loop4>





    //O que há dentro do component: app-loop4 
    <div *ngFor="let d4 of data4">
        <app-loop3 [d4]="d4"></app-loop3>
    </div>
    //O que há dentro do component: app-loop3
    <div *ngFor="let d3 of d4">
        <app-loop2 [d3]="d3"></app-loop2>
    </div>
    //O que há dentro do component: app-loop2
    <div *ngFor="let d2 of d3">
        <app-loop [d2]="d2"></app-loop>
    </div>
    //O que há dentro do component: app-loop
    <div *ngFor="let data of d2">
        <app-form-modal [data]="data"></app-form-modal>
    </div>

    //O que há dentro do <app-form-modal>
    <app-form-modal [data]="data"></app-form-modal>
    <ng-template #content let-c="close" let-d="dismiss">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{{ data.value1 }}</p>
        <p>{{ data.value2 }}</p>
        <p>{{ data.value3 }}</p>
        <p>{{ data.value4 }}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
      </div>
    </ng-template>
    <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

Is this a good practice or not?

The best way in my opinion is to create a modal Component (out of all loops and all components) and dynamically assign the data inside it instead of generating the modal several times inside the loop and assigning the data . Note the component: which loop to generate the modal (* ngFor);

But how do I do this?