CODEWITHSUNDEEP
javascripthtmlcssangulartypescript
Youri
Youri

Reputation: 313

Why is the button not opening the pressed button's modal?

In the end I want to make the button open a modal filled with the information of the pressed button's product. I don't know how to pass this information to the modal.

The modal that opens has to contain the {{product.name}}, the {{product.description}}, amount of days people want to rent a product and a rent button.

<div class="row">
      <div class="col-md-3" style="padding-left:35px; padding-top: 35px;" 
      *ngFor="let product of products">

        <!-- Card Wider -->`enter code here`
<div class="card card-cascade wider shadow" style=" width: 15rem; height: 400px;">

    <!-- Card image -->
    <div class="view view-cascade overlay">
      <div class="inner">
      <img  class="card-img-top" src="{{product.imageUrl}}" alt="Card image cap">
      </div>
      <a href="#!">
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>

    <!-- Card content -->
    <div class="card-body card-body-cascade text-center">

      <!-- Title -->
      <h4 class="card-title"><strong>{{product.name}}</strong></h4>
      <!-- Subtitle -->

      <!-- Text -->
      <p class="card-text">{{product.description}} </p>

      <!-- Price and rent button-->
      <div >
          <hr>
          <div>
              <p><b>$1</b> /day</p>
              <button type="button" class="btn btn-success" data-toggle="modal" data-target="#rentScreen">
                Rent
              </button>
            </div>
      </div>
    </div>
  </div>
      </div>
</div>

MODAL: 

<div class="modal fade" id="rentScreen">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">Product name</h2>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Description of product</p>
      </div>
      <div class="model-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">confirm</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 240

Answers (1)

MorpheusZero
MorpheusZero

Reputation: 319

Using pure Bootstrap modals like this:

<!-- MODAL -->

<div class="modal fade" id="rentScreen">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">{{activeProduct.name}}</h2>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{{activeProduct.description}}</p>
      </div>
      <div class="model-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">confirm</button>
      </div>
    </div>
  </div>
</div>

Then in your component file--you just need an additional variable for tracking the activeProduct. When the button is pressed--it needs to call a function that passes the clicked product and sets the value of activeProduct.

public activeProduct: any;

public openModal(product): void {
     // Copying object reference so we dont modify the original
     this.activeProduct = Object.assign({}, product);
}

Then your Button code:

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#rentScreen" (click)="openModal(product)">
                Rent
              </button>

I've never actually used Bootstrap modals and then ran a click function on the button at the same time--so if the modal doesn't open in this way--you may need to use Javascript to programmatically open the modal in the openModal() function as well.

Upvotes: 1

Related Questions