как удалить тег ‹app-header› для входа в систему и добавить его обратно в другие маршруты в angular 9

я пытаюсь создать приложение в Angular 9 (MEAN Stack), в котором мне нужно удалить тег и его содержимое в маршруте входа в систему, и после входа в систему тег должен вернуться, чтобы показать его содержимое. Пожалуйста, посмотрите на мои коды ниже и помогите мне решить эту проблему.

Логин.Component.ts

import { Component, OnInit, OnDestroy, ViewChild, ElementRef, } from '@angular/core';
import {Router} from '@angular/router';
import {BackendService} from '../services/backend.service';
import { Location } from '@angular/common';
declare var $: any;

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit,  OnDestroy{
  title = 'Login';
  error = false;
errorMessage = '';

private querySubscription: { unsubscribe: () => void; };
  dataLoading = false;
  // tslint:disable-next-line: variable-name
  constructor(private _backendService: BackendService, private _route: Router) { }

  ngOnInit(): void {
    if (localStorage.getItem('token')) {
      this._route.navigate(['/dashboard']);
    } else {
      const body = document.getElementsByTagName('body')[0];
      const wrapper = document.getElementsByClassName('wrapper')[0];
      body.classList.add('login');
      wrapper.classList.add('wrapper-login');
      $('#headertopbar').hide();
      $('#sidebar').hide();
      $('.custom-template').remove();
    }
  }

  login(formData: any){
    this.dataLoading = true;
    this.querySubscription = this._backendService.login(formData).subscribe((res: { errorCode: number; errorMessage: string; }) => {
      if (res.errorCode > 0) {
          this.error = false;
          this.errorMessage = '';
          this.dataLoading = false;
          const body = document.getElementsByTagName('body')[0];
          const wrapper = document.getElementsByClassName('wrapper')[0];
          // tslint:disable-next-line: align
           this._route.navigate(['/dashboard']);
          // tslint:disable-next-line: no-string-literal
          window.localStorage.setItem('token', res['data'].token);
          console.log('Success');
          body.classList.remove('login');
          wrapper.classList.remove('wrapper-login');
          $('#headertopbar').show();
          $('#sidebar').show();
          $('.custom-template').add();
      } else {
          this.error = true;
          this.errorMessage = res.errorMessage;
          this.dataLoading = false;
      }
  },
      (error: { message: string; }) => {
          this.error = true;
          this.errorMessage = error.message;
          this.dataLoading = false;
      },
      () => {
          this.dataLoading = false;
      });
}

ngOnDestroy(){
  if (this.querySubscription) {
    this.querySubscription.unsubscribe();
}
}

}

в приведенном выше коде я просто скрыл div, вызвав его свойство класса.

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

app.routing.component.html

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { UsersComponent } from './users/users.component';
import { HeaderComponent } from './header/header.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ItemMasterComponent } from './item-master/item-master.component';
import { SettingsComponent } from './settings/settings.component';
import { AdminComponent } from './admin/admin.component';
import { AuthGuardService } from './services/auth-guard.service';

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent},
  { path: 'header', component: HeaderComponent, },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuardService]},
  { path: 'users', component: UsersComponent, canActivate: [AuthGuardService]},
  { path: 'item-master', component: ItemMasterComponent, canActivate: [AuthGuardService]},
  { path: 'settings', component: SettingsComponent, canActivate: [AuthGuardService]},
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuardService]},
  { path: '**', redirectTo: '/login', pathMatch: 'full' }
];



@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Страница входа

Информационная панель с заголовком