CODEWITHSUNDEEP
javascriptangulartypescript
Smokey Dawson
Smokey Dawson

Reputation: 9230

Hide and Show angular 4 component depending on route

Hi there Im not sure if this is possible... basically I want to be able to show a component but only if the route matches and hide a component if the route matches Ive tried this app-header-home shows when the route is '/'which is good but app-header doesnt show at all even when the route inst '/' how can I fix this?

app.component.html

<app-header *ngIf="router.url == '/'"><app-header>
<app-header-home *ngIf="router.url != '/'"></app-header-home> //component I want hidden unless url '/'
<router-outlet></router-outlet>
<app-footer></app-footer>

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';

  constructor(
    private router: Router
  ) {

  }
}

Thanks

Upvotes: 30

Views: 54654

Answers (4)

Sandeep K Nair
Sandeep K Nair

Reputation: 2932

This is in reference to the comment posted by SUNIL JADHAV. Instead of exposing the router handle on the templates we can define it inside a function and call it in the template.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {

  constructor(
    private router: Router,
  ) {}

  ngOnInit() {
  }


  /**
   * Check if the router url contains the specified route
   *
   * @param {string} route
   * @returns
   * @memberof MyComponent
   */
  hasRoute(route: string) {
    return this.router.url.includes(route);
  }
}

Then in the html file we can use it like so

<!-- First view -->
<div *ngIf="hasRoute('home')">
    First View
</div>

<!-- Second view activated when the route doesn't contain the home route -->
<div *ngIf="!hasRoute('home')">
    Second View
</div>

Upvotes: 22

SUNIL JADHAV
SUNIL JADHAV

Reputation: 345

Below code worked for me.

I am hiding side navigation in login screen.

 <div *ngIf="!router.url.includes('login')"  class="sidenav">

Upvotes: 4

Chtioui Malek
Chtioui Malek

Reputation: 11515

The accepted answer didn't work, because i think the variable will be assigned only once, then when we navigate, that variable will not be updated (component already initialized).

here's how I did it.. We inject the router in the component we want to hide :

constructor(private _router: Router){}

then in our template :

<div *ngIf="_router.url != '/login'">
  ... your component html ...
</div>

Upvotes: 13

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

check the router.url in the template:

<app-header><app-header>
<app-header-home *ngIf="router != '/ur_route'"></app-header-home> //component I want hidden unless url /home
<router-outlet></router-outlet>
<app-footer></app-footer>

in app.component.ts inject the router.

export class AppComponent {
  title = 'app';
  router: string;

  constructor(private _router: Router){

          this.router = _router.url; 
    }
}

Upvotes: 41

Related Questions