Why *ngIf blocks work of toggle menu? Angular

I am working with Angular and while creating a toggle navbar I came to a problem where after using *ngIf (I want to show dark/light menu) menu stopped hiding. After adding condition change of colors works fine, but menu is static. Why is it happening? Navbar toggle works fine when I delete *ngIf, is there any other way? I tried with ng-hide and ng-show but it didn’t seem to affect my website. Toggle was fine but only one div was visible no matter what option I clicked.

Navbar from html file:

  <div *ngIf="lightMode">
<div class="d-flex" id="wrapper">
    <!-- Sidebar -->
    <div class="bg-light border-right " id="sidebar-wrapper">
      <button class="list-group-item list-group-item-action bg-light font-weight-bold" (click)="showMain()">Daniel Klarenbum</button>
      <div class="list-group list-group-flush">
        <button class="list-group-item list-group-item-action bg-light" (click)="showSchedule()">Wyświetl plan</button>
        <button class="list-group-item list-group-item-action bg-light" (click)="showChoices()">Wybór przedmiotów</button>

    
        <div class="btn-group dropright">
          <button type="button" class="list-group-item list-group-item-action btn dropdown-toggle bg-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Giełda zamian
          </button>
          <div class="dropdown-menu">
            <button class="list-group-item list-group-item-action bg-light" (click)="makeNewExchange()">Złóż podanie</button>
            <button class="list-group-item list-group-item-action bg-light" (click)="editExchanges()">Edytuj/usuń podanie</button>
          </div>
        </div>

        <div class="btn-group dropright">
          <button type="button" class="list-group-item list-group-item-action btn dropdown-toggle bg-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Motyw
          </button>
          <div class="dropdown-menu">
            <button (click) = "toLightMode()" class="list-group-item list-group-item-action bg-light" >Dzienny</button>
            <button (click) = "toDarkMode()"class="list-group-item list-group-item-action bg-light">Nocny</button>
          </div>
        </div>

        <div class="btn-group dropright">
          <button type="button" class="btn dropdown-toggle list-group-item list-group-item-action bg-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Konto
          </button>
          <div class="dropdown-menu">
            <button class="list-group-item list-group-item-action bg-light" (click)="changePassword()">Zmień hasło</button>
            <a routerLink="/" (click) = "logout()" class="list-group-item list-group-item-action bg-light">Wyloguj się</a>
          </div>
        </div>

      </div>
    </div>
    <!-- /#sidebar-wrapper -->
    <!-- Page Content -->
    <div id="page-content-wrapper">
      <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
        <button class="btn btn-danger" id="menu-toggle">Menu</button>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-nav ml-auto mt-2 mt-lg-0">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
            <label class="form-check-label" for="inlineCheckbox1">Informatyka</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
            <label class="form-check-label" for="inlineCheckbox2">Dziennikarstwo</label>
          </div>
      </div>
      </nav>
      <div class="container-fluid" *ngIf="MainDisplay" >
        <h1 class="mt-4">SignMeUp</h1>
        <p>Celem projektu jest implementacja <code>SignMeUp</code> - platformy internetowej służacej do tworzenia 
        spersonalizowanego planu zajęć według szablonu stworzonego przez dziekanat. 
        Użytkownicy mają możliwość przypisania punktowego priorytetu do określonych zajęć, 
        a algorytm przydziela jak najkorzystniejeszy plan dla wszystkich studentów. 
        Dodatkowo istnieje możliwość zamiany już przypisanych zajęć poprzez giełd̨e zamian.
        </p>
      </div>
  </div>

ngOnInit in component.ts

ngOnInit(): void {
this.token = this.api.getTokenStudent();
//Toggle Click Function
$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

}

Source: Angular Questions