Hide the navbar in a specific component - html

Question

So I want to hide the navbar while in a mobile view state. The navbar was created on a seperate component. Here is my admin.component.html like here:
<div *ngIf="!isMobile">
<div class="admin-container">
<!-- sidebar -->
<nav class="col-2 d-md-block sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" routerLink="/admin/dashboard"> Dashboard </a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/admin/orders"> Orders </a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/admin/adminProduct"> Products </a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/admin/reports"> Reports </a>
</li>
</ul>
</div>
</nav>
<!-- content -->
<div class="admin-content p-3">
<div
class="d-flex justify-content-end align-items-center pb-2 mb-2 border-bottom"
>
<form novalidate #loginForm="ngForm" (ngSubmit)="logout()">
<button type="submit" class="btn btn-juliet mt-3">Logout</button>
</form>
</div>
<router-outlet></router-outlet>
</div>
</div>
</div>
<div *ngIf="isMobile">
<div class="admin-container">
<!-- sidebar -->
<nav class="col-2 d-md-block sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" routerLink="/admin/dashboard"> Dashboard </a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/admin/orders"> Orders </a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/admin/adminProduct"> Products </a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/admin/reports"> Reports </a>
</li>
</ul>
</div>
</nav>
<!-- content -->
<div class="admin-content p-3">
<div
class="d-flex justify-content-end align-items-center pb-2 mb-2 border-bottom"
>
<form novalidate #loginForm="ngForm" (ngSubmit)="logout()">
<button type="submit" class="btn btn-juliet mt-3">Logout</button>
</form>
</div>
<router-outlet></router-outlet>
</div>
</div>
</div>
Here is the admin.component.ts
import { Component, OnInit } from '#angular/core';
import { AuthService } from '../auth.service';
import { Router } from '#angular/router';
import { NavbarService } from '../services/navbar.service';
import { RibbonService } from '../services/ribbon.service';
import { ResponsiveService } from 'src/app/services/responsive.service';
import { FooterService } from '../services/footer.service';
#Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.css'],
})
export class AdminComponent implements OnInit {
public isMobile: boolean;
constructor(
private authService: AuthService,
public nav: NavbarService,
public ribbon: RibbonService,
public footer: FooterService,
private router: Router,
private responsive: ResponsiveService,
) {}
ngOnInit(): void {
this.nav.hide();
this.ribbon.hide();
this.footer.hide();
this.onResize();
this.responsive.checkWidth();
}
logout() {
this.authService.clear();
this.router.navigate(['home']);
}
onResize() {
this.responsive.getMobileStatus().subscribe((isMobile) => {
this.isMobile = isMobile;
this.nav.hide();
});
}
}
And my app.component.html
<app-ribbon></app-ribbon>
<app-navbar></app-navbar>
<div class="app-body" (window:resize)="onResize()">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
I tried applying *ngIf on the admin.component.html but the navbar won't go away. Thanks for the future answers!