title: Deactivation of angular router link
body: <p>I am making angular application, where i am using routing and auth guard..</p>
  
  <p><a href="https://stackblitz.com/edit/routing-angular-bjbjqd" rel="nofollow noreferrer">stackblitz</a></p>
  
  <p><a href="https://stackblitz.com/edit/routing-angular-bjbjqd?file=app%2Fapp.component.html" rel="nofollow noreferrer">app component html</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"&gt;
        &lt;ul class="nav nav-tabs"&gt;
          &lt;li role="presentation" routerLinkActive="active"
          [routerLinkActiveOptions]="{exact:true}"&gt;&lt;a routerLink="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation" routerLinkActive="active"&gt;&lt;a routerLink="/servers"&gt;Servers&lt;/a&gt;&lt;/li&gt;
          &lt;div *ngIf="showUser"&gt;
          &lt;li role="presentation" routerLinkActive="active"&gt;&lt;a routerLink="/users"&gt;Users&lt;/a&gt;&lt;/li&gt;
          &lt;/div&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>In the above code that i have made a <strong>if</strong> condition,</p>
  
  <pre><code>        &lt;div *ngIf="showUser"&gt;
          &lt;li role="presentation" routerLinkActive="active"&gt;&lt;a routerLink="/users"&gt;Users&lt;/a&gt;&lt;/li&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Show if <code>showUser</code> is false, then he cannot view the user tab in the home page..</p>
  
  <p><a href="https://stackblitz.com/edit/routing-angular-bjbjqd?file=app%2Fapp.component.ts" rel="nofollow noreferrer">TS</a>:</p>
  
  <pre><code>export class AppComponent{
    showUser : boolean = true;
  
    ngOnInit() {
      this.showUser = false;
    }
  }
  </code></pre>
  
  <p>Here i have hard coded <code>this.showUser</code> as false, whereas in real application , it will be based on some condition like,</p>
  
  <pre><code>  ngOnInit() {
      let user = this.localStorage.getItem('user');
      if(user.value == null || user.value == undefined) {
         this.showUser = false;
       }
    }
  </code></pre>
  
  <p>So the condition is false and hence the user menu not showing in view..</p>
  
  <p>But if i change the url like</p>
  
  <p><code>https://routing-angular-bjbjqd.stackblitz.io/users</code></p>
  
  <p>See carefully i have added <strong>users</strong> at the last.. The above is redirecting to users page..</p>
  
  <p>My requirement is it should not happen.</p>
  
  <p>Because unless the condition is true it should not get redirected to users page.</p>
  
  <p>How to prevent the url change unless <code>showUser</code> is true?</p>