How to correctly make a layout?

Question

Angular

There is an Agular module. It has a ModuleLayoutComponent which contains the base layout as well as for displaying the components. Question: how can I slightly change the ModuleLayoutComponen so that, depending on the current URL, some elements are shown?

Module code

@NgModule({
  declarations: [ModuleLayoutComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([{path: '', pathMatch: 'full', component: ModuleLayoutComponent, children: [
      {path: '/order', component: OrderComponent},
      {path: '/payment', component: PaymentComponent}
    ]}])
  ],

})

ModuleLayoutComponent

<header></header>
<div class="content">
    <router-outlet></router-outlet>
</div>
<footer></footer>

How can I make it so that if the PaymentComponent is shown in the router-outlet, then in the parent ModuleLayoutComponent add a back button to the footer?

Answer 1

For example like this:

constructor(private router: Router) { }    
      this.router.events
      .subscribe( res => {
      if (res instanceof NavigationEnd) {
        this.currentUrl = res.urlAfterRedirects;
      }
    });

<ng-container *ngIf=currentUrl === 'какой-то url'
   <button>Назад</button>
</ng-container>