Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Dropdown (dataKtMenu) is not working in my Angular Metronic v8.1.5 project
The dropdown menu (dataKtMenu) does not work in my Angular Metronic v8.1.5 project when I add "redirect" to the content of the dropdown menu component.
When you go to other page with "Routing". The drop-down menu is still active, appearing on the other page even though it should be closed.
What should I do to solve this? I am waiting for urgent help. I will share my relevant codes below.
dropdown-menu3.component.html:
<div class="menu-item px-3">
<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">
{{selectedDevice.TerminalAdi}}
</div>
</div>
<div class="menu-item px-3">
<a class="menu-link px-3 cursor-pointer" [routerLink]="["/dashboard/terminal", selectedDevice.TerminalAdi]"> Grafik Ekranı </a>
</div>
<div class="menu-item px-3">
<a class="menu-link flex-stack px-3 cursor-pointer"> Detay Ekranı </a>
</div>dropdown-menu3.component.ts :
import { Component, HostBinding, Input, OnDestroy, OnInit } from "@angular/core";
@Component({
selector: "app-dropdown-menu3",
templateUrl: "./dropdown-menu3.component.html",
})
export class DropdownMenu3Component implements OnInit, OnDestroy {
@HostBinding("class") class =
"menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-200px py-3";
@HostBinding("attr.data-kt-menu") dataKtMenu = "true";
@Input() selectedDevice: any;
constructor() { }
ngOnInit(): void {
console.log("Selected Device : ", this.selectedDevice);
}
ngOnDestroy(): void {
}
}dashboard.component-html:
<div class="d-flex align-items-center mb-0 bg-hover-light-danger rounded p-0 item"
[ngClass]="{"fade-in-danger": terminal.fadeInDanger, "fade-in-success": terminal.fadeInSuccess}"
*ngFor="let terminal of service.terminal" data-kt-menu-trigger="{default: "click"}" data-kt-menu-placement="right-start"
data-kt-menu-flip="right" data-kt-menu-overflow="true" data-kt-swapper="true" data-kt-drawer-overlay="true">
<app-dropdown-menu3 [selectedDevice]="terminal"></app-dropdown-menu3>
.
.
.
.
.Replies (1)
Could you please try the following approach to close the dropdown menu on route change?
To close the dropdown on route change, you can try to use Angular's ChangeDetectorRef to detect changes. Here's how you can modify your component to achieve this:
import { Component, HostBinding, Input, OnDestroy, OnInit, ChangeDetectorRef } from "@angular/core";
import { Router, NavigationStart } from "@angular/router";
@Component({
selector: "app-dropdown-menu3",
templateUrl: "./dropdown-menu3.component.html",
})
export class DropdownMenu3Component implements OnInit, OnDestroy {
@HostBinding("class") class =
"menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-200px py-3";
@HostBinding("attr.data-kt-menu") dataKtMenu = "true";
@Input() selectedDevice: any;
constructor(private cdr: ChangeDetectorRef, private router: Router) { }
ngOnInit(): void {
console.log("Selected Device : ", this.selectedDevice);
this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
this.cdr.detectChanges();
}
});
}
ngOnDestroy(): void {
// Clean up any subscriptions or resources
}
}
