li does not disappear on routing to different html page ? #3870

manojreddy created 7 years ago

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', data.id]);
}

1 Answer(s)