Is it possible trigger modals which is on different component?

Question

I have used mdbootstrap. I have two component MenuComponent and JoinClassComponent. I am search the way to trigger modal dialog which is on JoinClassComponent when link on MenuComponent is clicked. Here is my html for the above components.

Menu.component.hmtl

<header style="padding-bottom: 90px;">
  <nav class="navbar fixed-top navbar-expand-lg scrolling-navbar Red lighten-5">
    <a class="navbar-brand" href="/"><strong>Campus Assessment System</strong></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto nav-flex-icons">
        <li class="nav-item dropdown btn-group" dropdown>
          <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light caret-off" mdbWavesEffects>
            <i class="fas fa-plus"></i>
          </a>
          <div *dropdownMenu class="dropdown-menu dropdown dropdown-menu-right dropdown-primary" role="menu">
            <a class="dropdown-item waves-light" href="#" mdbWavesEffect (click)="joinClass()">Join class</a>
            <a class="dropdown-item waves-light" href="#" mdbWavesEffect>Create class</a>
          </div>
        </li>
        <li class="nav-item avatar dropdown" dropdown>
          <a dropdownToggle class="nav-link dropdown-toggle waves-effect waves-light caret-off">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" class="img-fluid rounded-circle z-depth-0" style="height:30px;">
          </a>
          <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
            <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
            <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
            <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
            <div class="divider dropdown-divider"></div>
            <a class="dropdown-item waves-light" mdbWavesEffect href="#" (click)="logout()">Logout</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header>
<app-join-class></app-join-class>

join-class.component.html

<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
        <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save!</button>
      </div>
    </div>
  </div>
</div>

I want to show #basicModal when <a class="dropdown-item waves-light" href="#" mdbWavesEffect (click)="joinClass()">Join class</a> is clicked on menu.component.html is clicked.

score 0 · Answer 1 · answered Mar 15 '19 at 06:37

0

This might help, you pass a reference to the modal in the service, and then use the service to open/close it from any component you inject it to https://stackoverflow.com/a/55140862/10800899

answered Mar 15 '19 at 06:37

Bogdan B

846
9
23

score 0 · Answer 2 · answered Mar 15 '19 at 12:20

You can create a service with subject of rxjs and subscribe the same in join-class.component.ts. and when <a class="dropdown-item waves-light" href="#" mdbWavesEffect (click)="joinClass()">Join class</a> is clicked send a value to subject. when you send a value to subject. That value will send automatically to the subscriber of that subject. below is the example that will give you idea

Create a service and add a property.

  private openPopup = new Subject<boolean>(false); 

    get getOpenPopupSubscription() {
        return this.loggedIn.asObservable();  
    }

   OpenPopup(state: boolean) {
    this.loggedIn.next(state);
   }

In join-class.component.ts file

  openPopupSubscription: Subscription;

     ngOnInit() {

         this.openPopupSubscription = 
         this.popUpService.getOpenPopupSubscription.subscribe(data => {

             if(data){
             // put your logic to open the popup
             } 
           });
      }

    joinClass(){
      this.popUpService.OpenPopup(true);
    }

Is it possible trigger modals which is on different component?

2 Answers2