Topic: angular mega menu drop down not working in mobile
SIR I AM USING MSB MEGA MENU FOR MY WEB APP ...SO DROP DOWN IS NOT WORKING IN MOBILE VIEW PLEASE HELP ME ITS VERY URGENT FOR US .... I THINK THE ISSUE IS DUE TO ROUTERLINK
-->
<!-- Navbar brand -->
<mdb-navbar-brand class="img2">
<a routerLink='/'>
<img src="assets/log.png" class="img3">
<links>
<!-- Links -->
<ul class="navbar-nav mr-auto nv1">
<li class="nav-item dropdown mega-dropdown" mdbDropdown>
<a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
aria-expanded="false" routerLink='/bsm'>Business Service<br> Management</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-4 sub-menu my-xl-5 mt-5 mb-4">
<a routerLink='/itoptimisation'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">IT OPTIMISATION</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/health'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> HEALTH MONITORING
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/servicemodeling'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SERVICE MODELING
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/customerexperience'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CUSTOMER EXPERIENCE
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/softwarelicense'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SOFTWARE LICENSE MANAGEMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" href="" routerLink='/servicelevel'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SERVICE LEVEL ANALYTICS
</a>
</li>
<li class="">
<a class="menu-item pl-0" href="" routerLink='/servicelevel'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SERVICE
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
<a routerLink='./itservice'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">IT SERVICE MANAGEMENT</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/selfservice'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>SELF SERVICE SUPPORT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/incident' style="text-align: justify">
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>
INCIDENT AND PROBLEM MANAGEMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/change'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>CHANGE AND RELEASE
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/cmdb'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>CMDB
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/itasset'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> IT ASSET
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/servicelevelm'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SERVICE-LEVEL MANAGEMENT
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
<a routerLink='/itoperations'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">IT OPERATIONS</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/manager'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> MANAGER OF MANAGERS
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/servicemodeling1'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SERVICE MODELING
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/proactive'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> PROACTIVE PERFORMENCE MANAGEMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/system'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SYSTEM MONITORING
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/capacity'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CAPACITY MANAGEMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/application'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> APPLICATION PERFORMENCE MANAGEMENT
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
<a routerLink='/itprocess'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">IT PROCESS AUTOMATION</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/workload'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> WORKLOAD & JOB SCHEDULING
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/configuration'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CONFIGURATION AUTOMATION
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/processoptimisation'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> PROCESS ORCHESTRATION
</a>
</li>
<li class="">
<a class="menu-item pl-0" href="">
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> MANAGED FILE TRANSFER
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-5">
<h6 class="sub-title text-uppercase font-weight-bold white-text">ADVISORY SERVICES</h6>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/itsm'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>ITSM HELATHCHECK
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/softwarel'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SOFTWARE LICENSE MATURITY ASSESSMENT
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown mega-dropdown" mdbDropdown>
<a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
aria-expanded="false" routerLink='/im'>INFORMATION <br>MANAGEMENT</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-lg-4 sub-menu my-lg-5 my-4">
<a routerLink='/informationmanagement'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">INFORMATION LIFECYCLE MANAGEMENT</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/retention'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> RETENTION,ARCHIVE & RETIREMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/text'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>TEXT DATA MANAGEMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/Enterprice'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> ENTERPRICE INFORMATION MANAGEMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/data'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATA MASKING
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
<a routerLink='/data1'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">DATA</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/visual'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> VISUAL ANALYTICS
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/datablending'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATA BLENDING
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
<a routerLink='/enterpricem'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">ENTERPRICE DATA MANAGEMENT</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/datagovernace'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATA GOVERNACE
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/datamigration'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATA MIGRATION
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/dataquality'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATA QUALITY
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/integration'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> INTEGRATION
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
<a routerLink='/datao'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">DATA OPTIMISATION</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/databasevirualisation'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATABASE VIRTUALISATION
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/databasemonitoring'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATABASE MONITORING
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/databasedevlopment'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DEVELOPMENT AND DBA TOOLS
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/security'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SECURITY AND AUDIT
</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">ADVISORY SERVICES</h6>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink="/popidata">
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>DATA DISCOVERY ASSESSMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink="./popiact">
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>COMPLIANCE ACT ASSESSMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink="./archive">
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> ARCHIVE VALUE ASSESSMENT
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown mega-dropdown" mdbDropdown>
<a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
aria-expanded="false">APPLICATION <br> MANAGEMENT</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">
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0"routerLink='/mobile'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Mobile Application Development
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/digital'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Digital service
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/custom'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Custom Software Development
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/applicationout'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Application Outsourcing
</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>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown mega-dropdown" mdbDropdown>
<a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
aria-expanded="false" routerLink='/Imo'>Infrastructure <br> & Operations</a>
<div class="dropdown-menu mega-menu v-2 row z-depth-1 black">
<div class="row mx-md-4 mx-1">
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-5 mb-4">
<a routerLink='/nextgen'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">NEXT GEN DATACENTER</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/applicationdelivappery'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> APPLICATION DELIVERY CONTROLLERS
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/unified'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> UNIFIED TRAFFIC VISIBILITY
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/softwaredefined'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SOFTWARE DEFINED STORAGE
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
<a routerLink='/storage'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">STORAGE OPTIMISATION</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/storagemanagement'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> STORAGE MANAGEMENT
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
<a routerLink='/virtualisation'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">VIRTUALISATION SYSTEM</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/operations'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> OPERATIONS
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/migration'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> MIGRATION BACKUP & RECOVERY
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/virualdesktop'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> VIRTUAL DESKTOP
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/securityvirtual'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SECURITY FOR VIRTUAL SYSTEMS
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
<a routerLink='/microsoftinfrastructure'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">MICROSOFT INFRASTRUCTURE</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/msactive'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>MS ACTIVE DIRECTORY
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/msexchange'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> MS EXCHANGE
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/softwared'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SOFTWARE DEVELOYMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/windowsmigration'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> WINDOWNS MIGRATION
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">ADVISORY SERVICES</h6>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/groupwise'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> GROUPWISE TO EXCHANGE MIGRATION
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown mega-dropdown" mdbDropdown>
<a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
aria-expanded="false" routerLink='/its'>IT RISK <br> & SECURITY</a>
<div class="dropdown-menu mega-menu v-2 row z-depth-1 black">
<div class="row mx-md-4 mx-1">
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-5 mb-4">
<a routerLink='/securityoperations'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">SECURITY OPERATIONS</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/managed'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> MANAGED SECURITY SERVICES
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/seurityintelligence'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SECURITY INTELLIGENCE
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='changedconfi'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CHANGE AND CONFIGURATION COMPLIANCE
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerlink='/vulnerbiltymanagement'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> VULNERBILITY MANAGEMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/threat'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>THREAT MANAGEMENT AND MODELLING
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/psm'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>PSMPAM
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
<a routerLink='/networksecurity'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">NETWORK SECURITY</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/cyber'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CYBER ATTACK MITIGATION
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/vulnerbiltyassessment'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> VULNERBILITY ASSESSMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/internet'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> INTERNET SECURITY
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/pentexting'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> PENTESTING
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/intrusion'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>INTRUSION DETCECTION PREVENTION & SERVICES
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
<a routerLink='/cloud'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">CLOUD SERVICES</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/cloudmigration'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CLOUD MIGRATION
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/cloudinteration'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CLOUD INTERATION
</a>
</li>
<li class="">
<a class="menu-item pl-0"routerLink='/cloudsecurity'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>CLOUD SECURITY
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-5">
<a routerLink='/identity'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">IDENTITY & ACCESS MANAGEMENT</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/identitya'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> INTEGRATED IDENTITY & ACCESS MANAGEMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/useractivity'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> USER ACTIVITY MANAGEMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/identityad'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> IDENTITY ADMINISTARATION
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/privilege'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> PRIVILEGE ACCOUT MANAGEMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/dataloss'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATALOSS
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/governacecompliance'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>GOVERNACE & COMPLIANCE
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/compliance'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> COMPLIANCE REPORTING
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-5">
<h6 class="sub-title text-uppercase font-weight-bold white-text">ADVISORY SERVICE</h6>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/phishingassessment'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> PHISHING ASSESSMENT
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/user'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> USER ACTIVITY REVIEW
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown mega-dropdown" mdbDropdown>
<a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
aria-expanded="false "routerLink='/da'>DATA <br> ANALYTICS</a>
<div class="dropdown-menu mega-menu v-2 row z-depth-1 black">
<div class="row mx-md-4 mx-1">
<div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-5 mb-4">
<a routerLink='/datascience'>
<h6 class="sub-title text-uppercase font-weight-bold white-text">DATA SCIENCE</h6>
</a>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" routerLink='/cyspace'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>CySpace Methodologies
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink="/services">
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>Services
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/analytics'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>Data and analytics strategy
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/datadiscovery'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>Data discovery and augmentation
</a>
</li>
<li>
<a class="menu-item pl-0" routerLink='/datamanagement'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>Data management
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/industrial'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>Industrialized solutions
</a>
</li>
<li class="">
<a class="menu-item pl-0" routerLink='/unique'>
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>OUR UNIQUE RANGE OF BENEFITS:
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- </div> -->
</li>
</ul>
<!-- Search form -->
<!-- <form class="form-inline waves-light" mdbWavesEffect>
<div class="md-form mt-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
</div>
</form> -->
</links>
<!-- Collapsible content -->
</mdb-navbar>
<!--/.Navbar-->
UNSECURED WORLD --> -->
Dear @phaninani
Add the following function to your component class. It receives the event as parameter and calls the stopPropagation function on it.
stop(event: Event) {
event.stopPropagation();
}
Also, remove your 'parent' routerLinks from <a></a> to <li></li>
Below is my full example of mega menu with nestes routerLinks:
TS:
@ViewChild('nav', { static: true }) nav: NavbarComponent;
constructor(private renderer: Renderer2, private el: ElementRef, private router: Router) {}
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})`);
});
}
@HostListener('click', ['$event'])
onClick(event: any) {
const toggler = this.el.nativeElement.querySelector('.navbar-toggler');
const togglerIcon = this.el.nativeElement.querySelector('.navbar-toggler-icon');
if (event.target === toggler || event.target === togglerIcon) {
console.log('test');
setTimeout(() => {
this.transformDropdowns();
}, 351);
}
}
@HostListener('document:scroll', ['$event'])
onScroll() {
this.transformDropdowns();
}
@HostListener('window:resize', ['$event'])
onResize() {
this.transformDropdowns();
}
ngAfterViewInit() {
this.transformDropdowns();
}
stop(event: Event) {
event.stopPropagation();
}
HTML
<mdb-navbar #nav SideClass="navbar navbar-expand-lg navbar-dark special-color-dark">
<mdb-navbar-brand>
<a class="navbar-brand" href="#">Navbar</a>
</mdb-navbar-brand>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown mega-dropdown" mdbDropdown [routerLink]="['/item1']">
<a
mdbDropdownToggle
class="nav-link dropdown-toggle text-uppercase no-caret"
aria-haspopup="true"
aria-expanded="false"
>Item1</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-lg-4 sub-menu my-lg-5 my-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Item1</h6>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" [routerLink]="['/new']" (click)="stop($event)">
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Link1
</a>
</li>
<li class="">
<a class="menu-item pl-0" [routerLink]="['/another']" (click)="stop($event)">
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Link2
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown mega-dropdown" mdbDropdown [routerLink]="['/item2']">
<a
mdbDropdownToggle
class="nav-link dropdown-toggle text-uppercase no-caret"
aria-haspopup="true"
aria-expanded="false"
>Item2</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-lg-4 sub-menu my-lg-5 my-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Item2</h6>
<ul class="list-unstyled">
<li class="">
<a class="menu-item pl-0" [routerLink]="['/new']" (click)="stop($event)">
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Link3
</a>
</li>
<li class="">
<a class="menu-item pl-0" [routerLink]="['/another']" (click)="stop($event)">
<mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Link4
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</links>
</mdb-navbar>
<router-outlet></router-outlet>
app.module.ts
const appRoutes: Routes = [
{ path: 'item1', component: Item1Component },
{ path: 'item2', component: Item2Component },
{ path: 'new', component: NewComponent },
{ path: 'another', component: New2Component },
];
@NgModule({
declarations: [..., AppComponent, NewComponent, New2Component, Item1Component, Item2Component],
imports: [
...,
MDBBootstrapModulesPro.forRoot(),
RouterModule.forRoot(appRoutes),
...
],
...
})
Hope it helps!
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.1.0
- Device: macbook
- Browser: chrome
- OS: mac os eicapitan
- Provided sample code: No
- Provided link: No
Bartosz Termena staff commented 4 years ago
Hi!
Thank you for reporting the problem, we will take a closer look at that.
I will keep you updated.
Best, Bartosz.