typescript - Angular 4 : Mega menu is not closed after clicked on a menu inside it

Question

I am working in an angular 4 project ,In this I have a mega menu .What I want to do is when I clicked on a menu inside the mega menu I want to close it .

In my case it always open even after I clicked on a specific menu ,but closed if I remove the mouse focus in it .

Stackblitz : https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-w1qhj4?file=app/app.component.html

can anyone help me to fix it .

Answer 1

Your application contains error(Check Inspector tools console for details). Try adding following function implementation in your app.component.js, the code will work fine. https://angular-bootstrap-carousel-dynamic2-imxxrv.stackblitz.io

getStoreData() {
    // do something
  }
  categoryClick () {
    alert('Inside category');
  }
  groupClick() {
    alert('Inside Group');
  }

  subGroupClick() {
    alert('Inside Sub Group');
  }