Angular6：如何从另一个组件打开模态

Question

I want to open a modal which is belong to a separate component.. I tried it but getting the error ERROR TypeError: Cannot read property 'show' of undefined

My code is like below,

product-catalog.component.html

<app-cart-table-modal></app-cart-table-modal>

<button type="button" class="btn btn-primary relative waves-light" (click)="basicModal.show(); loadCart(26);" mdbWavesEffect>My Cart</button>

cart-table-modal.component.html

<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
  <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
                  <span aria-hidden="true">×</span>
              </button>
              <h4 class="modal-title w-100" id="myModalLabel">
                  <i class="fa fa-cart-arrow-down fa-4x" aria-hidden="true"></i>
                  My Cart
              </h4>
          </div>
          <div class="modal-body">
              <!-- <table class="table table-sm table-striped"> -->
              <table class="table table-striped">
                  <thead class="mdb-color darken-3">
                    <tr class="text-white">
                      <th>#</th>
                      <th>Product</th>
                      <th>Model</th>
                      <th>quantity</th>
                      <th>Unit Price</th>
                      <th>Discount</th>
                      <th>Total</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                      <tr *ngFor="let cartitem of cartitems; let i = index">
                          <td>
                              <div class="checkbox">
                                  <label><input type="checkbox" (change) = "checkMarkCartitem(cartitem.cartItemId)">{{i+1}}</label>
                              </div>
                          </td>
                          <td>{{cartitem.description}}</td>
                          <td>{{cartitem.modelNo}}</td>
                          <td><input type="number" class="form-control" (blur)="changequantity(cartitem.productId)" 
                              value="{{cartitem.orderQuanity}}" size="16" [id]="'quantity' + cartitem.productId"></td>
                          <td>{{cartitem.unitPrice}}</td>
                          <td>{{cartitem.discountApplied}}</td>
                          <td>{{cartitem.totalItemAmountIncDiscount}}</td>
                          <td>
                            <div class="btn-group">
                              <button type="button" style="background-color: white"><i class="fa fa-close" 
                              style="font-size:24px;color:red"></i></button>
                             </div>     
                          </td>
                      </tr>
                      <tr>
                          <td colspan="6">Total</td>
                          <td>{{orderTotalAmount}}</td>
                      </tr>
                  </tbody>
                </table>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
              <button type="button" class="btn btn-primary relative waves-light" mdbWavesEffect (click) = "placeOrder();">Place Order</button>
          </div>
      </div>
  </div>
</div>

Any help would be highly Appreciated.. Thanks in Advance..

Answer 1

In product-catalog.component.html Replace:

<app-cart-table-modal></app-cart-table-modal>

With:

<app-cart-table-modal mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1"`role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop:` `false, ignoreBackdropClick: true}"></app-cart-table-modal>

Also in cart-table-modal.component.html delete the first tag wich is:

<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">