Meanmenu refresh the page with angular 7 instead of normally route

Question

i am using meanmenu in my angular app and it works fine but the problem is when i try to route from page to another it goes as i am using href="path" instead of routerlink so the page refresh

this how i use it in HTML

                   <!-- Main Menu Start -->
                   <div class="main-menu">
                       <nav>
                           <ul>
                               <li routerLinkActive="active"><a routerLink="/home">HOME</a></li>
                               <li class="menu-item-has-children"><a>Shop</a>
                                   <ul class="sub-menu">
                                       <li class="menu-item-has-children" routerLinkActive="active"><a
                                               routerLink="/product">Categories</a>
                                           <ul class="sub-menu">
                                               <li routerLinkActive="active" *ngFor="let category of categories">
                                                   <a [routerLink]="['/product/'+[category.name]]">{{category.name}}</a>
                                               </li>
                                           </ul>
                                       </li>
                                   </ul>
                               </li>

                               <li><a href="#">CONTACT</a></li>
                           </ul>
                       </nav>
                   </div><!-- Main Menu End -->
               </div>
               <div class="mobile-menu order-12 d-block d-lg-none col"></div>

and this is my Jquery

$(document).ready(() => {
            $('.main-menu nav').meanmenu({
                meanScreenWidth: '991',
                meanMenuContainer: '.mobile-menu',
                meanMenuClose: '<span class="menu-close"></span>',
                meanMenuOpen: '<span class="menu-bar"></span>',
                meanRevealPosition: 'right',
                meanMenuCloseSize: '0',
            });
        });

Answer 1

The reason why this happens is because MeanMenu copies the HTML contents of the target and inserts in their nav.mean-nav element. Check showMeanMenu function in the un-minified version.

Instead of

var meanMenuContents = jQuery(meanMenu).html();
jQuery('.mean-nav').html(meanMenuContents);

Use

jQuery(meanMenu).detach().appendTo('.mean-nav');

Note:

• You also need to set onePage property to true in options so that the menu automatically collapses upon navigating to a new component.
• You will also need to modify the meanOriginal function in case you are expecting layout changes after page load.

In my case, I had to add the below lines to the meanOriginal function

jQuery(meanMenu).detach().appendTo('#original-nav');
jQuery('.sub-menu').css('display', 'block');
jQuery('.mean-expand').remove();