Angular 12: Button Styles not working if first Button is clicked

Issue

I have coded a navigation-bar on a Website. It has 6 buttons which are highlighted when the current route is active. The following image shows how it should look. navigation-bar how it should look But when i click on the top button the css-style of the following buttons is not working. navigation-bar with bug It only occurs by clicking on the very top button. When i delete the top button it occurs on the "new" top button. The 5 other buttons work just fine.

Here is the code for the navigation-bar

.container {
    float: right;
    background-color: rgb(199, 199, 199); 
  }

.btn-nav {
    display: inline-block;
    background: transparent;
    border: 1px solid black;
    height: 60px;
    width: 60px; 
    margin: 11px;
    border-radius: 15px;
    cursor: pointer;
  }
  
  .active-link {
    display: inline-block;
    background: white;
    border: 1px solid black;
    /*padding: 5px 5px;*/
    height: 60px;
    width: 60px; 
    margin: 11px;
    border-radius: 15px;
  }

.img {
  height: 45px;
  width: 45px;
  margin-top: 5px;
}

<div class="container">
        
        <button  routerLink="/filtering" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/1.png" alt="filtering operation Icon" class="img"></button>
        <br>
        <button routerLink="/cleaning" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/2.png" alt="cleaning Icon" class="img"></button>
        <br>
        <button routerLink="/hood" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/3.png" alt="Hood Icon" class="img"></button>
        <br>
        <button routerLink="/?" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/4.png" alt="archive Icon" class="img"></button>
        <br>
        <button routerLink="/?" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/5.png" alt="Menu Icon" class="img"></button>
        <br>
        <button routerLink="/home" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                [class.btn-nav]="!link.isActive">home</button>
        <br>
</div>

Solution

remove the [class.btn-nav]="!link.isActive" for each button, or add margin: 11px; to the .active-link ´class. Then it should work:

<button  routerLink="/filtering" 
      routerLinkActive="active-link"
      #link="routerLinkActive"
      class="btn-nav"
      style="align-content: center;">
   <img src="/assets/1.jpg" alt="filtering operation Icon" class="img"> 
</button>

Answered By - G-Unit