How do I write conditional code based on which router link is active

Question

My attempt is like this:

<ul class="nav nav-tabs search-selector" role="tablist">
  <li routerLinkActive="active"
    [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="{{ myroute[0].link }}">{{ myroute[0].label }}</a>
  </li>
  <li routerLinkActive="active"
    [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="{{ myroute[1].link }}">{{ myroute[1].label }}</a>
  </li>
</ul>
<div *ngif="route0 is active">do something related to route 0</div>
<div *ngif="route1 is active">do something related to route 1</div>

Answer 1

You can create your own structural directive, similar to NgIf, where you will pass route and render something in DOM if your active route matches the one you passed to directive, something like this:

if-route.directive.ts

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Directive({ selector: '[ifRoute]' })
export class IfRouteDirective {

  private hasView = false;
  private subscription: Subscription;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private router: Router) { }

  @Input() set ifRoute(route: string) {
    this.performCheck(route);

    this.subscription = this.router.events.subscribe(
      res => {
        this.performCheck(route);
      }
    )
  }

  performCheck(route) {
    if (route === this.router.url && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (route !== this.router.url && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    };
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

You would use it like this in your template:

<p *ifRoute="'/login'">
  This will be displayed only if you are on login route.
</p>