Angular - conditional div container around <router-outlet>

Question

In my app.component.html I want to render certain div containers based on the current url. For example

1. If current URL is authenticate render the following

<div *ngIf="'authenticate' === this.currentUrl">
    <router-outlet></router-outlet>
</div>

2. If current URL is not authenticate, render the following

<div *ngIf="'authenticate' !== this.currentUrl" id="wrapper">
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row extranet-outlet-wrapper">
                        <router-outlet></router-outlet>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I am not using any child routes. It is because, I want a different layout only for authenticate component and the rest remains same.

This is working when it first loads, but when I click on any [routerLink] the view does not gets updated. However if I reload the screen it works. The issue is with the conditional rendering of <router-outlet> in app.component.html, I checked this by removing the condition and it works just fine.

Can someone help me understand what is happening here and how to go about fixing this if possible without using child routes.

Answer 1

You can try this solution.

<ng-container
  *ngIf="'authenticate' !== this.currentUrl; then notauthenticated; else authenticate">
</ng-container>

<ng-template #notauthenticated>
  <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row extranet-outlet-wrapper">
                        <router-outlet></router-outlet>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #authenticate>
  <router-outlet></router-outlet>
</ng-template>

Answer 2

Angular provides a Directive [routerLinkActive], which takes as input the array of classes that will be added if a specific part of the route included in the url.

Usage

app.component.html

<div class="main-container" [routerLinkActive]="['app-active-class']">
  <router-outlet></router-outlet>
</div>

pages.component.html

<div class="page-category">
  <a [routerLink]="1" [routerLinkActive]="['page-category-active-class']">Num_1</a>
  <a [routerLink]="2" [routerLinkActive]="['page-category-active-class']">Num_2</a>
</div>
<div class="page-view">
  <router-outlet></router-outlet>
</div>

page.component.html

<div class="page-num">
  {{ page_num }}
</div>

page.component.ts

import { ActivatedRoute } from "@angular/router";

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  page_num = this.route.snapshot.paramMap.get("page_num")
}

app-routing.module.ts

...
{ path: "page", component: PagesComponent },
{ path: "page/:page_num", component: PageComponent },
...