How to use RouterLinkActive in angular 8?

Question

I have a page where there are three buttons, admin, student and logout. The logout button must appear only after the path changes to /admin or /student and make the admin and student buttons to disappear. How to use routerActiveLink in this problem?

home.html:

<mat-toolbar color="primary">
    <span class="align-content">Online Library Portal</span>
    <button mat-button routerLink="/adminLogin" routerLinkActive="active" (click)="showPage()">Admin</button>
    <button mat-button routerLink="/studentLogin" routerLinkActive="active" (click)="showPage()">Student</button>
    <button mat-button routerLink="/adminLogin" [routerLinkActive]="['admin']" *ngIf="logout">Logout</button>

</mat-toolbar>
<mat-card-content *ngIf="show">
    <div class="welcome">
        <h1>Welcome to Anitha's Library</h1>
    </div>    <div class="instructions">
        <li>
            If you are an <strong>Admin</strong>, please choose admin option to Login or Register.
        </li>
        <li>
            If you are a <strong>Student</strong>, please choose student option to Login or Register.
        </li>
    </div>

</mat-card-content>

home.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) {}

  show: boolean = true;
  logout: boolean = true;
 
  ngOnInit() {
    this.router.navigate([''])
  }

  showPage() {
    this.show = false;
  }

  if([routerLinkActive]="['admin']"){
    
      this.logout=false;
    

  }

}

I am new to angular. Have I used it properly?

Answer 1

<button mat-button routerLink="/adminLogin" routerLinkActive="active" (click)="showPage()">Admin</button>

The routerLinkActive="active" will add the class .active if the current route is /adminLogin. Therefore, this cannot be used to determine if you need to show the logout button or not. Maybe, you could add a css class with display: none but this is not a good practice. The most appropriate method is by finding the current route and using ngIf directive as shown below.

home.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) {}

  show: boolean = true;
  showLogout: boolean = false;
 
  ngOnInit() {
    if(this.router.url == '/admin' || this.router.url == '/student' ){
        this.showLogout = true;
    }
    else{
        this.showLogout = false;
    }
  }

  showPage() {
    this.show = false;
  }

}

home.component.html

<mat-toolbar color="primary">
    <span class="align-content">Online Library Portal</span>
    <button mat-button routerLink="/adminLogin" routerLinkActive="active" (click)="showPage()">Admin</button>
    <button mat-button routerLink="/studentLogin" routerLinkActive="active" (click)="showPage()">Student</button>
    <button mat-button routerLink="/adminLogin" [routerLinkActive]="['admin']" *ngIf="showLogout">Logout</button>

</mat-toolbar>
<mat-card-content *ngIf="show">
    <div class="welcome">
        <h1>Welcome to Anitha's Library</h1>
    </div>    <div class="instructions">
        <li>
            If you are an <strong>Admin</strong>, please choose admin option to Login or Register.
        </li>
        <li>
            If you are a <strong>Student</strong>, please choose student option to Login or Register.
        </li>
    </div>

</mat-card-content>