3

root component

<div class="container">
  <div class="row">
    <ng-container *ngIf="router.url !== '/login'">
      <app-navbar></app-navbar>
    </ng-container>
  </div>
  <ng4-loading-spinner></ng4-loading-spinner>
  <router-outlet></router-outlet>
  <div class="col-xs-12  col-sm-12 col-md-12">
    <ng-container *ngIf="router.url !== '/login'">
      <app-footer></app-footer>
    </ng-container>
  </div>
</div>

When I check if router.url (router injected on root component typescript on constructor) equals ./login then remove from DOM. But angular shows this template on 1-2 ms after loading page and then removes from DOM. But I don't want to visible <app-navbar></app-navbar> and <app-footer></app-footer> ..enter image description here

lealceldeiro
  • 14,342
  • 6
  • 49
  • 80
Seymur Asadov
  • 612
  • 5
  • 19
  • 2
    Maybe have something in your code do this check for you and assign the result to variable that will be used in the ngIf, but default it to be false so that it would only display if something change it to true. Without seeing your other code/routes, this is just a thought on how to help. – canpan14 Aug 24 '18 at 12:45
  • 2
    Try with `*ngIf="router?.url? && router.url !== '/login'"` ? –  Aug 24 '18 at 12:46
  • Thanks for answer. – Seymur Asadov Aug 24 '18 at 13:24

1 Answers1

2

The problem is with the way you are getting current Route. In latest version of angular, Router does not return simple object. Instead it returns an observable with various redirection events. Router does not directly goes to the target URL, it goes through a specified path in order to reach target URL.

You can use below code to get current route and store it in a variable and then compare it in your template.

currentURL:any;

constructor(private router: Router){

   this.router.events.filter((res) => res instanceof NavigationEnd).subscribe((res) => {
      this.currentURL = this.router.url;   
   });

}

also import NavigationEnd on top of your code

import { Router, NavigationEnd } from '@angular/router';

The above code will make sure you only get the last(target) URL of entire redirection cycle.

Umang Patel
  • 133
  • 3
  • 2
    I would add to this in the template, use `*ngIf="currentURL && currentURL !== '/login'"`, otherwise, great answer. – Mark Hughes Aug 24 '18 at 13:03
  • 1
    Thanks for answer.. Right syntax on Angular6 is this ... `this.router.events.pipe( filter(res => res instanceof NavigationEnd) ).subscribe(() => { this.currentURL = this.router.url; });` – Seymur Asadov Aug 24 '18 at 13:24