How to enable or disable a block on a page?

Question

Angular

Good afternoon.
Question on the second angular.
There is a main component app.component
In it is a template:

<header class="header"></header>
<aside class="aside"></aside>
<router-outlet></router-outlet>

How to hide aside or header on other pages if they are not required there?

Answer 1

In the template itself, write ngIf

<header *ngIf="hasHeader" class="header"></header>
<aside *ngIf="hasAside" class="aside"></aside>
<router-outlet></router-outlet>

Listening for router changes in app.component

import {Router} from '@angular/router';
export class AppComponent {
  hasHeader: boolean = true
  hasAside: boolean = true

  constructor(
    private _router: Router
  ) { }

  ngOnInit() {
    this._router.events
      .subscribe(params => {
        let path = params.url.split('/')[1]
        if (path == 'auth') {
          this.hasHeader = false
          this.hasAside = false
        } else {
          this.hasHeader = true
          this.hasAside = true
        }
      })
  }
}