I have a sample login page which directs to a dashboard. The login page is set as the initial redirect page and this routes to the dashboard. The dashboard contains a dropdown menu with some links. Everytime a link is clicked it keeps redirecting to the login page. However, when the dashboard page is reloaded the dropdown menu works completely fine.

I am thinking of using the "event.preventDefault()" for the links but I hope there is a workaround.

Dashboard Menu - HTML

<div class="navbar-default sidebar" role="navigation">
  <div class="sidebar-nav navbar-collapse">
    <ul class="nav" id="side-menu">
      <li>
        <a href="#"><i class="fa fa-calendar fa-fw"></i> Manage Events<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level collapse">
          <li>
            <a href="#">Lorem Ipsum</a>
          </li>
          <li>
            <a href="#">Lorem Ipsum</a>
          </li>
        </ul>
        <!-- /.nav-second-level -->
      </li>
    </ul>
  </div>
  <!-- /.sidebar-collapse -->
</div>

Edit: After getting some replies, I would like to clarify my main problem.The problem exists in the link being a null link and that Angular 2 takes it as a null link and causes it to redirect it. If I could find a workaround to tell Angular, don't take this link as a null link it will be ideal.

I have a sample login page which directs to a dashboard. The login page is set as the initial redirect page and this routes to the dashboard. The dashboard contains a dropdown menu with some links. Everytime a link is clicked it keeps redirecting to the login page. However, when the dashboard page is reloaded the dropdown menu works completely fine.

I am thinking of using the "event.preventDefault()" for the links but I hope there is a workaround.

Dashboard Menu - HTML

<div class="navbar-default sidebar" role="navigation">
  <div class="sidebar-nav navbar-collapse">
    <ul class="nav" id="side-menu">
      <li>
        <a href="#"><i class="fa fa-calendar fa-fw"></i> Manage Events<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level collapse">
          <li>
            <a href="#">Lorem Ipsum</a>
          </li>
          <li>
            <a href="#">Lorem Ipsum</a>
          </li>
        </ul>
        <!-- /.nav-second-level -->
      </li>
    </ul>
  </div>
  <!-- /.sidebar-collapse -->
</div>

Edit: After getting some replies, I would like to clarify my main problem.The problem exists in the link being a null link and that Angular 2 takes it as a null link and causes it to redirect it. If I could find a workaround to tell Angular, don't take this link as a null link it will be ideal.

• javascript
• angular
• angular2-routing

• Try the following code <a href="javascript:void(0);" onclick="return false;" ngclick="Your function()"> – Aniket V Commented Aug 14, 2017 at 6:12
• @AniketV Hi, thanks for the reply, but it still proceeds to redirect to the homepage. – IsiraK Commented Aug 14, 2017 at 6:16
• Put your code please – ZAhmed Commented Aug 14, 2017 at 6:18
• Please share your dashboard menu code. Looks like you have a form on the dashboard that is probably getting auto submitted. – Aniket V Commented Aug 14, 2017 at 6:19
• I have added the dashboard menu HTML code. If there is anything more I should add do let me know. – IsiraK Commented Aug 14, 2017 at 6:30

8 Answers 8

If you don't want any redirection when clicking on your link(s), check out these solutions:

Different methods to make a null link?

Or you can put <a> tag without href attribute.

<div class="sidebar-nav navbar-collapse">
    <ul class="nav" id="side-menu">
      <li>
        <a href="javascript: void(0);"><i class="fa fa-calendar fa-fw"></i> Manage Events<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level collapse">
          <li>
            <a [routerLink]="['ManageEvents/LoremIpsum']">Lorem Ipsum</a>
          </li>
          <li>
            <a [routerLink]="['ManageEvents/LoremIpsum']>Lorem Ipsum</a>
          </li>
        </ul>
        <!-- /.nav-second-level -->
      </li>
    </ul>
  </div>

export const routes: Routes = [
{ path: 'ManageEvents/LoremIpsum', component: ManageEventsLoremIpsum } ];

This works for me!!

<a href="" onclick="return false;">link</a>

hope this helps link also working by this way

For me I used the routerLink and set it to empty:

<a [routerLink]="" (click)="onClickPage()">Click me</a>

try to remove href, setting cursor: pointer with css and handle click on th a element like <a (click)=yourFunction()></a>. it should work ;)

For me it javascript:void(0); works. Angular 14

<a href="javascript:void(0);"> Last Page </a> // HTML file

Just simply use <a href>Lorem Ipsum</a>.

I had a situation after parent received events from child component, it redirect to homepage. I solved the problem in parent

receiveMessage($event) { //do something this.router.navigateByUrl('/parent-route'); }

even the parent route are supposed to accept parameters.