5

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.

Community
  • 1
  • 1
Ibrahim Azhar Armar
  • 25,288
  • 35
  • 131
  • 207
  • can you create a demo code on stackblitz.com ? It would help me understand what you are trying to achieve. May be we can suggest a better way to implement. – Shashank Vivek Mar 02 '19 at 05:16
  • Can you try with named router-outlet one for authenticate and not authenticate for https://stackoverflow.com/questions/38038001/multiple-named-router-outlet-angular-2 – Sreemat Mar 02 '19 at 05:47
  • 1
    This will help you https://stackoverflow.com/questions/44699469/how-to-use-multiple-ng-content-in-the-same-component-in-angular-2/44699654#44699654 – yurzui Mar 02 '19 at 05:59
  • Thank you @yurzui, that link helped. The solution was to use if else using ng-template and it started working again. The first div I used `
    ` and the second one replaced with `` and it works without any issues.
     – Ibrahim Azhar Armar Mar 02 '19 at 06:05
  • That's because Angular only recognizes the first router-outlet – yurzui Mar 02 '19 at 06:06

2 Answers2

11

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>
Andrew Rayan
  • 350
  • 1
  • 7
  • This works, but why not only making one *ngIf container and one else for the other case (skip then)? 2 code blocks instead of 3... is there any good reason? – MikhailRatner Jun 13 '22 at 18:33
1

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 },
...
Denis Pupyrev
  • 66
  • 5