Bob Bob - 1 year ago 209
TypeScript Question

Hide elements based on routing in Angular2 rc1

I have some elements I want on every page except the login page. I'd like to use ngIf or possibly the hidden property of the elements to hide those elements when the user is on the login page.

I have tried this:

<div [hidden]="router.isRouteActive(router.generate('/login'))">

based on this question and answer: In Angular 2 how do you determine the active route?

And have also tried this:

<div *ngIf="!router.isRouteActive(router.generate('/login'))">

but haven't had any success.

For reference here is the component that matches this html.

import { Component, OnInit } from 'node_modules/@angular/core';
import { HTTP_PROVIDERS, XHRBackend } from 'node_modules/@angular/http';
import { Routes, Router, ROUTER_DIRECTIVES } from 'node_modules/@angular/router';

import { LoginService } from './login/login.service';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';

selector: 'portal',
templateUrl: 'portal/portal.component.html',
directives: [ROUTER_DIRECTIVES, LoginComponent, UserComponent ],
providers: [

{ path: '/login', component: LoginComponent},
{ path: '/user/:username', component: UserComponent}

export class PortalComponent implements OnInit{
private router: Router
constructor() {}

ngOnInit() {

The documentation for isRouteActive is pretty slim, the same for generate. Any direction on a better way to achieve this behavior?

Bob Bob
Answer Source

I was able to find the syntax I needed for rc1 buried in a comment here: In Angular 2 how do you determine the active route?

<div *ngIf="!router.urlTree.contains(router.createUrlTree(['/login']))">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download