Hide and Show angular 4 component depending on route

angular 4 [hidden] example
angular 6 - show/hide nav items if user is logged in
angular 6 show hide div on click
angular hide navbar menu from login page
angular 9 hide component based on route
how to hide header component on login page in angular 4
angular hide component
angular hide button after click

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


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; 
    }
}

Hide elements based on routing in Angular2 rc1, import {Router} from '@angular/router'; public location = '' You can hide/show elements by checking the url for specific component,. 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?


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>

How to Show Hide or Toggle Elements in Angular 4, The *ngIf directive has a Boolean variable named show, which is set to true or false inside the component's method. Based on the condition, it will show or hide​  The next step is to show/hide the components, depending on the value of the flag. Here you have two options: Use *ngif <my-component *ngif="showFirst" ></my-component> <my-other-component *ngif="!showFirst" ></my-other-component> This way, only one of both components is part of the final html and no instance of the other one is created.


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>

Angular: Hide Navbar Menu from Login page, angular 4 [hidden] example angular 6 - show/hide nav items if user is logged in angular hide navbar menu from login page angular 6 show hide div on click have an angular application that I want to hide one of the 'included views' if the main view is the homepage view. Stack Overflow for Teams is a private, secure


Below code worked for me.

I am hiding side navigation in login screen.

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

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  Restricting components based on a User's authentication status. Using Directives to Show & Hide Elements for Authenticated Users PRO 🅰 Master Angular FASTER!


Take a look at this Angular Rounting guide.

You'll need a method called canActivate, this mehtod return a boolean and its in a service.

This I what works form me:

{path : 'getIn', component: GetinComponent , canActivate: [GetInService] }

Hide and Show angular 4 component depending on route, 4. 5. 6. 7. 8. 9. 10. 11. import { Component } from '@angular/core';. @Component(​{. selector: 'my-app',. template: `. <app-header></app-header>. At least with more recent versions of angular 2 and depending on the specific use case.You can transclude the content and only add it on the route component where you want it. Much better than maintaining a list of routes and using ngIf conditions. In your component template. Add an ngcontent element and use select to give it a name


angular-login-hide-navbar-ngif, Restricting components based on a User's authentication status. Angular. Building RealWorld, Production-Quality Apps with Angular. 4 previous chapters; How To: Basic Page Layout and Routing · Learn To: Use FormBuilder to Create How To: Using Directives to Show & Hide Elements for Authenticated Users PRO. Angular: Hide Navbar Menu from Login page. will need to create some components, a module, a service, a route guard and a model interface: does not show or


How To: Using Directives to Show & Hide Elements for , 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  In this article, I will show you how to solve a common problem using the Angular way. Imagine that you have a layout like the following: You have the main navigation and a sidebar that needs to display different content (in our case, links) based on the current route.


Hide and Show angular 4 component depending on route, Router, Displays the Routing Components for the active Route. how the router should navigate to a component based on a URL pattern. ngOutlet, The directive ( <ng-outlet> ) that marks where the router should display a view. /heros/4 has been matched against the App , Heroes and HeroDetail Routing Components. Here I want to hide that 23 on the browser URL, why do i want to show the ID which can be sensitive. In UI-Router we used to have URL="something" and that URL is visible on the browser URL. Don't we have similar in Angular2 like passing RouteParams and have custom name on the browser URL instead of the Route name itself.