title: Why is the button not opening the pressed button's modal?
body: <p>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. </p>
  
  <p>The modal that opens has to contain the <code>{{product.name}}</code>, the <code>{{product.description}}</code>, amount of days people want to rent a product and a rent button.</p>
  
  <pre><code>&lt;div class="row"&gt;
        &lt;div class="col-md-3" style="padding-left:35px; padding-top: 35px;" 
        *ngFor="let product of products"&gt;
  
          &lt;!-- Card Wider --&gt;`enter code here`
  &lt;div class="card card-cascade wider shadow" style=" width: 15rem; height: 400px;"&gt;
  
      &lt;!-- Card image --&gt;
      &lt;div class="view view-cascade overlay"&gt;
        &lt;div class="inner"&gt;
        &lt;img  class="card-img-top" src="{{product.imageUrl}}" alt="Card image cap"&gt;
        &lt;/div&gt;
        &lt;a href="#!"&gt;
          &lt;div class="mask rgba-white-slight"&gt;&lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Card content --&gt;
      &lt;div class="card-body card-body-cascade text-center"&gt;
  
        &lt;!-- Title --&gt;
        &lt;h4 class="card-title"&gt;&lt;strong&gt;{{product.name}}&lt;/strong&gt;&lt;/h4&gt;
        &lt;!-- Subtitle --&gt;
  
        &lt;!-- Text --&gt;
        &lt;p class="card-text"&gt;{{product.description}} &lt;/p&gt;
  
        &lt;!-- Price and rent button--&gt;
        &lt;div &gt;
            &lt;hr&gt;
            &lt;div&gt;
                &lt;p&gt;&lt;b&gt;$1&lt;/b&gt; /day&lt;/p&gt;
                &lt;button type="button" class="btn btn-success" data-toggle="modal" data-target="#rentScreen"&gt;
                  Rent
                &lt;/button&gt;
              &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>MODAL: </p>
  
  <pre><code>&lt;div class="modal fade" id="rentScreen"&gt;
    &lt;div class="modal-dialog modal-dialog-centered"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h2 class="modal-title"&gt;Product name&lt;/h2&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;
            &lt;span&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Description of product&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="model-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;confirm&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>