Angular 6 calling ng boostrap popup dialog from navbar routerlink

Question

User956626884 posted

Hi,

I am trying to open a ng-bootstrap popup modal dialog from my navbar which uses routerlinks. I went through the tutorial at ng-bootstrap.github.io. I created a new component and added the sample code. However, instead of a button on the webpage, I need to invoke the modal popup from my navbar routerlink which are located in my header.component.html. Any help is greatly appreciated.

component.html code:

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, World!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
    </div>
  </ng-template>

  <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

component.ts code:

import { Component } from '@angular/core';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  providers: [NgbModalConfig, NgbModal]
})
export class LoginComponent {

  constructor(config: NgbModalConfig, private modalService: NgbModal) {
    // customize default values of modals used by this component tree
    config.backdrop = 'static';
    config.keyboard = false;
  }

  open(content) {
    this.modalService.open(content);
  }
}

In my header.component.html, I got a loop to iterate each routerlink but I know that i need to get rid of the loop and write each routerlink explicitly.

 <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
                                    <a class="nav-link" [routerLink]="[menuItem.path]">

                                        <a> {{menuItem.title}}</a>
                                    </a>
                                </li>
<!-- <a href="#" data-toggle="modal" data-target="#login" class="btn btn-primary btn-md navbar-btn ml-0 ml-md-4">Login </a>  -->
                            </ul>

Answer 1

User61956409 posted

Hi comicrage,

However, instead of a button on the webpage, I need to invoke the modal popup from my navbar routerlink which are located in my header.component.html.

In your code, we can find that the modal would be triggered by clicking the button. If you'd like to show the modal while user click the routerLink, you can try to put the bootstrap modal in header.component.html and open it in routerLink onClick() event.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, World!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
    </div>
  </ng-template>
  
  <!-- <button #mybutton class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button> -->

<br/>
<br/>
<a routerLink = "login" (click)="rtlclick(content)">Login Component</a>
<br/>
<br/>
<br/>
<router-outlet></router-outlet>

In header.component.ts:

constructor(config: NgbModalConfig, private modalService: NgbModal) {
  // customize default values of modals used by this component tree
  config.backdrop = 'static';
  config.keyboard = false;
}

rtlclick = function(content) {
  this.modalService.open(content);
};

Test Result:

With Regards,

Fei Han