mdb angular navbar is not working in mobile view

mdb angular navbar is not working in mobile view

I am new to mdbootstrap in angular and when am checking for mdb-navbar it is not working means when i have configured as routerLink in place of href and trying to click the link in mobile view ,link is opening but navbar is not collapsing. can someone help me on this.

And also there is an another issue like when am trying t put mdb angular scroll bar in services page and ran the program, link is not working as it is pointing to http://localhost:4200/#test1 instead of http://localhost:4200/services#test1.

Kindly help me to resolve this issue.

Below is the code

 <!-- Links -->
 <ul class="navbar-nav mr-auto">
     <li class="nav-item ">
         <a class="nav-link waves-light" mdbRippleRadius routerLink="home">Home<span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
         <a class="nav-link waves-light" mdbRippleRadius routerLink="about">About Me</a>
     </li>
     <li class="nav-item">
        <a class="nav-link waves-light" mdbRippleRadius routerLink="services">Services</a>
    </li>
    <li class="nav-item">
        <a class="nav-link waves-light" mdbRippleRadius routerLink="contact">Contact US</a>
    </li>

 </ul>
 <!-- Links -->

 <!-- Search form -->
 <!---<form class="form-inline  waves-light" mdbRippleRadius>
     <input class="form-control mr-sm-2" type="text" placeholder="Search">
 </form>-->
 <div><i class="fa fa-user-circle-o" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;anu4looks@gmail.com<br>
    <i class="fa fa-mobile-phone" aria-hidden="true"></i>&nbsp; &nbsp;&nbsp;&nbsp;+91 9951877261</div>