Przy pisaniu strony w Angularze natknęłam się na problem przy tworzeniu toggle menu. Normalnie działą, ale kiedy dodam div z *ngIf tak aby pojawiały mi się dwie wersje menu w zależności od wybranej (tryb jasny/ciemny) funkcja chowania przestaje działać. Kolory się zmieniają, ale menu jest statyczne. Z czego to może wynikać?
To jest jedna wersja mojego navbaru, pod spodem w componencie mam drugą, analogiczną.
<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>
A to funkcja ngOnInit w component.ts
ngOnInit(): void {
//Toggle Click Function
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
}
Co powinnam zmienić? Czy są jakieś inne sposoby na zamianę divów? Próbowałam skorzytsać z ng-hide, ale zdają się nie wpływać na stronę. Menu jak było ruchome tak jest, ale tryby koloru się nie zmieniają.