Hide elements based on routing in Angular2 rc1

Question

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

@Component({
    selector: 'portal',
    templateUrl: 'portal/portal.component.html',
    directives: [ROUTER_DIRECTIVES, LoginComponent, UserComponent ],
    providers: [
        HTTP_PROVIDERS,
        LoginService
    ]
})

@Routes([
    { path: '/login', component: LoginComponent},
    { path: '/user/:username', component: UserComponent}
])

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

    ngOnInit() {
        this.router.navigate(['/login']); 
    } 
}

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

Answer 1

Simply check the router.url in the template:

my.component.ts

...
constructor(public router: Router){}
...

my.component.html

<div *ngIf="router.url != '/login'">
    <h2>Not in login!</h2>
</div>

Answer 2

All of the solutions did not work out as expected. If you have route with parameters. You can use ES6 includes:

<div *ngIf="!_router.url.includes('login')">Show me except on login page</div>

Answer 3

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

<ng-content select="[content-name]"></ng-content>  

Then you can use that component and transclude the content.

<component>
<div content-name> transcluded content</div>
</component>

Or use it without referencing the transcluded content

<component>
</component>

Answer 4

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

Answer 5

There is a hack we can use in some simple cases. It is based on RouterLinkActive directive that can be added not only to anchors but to it's parents also. So we can do the following:

<div routerLinkActive="hidden">
    <a routerLink="/login">Login</a>
</div>

hidden is a standard bootstrap class:

.hidden {
    display: none!important;
}

How it works: when you are inside login area, the hidden class is added and you do not see the div. Once you navigate to another route, the hidden class disappears and the div is visible.

The drawback is that you require to have a link with routerLink inside the div.