1

I tried using routerLinkActive and routerLink for my nav links and it affects the display of the navigation links.

=====app.component.html======

<app-navbar></app-navbar>

<div class="container">
  <router-outlet></router-outlet>
</div>

====index.html======

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AfrabUi</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://bootswatch.com/5/yeti/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
</body>
</html>

=====Navbar component.html====

<nav class="navbar navbar-expand-lg navbar-dark bg-danger ">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="../../favicon.ico" alt="afrab chem logo">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0 navbar-left">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" [routerLink]="['/']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Home</a>
          </li>
        </ul>
        <ul class="navbar-nav me-auto mb-2 mb-lg-0 navbar-right">
          <li class="nav-item">
            <a class="nav-link" [routerLink]="['/about']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" [routerLink]="['/product']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Products</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" [routerLink]="['/login']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Logout</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" [routerLink]="['/register']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Register</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Blog</a>
          </li>
         </ul>
        <form class="d-flex" role="search" width="30">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

I moved the routerLinkActive and routerLinkOptions into the li tags

horla
  • 11
  • 3

2 Answers2

0

You have moved the routerLinkActive and routerLinkActiveOptions from the tag to the

  • tag in your navbar component.
    <ul class="navbar-nav me-auto mb-2 mb-lg-0 navbar-right">
      <li class="nav-item">
        <a class="nav-link" [routerLink]="['/about']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [routerLink]="['/product']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [routerLink]="['/login']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Logout</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [routerLink]="['/register']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Register</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Blog</a>
      </li>
    </ul>
    
  • Souvik
    • 32
    • 5
    0

    thanks, it has been fixed, I had to delete the file from the local machine and pull it back. didn't need the slash('/') to identify the path for the router link. """

    <nav class="navbar navbar-expand-lg bg-danger">
        <div class="container-fluid">
            <a class="navbar-brand" [routerLink]="['']">
                <img src="\favicon.ico" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link" aria-current="page" [routerLink]="['home']" [routerLinkActive]="['active']"
                        [routerLinkActiveOptions]="{exact:true}">Home</a>
                    <a class="nav-link" [routerLink]="['about']" [routerLinkActive]="['active']"
                        [routerLinkActiveOptions]="{exact:true}">About Us</a>
                    <a class="nav-link" [routerLink]="['products']" [routerLinkActive]="['active']"
                        [routerLinkActiveOptions]="{exact:true}">Products</a>
                    <a class="nav-link" [routerLink]="['contact']" [routerLinkActive]="['active']"
                        [routerLinkActiveOptions]="{exact:true}">Contact Us</a>
                </div>
            </div>
        </div>
    </nav>
    

    """

    horla
    • 11
    • 3