Как открывать нужное модальное окно в цикле?

Question

[GaNaBoP]

Как сделать чтобы при клике на кнопку открывалось соответствующее модальное окно

@for(product of products; track product.id) {
  <div class="card my-card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">{{ product.title }}</h5>
      <h6 class="card-subtitle mb-2 text-body-secondary">{{ product.price }}</h6>
      @if (modal) {
      <app-product
        [title]="product.title"
        [describtion]="product.describtion"
        [price]="product.price"
        [rating]="product.rating"
      ></app-product>
      }
      @if(product.describtion.length > 100) {
        <p class="card-text">{{ product.describtion | slice:0:100 }} . . .</p>
      } @else {
        <p class="card-text">{{ product.describtion }}</p>
      }
      <button (click)="showmodal()" class="btn btn-primary">Детальная информация</button>
    </div>
  </div>
}

Comments

[historydev]

showmodal() покажи эту функцию

[GaNaBoP]

historydev,

modal: boolean = false

  showmodal() {
    this.modal = !this.modal
  }

вот, но очевидно что она не делает что нужно. я бы хотел объяснение как такое вообще реализуется

Answer 1

[historydev]

Зачем тебе цикл в компоненте модалки?

Вынеси модалку в отдельный компонент, а products вынеси либо в ngrx, либо в @Input директиву и прокидывай свыше. - с остальными данными которые нужны для компонента аналогично поступай.

Добавь цикл там, где нужно вызвать несколько модалок.

Это вынеси в app-product.

modal: boolean = false

  showmodal() {
    this.modal = !this.modal
  }

А здесь используй так:

<button (click)="product.showmodal()" class="btn btn-primary">Детальная информация</button>

И уже в app-product показывай или не показывай модалку в зависимости от modal

Comments

[GaNaBoP]

цикл у меня на главной странице, а app-product это и есть компонент модалки, который мне нужен для каждого продукта

[historydev]

GaNaBoP, обновил ответ