Mega Menu Angular close

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Mega Menu Angular close

SANTANA pro asked 5 years ago

1: I want you to close the menu when you click.

2: I don't want you to close the menu if you click on the icon, it will open a help mode and you won't be able to close the mega menu.

I'm using google translate.

Sampleenter image description here

Konrad Stępień staff answered 5 years ago

Hi @SANTANA,

You can disable autoHide dropdown like this: 

<li class="nav-item dropdown mega-dropdown active" mdbDropdown #dropdown [autoClose]="false">

And also add #dropdown property for this line.

Then you can use @ViewChild in your typescript.

Like this: 

import {
  ...
  ViewChild,
  ...
} from '@angular/core';
import { NavbarComponent } from 'ng-uikit-pro-standard';

@Component({
 ...
})
export class AppComponent {
  @ViewChild('nav', { static: true }) nav: NavbarComponent;
  @ViewChild('dropdown', { static: true }) dropdown: any;

  ...

  hideDropdonw() {
    this.dropdown.hide();
  }
}

And set for your span function to hide dropdown.

<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> <span (click)="hideDropdonw()"> ipsum dolor sit amet</span>

Full code:

Navbar 

<li class="nav-item dropdown mega-dropdown active" mdbDropdown #dropdown [autoClose]="false">
  <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
    aria-expanded="false">Features</a>
  <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
    <div class="row mx-md-4 mx-1">
      <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
        <ul class="list-unstyled">
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> <span (click)="hideDropdonw()"> ipsum dolor sit amet</span>
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Consectetur adipiscing elit
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed do eiusmod tempor incididunt
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Ut labore et dolore magna
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Ut enim ad minim veniam
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
        <ul class="list-unstyled">
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quis nostrud exercitation
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Duis aute irure dolor in
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Laboris nisi ut aliquip ex ea commodo
              consequat
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Reprehenderit in voluptate
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Esse cillum dolore eu fugiat nulla
              pariatur
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-4">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
        <ul class="list-unstyled">
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Excepteur sint occaecat
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sunt in culpa qui officia
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed ut perspiciatis unde omnis iste
              natus error
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Mollit anim id est laborum
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Accusantium doloremque laudantium
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-5">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
        <ul class="list-unstyled">
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Totam rem aperiam eaque
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Beatae vitae dicta sun
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quae ab illo inventore veritatis et
              quasi architecto
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Nemo enim ipsam voluptatem
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Neque porro quisquam est
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</li>
<li class="nav-item dropdown mega-dropdown" mdbDropdown [autoClose]="false">
  <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
    aria-expanded="false">Technology</a>
  <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
    <div class="row mx-md-4 mx-1">
      <div class="col-md-12 col-lg-4 sub-menu my-lg-5 mt-5 mb-4">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
        <!--Featured image-->
        <div class="view overlay mb-3 z-depth-1">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(37).jpg" class="img-fluid"
            alt="First sample image">
          <div class="mask rgba-white-slight flex-center">
            <p></p>
          </div>
        </div>
        <h4 class="mb-2">
          <a class="news-title pl-0" href="">Lorem ipsum dolor sit</a>
        </h4>
        <p class="font-small text-uppercase white-text">
          <mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 17, 2017 /
          <mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 20</p>
      </div>
      <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
        <ul class="list-unstyled">
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quis nostrud exercitation
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Duis aute irure dolor in
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Laboris nisi ut aliquip ex ea commodo
              consequat
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Reprehenderit in voluptate
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Esse cillum dolore eu fugiat nulla
              pariatur
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
        <ul class="list-unstyled">
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Excepteur sint occaecat
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sunt in culpa qui officia
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed ut perspiciatis unde omnis iste
              natus error
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Mollit anim id est laborum
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Accusantium doloremque laudantium
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</li>
<li class="nav-item dropdown mega-dropdown" mdbDropdown [autoClose]="false">
  <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
    aria-expanded="false">Lifestyle</a>
  <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
    <div class="row mx-md-4 mx-1">
      <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
        <ul class="list-unstyled">
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Lorem ipsum dolor sit amet
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Consectetur adipiscing elit
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Sed do eiusmod tempor incididunt
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Ut labore et dolore magna
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Ut enim ad minim veniam
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
        <!--Featured image-->
        <div class="view overlay mb-3 z-depth-1">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid"
            alt="First sample image">
          <div class="mask rgba-white-slight flex-center">
            <p></p>
          </div>
        </div>
        <h4 class="mb-2">
          <a class="news-title pl-0" href="">Lorem ipsum dolor sit</a>
        </h4>
        <p class="font-small text-uppercase white-text">
          <mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 17, 2017 /
          <mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 20</p>
      </div>
      <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-4">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
        <!--Featured image-->
        <div class="view overlay mb-3 z-depth-1">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid"
            alt="First sample image">
          <div class="mask rgba-white-slight flex-center">
            <p></p>
          </div>
        </div>
        <h4 class="mb-2">
          <a class="news-title pl-0" href="">Ut labore et dolore magna</a>
        </h4>
        <p class="font-small text-uppercase white-text">
          <mdb-icon far icon="clock" class="pr-2" aria-hidden="true"></mdb-icon>July 16, 2017 /
          <mdb-icon far icon="comments" class="px-1" aria-hidden="true"></mdb-icon> 25</p>
      </div>
      <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-5">
        <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
        <ul class="list-unstyled">
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Totam rem aperiam eaque
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Beatae vitae dicta sun
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Quae ab illo inventore veritatis et
              quasi architecto
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Nemo enim ipsam voluptatem
            </a>
          </li>
          <li class="">
            <a class="menu-item pl-0" href="">
              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Neque porro quisquam est
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</li>

TS:

import {
  Component,
  HostListener,
  ViewChild,
  Renderer2,
  AfterViewInit,
  ElementRef,
} from '@angular/core';
import { NavbarComponent } from 'ng-uikit-pro-standard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('nav', { static: true }) nav: NavbarComponent;
  @ViewChild('dropdown', { static: true }) dropdown: any;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  transformDropdowns() {
    const dropdownMenu = Array.from(this.el.nativeElement.querySelectorAll('.dropdown-menu'));
    const navHeight = this.nav.navbar.nativeElement.clientHeight + 'px';

    dropdownMenu.forEach(dropdown => {
      this.renderer.setStyle(dropdown, 'transform', `translateY(${navHeight})`);
    });
  }
  hideDropdonw() {
    this.dropdown.hide();
  }
}

But you have to add these properties for other lines in HTML.

Best, Konrad.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.2
  • Device: Chrome
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
megamenu angular navbar
Related topics
0
Mega menu not working
0
Hamburger menu is not working
0
How to change container to container fluid in Angular Bootstrap mega menu component
0
Router Link
0
Mega Menu not adjusting with Angular sidenav
About author
SANTANA
Pro User
10Support score
2Questions 0Answers
0Snippets likes 0Snippets