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?


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']))">

Answered By – Bob

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.