title: Angular 9 :: NgbModal is navigating on load
body: <p>I'm having issues loading two modals (<strong>openModalEdit</strong> and <strong>openModalDetail</strong> method) on my Angular 9 project. When I open it, it automaticly navigates to the root route.</p>
  <p>I have another instance (<strong>openModalCreate</strong> method) of a modal in the same component, apparently both are the same changing only a couple of parameters like the modal title, but the first navigates and the other stays in the modal.</p>
  <p>You get to see the modal appearing just before the navigation moves to the root route and the OnInit method of the modal component doesn't have any code, so the modal component doesn't have any functionality that can provoke the navigation in any point.</p>
  <p>My bootstrap installed version is &quot;@ng-bootstrap/ng-bootstrap&quot;: &quot;^6.0.3&quot;.</p>
  <p>Does anyone know how to prevent navigation on NgbModal load?</p>
  <p><strong>Codebehind:</strong></p>
  <pre><code>    emitIconButtonClick (action, i, content) {
          switch (action) {
              case 'edit':
                  this.openModalEdit(i);
                  break;
              case 'delete':
                  this.onDeleteRow(i);
                  break;
              case 'detail':
                  this.openModalDetail(i, content);
                  break;
              default:
                  break;
          }
      }
  
          openModalCreate () {
          this._formsService.editing = false;
          const modalRef = this.modalService.open(DynamicModalComponent, {
              size: 'lg',
          });
          modalRef.componentInstance.title = 'Nuevo ' + this.config.label;
          modalRef.componentInstance.fields = this.config.fields;
          modalRef.componentInstance.close.subscribe(() =&gt; {
              modalRef.close();
          });
          modalRef.componentInstance.save.subscribe((event) =&gt; {
              this._formsService.setSavedStatusForm(false);
              this.rows.push(event);
              this.bindToForm();
              modalRef.close();
          });
      }
  
      openModalEdit (index: number) {
          const modalRef = this.modalService.open(DynamicModalComponent, {
              size: 'lg',
          });
          modalRef.componentInstance.title = 'Editar ' + this.config.label;
          modalRef.componentInstance.fields = this.config.fields;
          modalRef.componentInstance.data = this.rows[index];
          modalRef.componentInstance.close.subscribe(() =&gt; {
              modalRef.close();
          });
          modalRef.componentInstance.save.subscribe((event) =&gt; {
              this.rows[index] = event;
              this._formsService.setSavedStatusForm(false);
              this.bindToForm();
              modalRef.close();
          });
      }
  
      openModalDetail (i: number, content: any) {
          this.detailArray = [];
          Object.entries(this.rows[i]).forEach((e) =&gt; {
              const entry = {
                  name: e[0],
                  value: e[1],
              };
              this.detailArray.push(entry);
          });
          this.modalService.open(content).result.then(
              (result) =&gt; { debugger },
              (reason) =&gt; { debugger }
          );
      }
  
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;form-group dynamic-group field&quot; [formGroup]=&quot;group&quot;&gt;
      &lt;div class=&quot;add-btn&quot;&gt;
          &lt;app-button (click)=&quot;openModalCreate()&quot; clasesBtn=&quot;btn-primary&quot; icono=&quot;plus-circle&quot;&gt; &lt;/app-button&gt;
      &lt;/div&gt;
      &lt;div [attr.id]=&quot;config.name&quot; [attr.name]=&quot;config.name&quot; class=&quot;master-table&quot;&gt;
          &lt;table class=&quot;table table-striped&quot;&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th *ngFor=&quot;let header of config.fields&quot; scope=&quot;col&quot;&gt;
                          {{ (header.header ? header.header : header.name) | translate }}
                      &lt;/th&gt;
                      &lt;th *ngIf=&quot;config.actions&quot;&gt;
                          {{ 'actions' | translate }}
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody [ngSwitch]=&quot;true&quot;&gt;
                  &lt;tr *ngFor=&quot;let row of rows; index as i&quot;&gt;
                      &lt;td *ngFor=&quot;let header of config.fields&quot;&gt;
                          &lt;div class=&quot;ellipsis max-width-cell&quot;&gt;
                              {{ showDataTable(row[header?.name], header.name) }}
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td *ngIf=&quot;config.actions&quot;&gt;
                          &lt;div class=&quot;table-body_row_actions&quot;&gt;
                              &lt;a *ngFor=&quot;let action of config.actions&quot; href=&quot;&quot; (click)=&quot;emitIconButtonClick(action.name, i, content)&quot; [ngClass]=&quot;{
                                      'table-body_row_actions-container': true,
                                      delete: action.name === 'delete'
                                  }&quot;&gt;
                                  &lt;i-feather name=&quot;{{ action.icon }}&quot; class=&quot;feather-icon&quot;&gt;&lt;/i-feather&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;ng-template #content let-modal&gt;
                          &lt;div class=&quot;modal-header&quot;&gt;
                              &lt;h4 class=&quot;modal-title&quot;&gt;
                                  {{ 'detail' | translate }}
                              &lt;/h4&gt;
                              &lt;button type=&quot;button&quot; class=&quot;close&quot; aria-label=&quot;Close&quot; (click)=&quot;modal.dismiss('')&quot;&gt;
                                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;modal-body custom-modal-body&quot;&gt;
                              &lt;div class=&quot;flex-container&quot;&gt;
                                  &lt;div class=&quot;dataCell&quot; *ngFor=&quot;let field of detailArray&quot;&gt;
                                      &lt;div class=&quot;header&quot;&gt;
                                          {{ field.name | translate }}
                                      &lt;/div&gt;
                                      &lt;div class=&quot;data&quot;&gt;
                                          {{ showDataTable(field.value, field.name) }}
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/ng-template&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>