CODEWITHSUNDEEP
htmltwitter-bootstrapangularangular2-routing
Vivek Nuna
Vivek Nuna

Reputation: 1

li does not disappear on routing to different html page in Angular, Why?

I have a page in that I have a table. There is one column named "Actions".

Action-menu is shown with Edit and Delete, once the user clicks on the action-column in any row. I redirect to another html page once the user clicks on edit.

Everything is working fine. But the menu does not disappear after redirecting to another page. If I go back and again click on a action-column, a new menu with edit and delete appears. 

<p-dataTable #dataTable>
    <p-column field="" header="{{l('Actions')}}" [sortable]="false" [style]="{'width':'25px'}">
        <ng-template let-record="rowData" pTemplate="body">
            <div class="btn-group dropdown" normalizePosition>
                <button class="dropdown-toggle btn btn-xs btn-primary blue"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                    <i class="fa fa-cog"></i>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a (click)="onEditClick(record, $event)">{{ l('Edit') }}</a>
                    </li>
                    <li>
                        <a (click)="onDeleteClick(record, $event)">{{ l('Delete') }}</a>
                    </li>
                </ul>
            </div>
        </ng-template>
    </p-column>
</p-dataTable>

onEditClick(selectedValue: any): void {
   this.router.navigate(['/app/xyz/pqr', selectedClassification.id]);
}

Upvotes: 6

Views: 1087

Answers (1)

Markus Kollers
Markus Kollers

Reputation: 3728

You are mixing angular with plain bootstrap JavaScript. Every time your DropDown gets clicked, the bootstrap-JavaScript creates the menu somewhere at the bottom of your html markup.

angular-router only updates the markup inside of your router-outlet, so the attached menu markup will not be removed on navigate.

Try to use a angular specific bootstrap version like this:
https://ng-bootstrap.github.io/#/components/dropdown/examples
They should already implemented a solution of your problem, and it will avoid more upcomming issues ;-)

Upvotes: 2

Related Questions