@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>
}
  • Вопрос задан
  • 55 просмотров
Решения вопроса 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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы