'How to fix angular12 and bootstrap toggle collapse button when clicked?

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
  collapsed = true;
  constructor() { }

  ngOnInit(): void {
  }

}

  <nav class="navbar navbar-expand-md navbar-light fixed-top">
    <a class="navbar-brand" routerLink="/home">
      <span id="logo">Logo</span>
    </a>
   
    <button class="navbar-toggler" type="button" aria-controls="navbarContent" [attr.aria-expanded]="!collapsed" aria-label="Toggle navigation"     (click)="collapsed = !collapsed">
      <span class="navbar-toggler-icon"></span>
    </button> 
  
    <div class="navbar-collapse " [class.collapse]="collapsed" id="navbarContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" routerLink = "/home">HOME <span class="sr-only"></span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink = "/learning">Page1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink = "/project">Page2</a>
        </li>
      
        <li class="nav-item">
          <a class="nav-link" routerLink = "/happiness">page3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink = "/about">ABOUT</a>
        </li>
      </ul>
    </div>
  </nav>

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to fix angular12 and bootstrap toggle collapse button when clicked?

Sources

Related Questions