ngxNavbarDynamicExpand not always collapsing - html

Question

I have 2 issues with my ngx bootstrap navbar that will no doubtably be fixed with the same solution. My navbar has two different toggles separated with an ng-container whether the user is logged in or not. I created my navbar using the example in the docs
Now the issue I am having is the not logged in view does not have enough items for it to collapse when the screen size is reduced, so instead of it being a dropdown it is just a narrowed version.
not logged in full screen navbar:
not logged in small screen navbar:
now this could be bearable if it wasn't for the logged in version having much more nav links that get added in at log in. But when they get added in while the window is small the navbar doesn't collapse it just remains narrow (and actually goes off screen)
small screen then log in
when logged in, the navbar works correctly as intended for full screen and after logging in then reducing the screen size
logged in full screen
logged in small screen - closes into just a hamburger menu icon
However if the user is already logged in on page load in a small screen (tested with a hardcoded variable) then the navbar is collapsed correctly to be the hamburger menu/dropdown list. (I don't want to refresh the page as it defeats the purpose of having an angular app).
And what is even more interesting is if the user logs out while in the small screen then the navbar stays in its collapsed state.
So what I want is the navbar to go into that state while logged out.
template:
<nav ngxNavbarDynamicExpand class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" (click)="collapse.toggle()">
<span><fa-icon [icon]="hamburger"></fa-icon></span>
</button>
<div class="container-fluid">
<ngx-navbar-collapse #collapse="ngxNavbarCollapse">
<a class="navbar-brand abs" href="https://example.com/">
<img width=auto
height="30px"
src="example.png"
alt=""
loading="lazy"sizes="(max-width: 1595px) 100vw, 1595px">
</a>
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
</li>
</ul>
<ng-container *ngIf="(accountService.loggedIn$ | async); else notLoggedIn">
<div class="dropdown" dropdown>
<button class="dropdown-toggle text-light transparent-button ml-2" dropdownToggle>Admin</button>
<div class="dropdown-menu mt-3" *dropdownMenu>
<a routerLink="/" class="dropdown-item">1</a>
</div>
</div>
<div class="dropdown" dropdown>
<button class="dropdown-toggle text-light transparent-button ml-2" dropdownToggle>Manage</button>
<div class="dropdown-menu mt-3" *dropdownMenu>
<a routerLink="/userdetails" class="dropdown-item">My details</a>
</div>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/install" routerLinkActive="active">Install</a>
</li>
<li class="nav-item">
<button class="btn btn-primary"
routerLink="/"
(click)="logout()"
role="button">
<span class="d-none d-md-inline">Logout</span>
<fa-icon [icon]="faPowerOff" [classes]="['ml-md-2']"></fa-icon>
</button>
</li>
</ul>
</ng-container>
<ng-template #notLoggedIn>
<ul class="navbar-nav">
<li class="nav-item">
<button class="btn btn-primary"
routerLink="/login"
role="button">
<span class="d-none d-md-inline">Login/Register</span>
<fa-icon [icon]="faUser" [classes]="['ml-md-2']"></fa-icon>
</button>
</li>
</ul>
</ng-template>
</ngx-navbar-collapse>
</div>
</nav>
typescript:
import { Component, OnInit } from '#angular/core';
import { faPowerOff, IconDefinition, faBars, faUser } from '#fortawesome/free-solid-svg-icons';
import { AccountService } from '../services/account.service';
#Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {faPowerOff: IconDefinition = faPowerOff;
hamburger: IconDefinition = faBars;
faUser: IconDefinition = faUser;
constructor(public accountService : AccountService) { }
ngOnInit(): void {
}
logout(){
this.accountService.logout();
}
}