Angular 9 :: NgbModal is navigating on load

Question

I'm having issues loading two modals (openModalEdit and openModalDetail method) on my Angular 9 project. When I open it, it automaticly navigates to the root route.

I have another instance (openModalCreate 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.

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.

My bootstrap installed version is "@ng-bootstrap/ng-bootstrap": "^6.0.3".

Does anyone know how to prevent navigation on NgbModal load?

Codebehind:

    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(() => {
            modalRef.close();
        });
        modalRef.componentInstance.save.subscribe((event) => {
            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(() => {
            modalRef.close();
        });
        modalRef.componentInstance.save.subscribe((event) => {
            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) => {
            const entry = {
                name: e[0],
                value: e[1],
            };
            this.detailArray.push(entry);
        });
        this.modalService.open(content).result.then(
            (result) => { debugger },
            (reason) => { debugger }
        );
    }

HTML

<div class="form-group dynamic-group field" [formGroup]="group">
    <div class="add-btn">
        <app-button (click)="openModalCreate()" clasesBtn="btn-primary" icono="plus-circle"> </app-button>
    </div>
    <div [attr.id]="config.name" [attr.name]="config.name" class="master-table">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th *ngFor="let header of config.fields" scope="col">
                        {{ (header.header ? header.header : header.name) | translate }}
                    </th>
                    <th *ngIf="config.actions">
                        {{ 'actions' | translate }}
                    </th>
                </tr>
            </thead>
            <tbody [ngSwitch]="true">
                <tr *ngFor="let row of rows; index as i">
                    <td *ngFor="let header of config.fields">
                        <div class="ellipsis max-width-cell">
                            {{ showDataTable(row[header?.name], header.name) }}
                        </div>
                    </td>
                    <td *ngIf="config.actions">
                        <div class="table-body_row_actions">
                            <a *ngFor="let action of config.actions" href="" (click)="emitIconButtonClick(action.name, i, content)" [ngClass]="{
                                    'table-body_row_actions-container': true,
                                    delete: action.name === 'delete'
                                }">
                                <i-feather name="{{ action.icon }}" class="feather-icon"></i-feather>
                            </a>
                        </div>
                    </td>
                    <ng-template #content let-modal>
                        <div class="modal-header">
                            <h4 class="modal-title">
                                {{ 'detail' | translate }}
                            </h4>
                            <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('')">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body custom-modal-body">
                            <div class="flex-container">
                                <div class="dataCell" *ngFor="let field of detailArray">
                                    <div class="header">
                                        {{ field.name | translate }}
                                    </div>
                                    <div class="data">
                                        {{ showDataTable(field.value, field.name) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ng-template>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

RESOLVED by @zainhassan

--> Remove href="" from a tag