Sidenav content margin-left staying after removing the sidenav from the page

[faelmorais]

Bug:

I use a ngIf binding to remove my sidenav from my login page, but after updating to 2.0.0-beta.10 from 2.0.0-beta.8, if I navigate to the login page from one in which the menu was open, the page content stays with a 300px left margin (the width of my sidenav).

What is the expected behavior?

The sidenav container should get margin-left: 0px after the sidenav is no more displayed, like when it's closed using sidenav.close().

What is the current behavior?

I filter the navigation events and use them to determine if the current page is the login page or not to remove the sidenav, it worked fine on 2.0.0-beta.8:

// This function is called on my ngOnInit(), in my app.component.ts
setupMenu() {

    // Filter the NavigationEnd events from the router
    this.router.events.filter((event) => event instanceof NavigationEnd)
        .map(() => this.activatedRoute)
        .map((route) => {
            while (route.firstChild) route = route.firstChild;
            return route;
        })
        .filter((route) => route.outlet === 'primary')
        .mergeMap((route) => route.data)
        .subscribe((event) => {

            // This variable is the one used on the ngIf binding to show the menu
            this.showMenu = this.shouldShowMenu();

        });

}

/**
* Returns whether the current page should have the sidenav or not
*/
shouldShowMenu(): boolean {
    return !((this.router.url == "/") || (this.router.url == "/login"));
}

This is a snippet from my sidenav:

<md-sidenav-container>
    <md-sidenav *ngIf="showMenu" #sidenav mode="side">
        <md-nav-list class="side-nav-list">

            <!-- Sidenav items -->
            <a md-list-item routerLink="/dashboard">
                <div md-list-item fxLayout="row" fxLayoutAlign=" center">
                    <md-icon>dashboard</md-icon>
                    <p>Dashboard</p>
                </div>
            </a>

        </md-nav-list>

    </md-sidenav>

    <!-- Page content -->
    <div>
        <router-outlet></router-outlet>
    </div>

</md-sidenav-container>

What are the steps to reproduce?

Removing the sidenav via ngIf binding, the sidenav-container margin-left will continue the width of the sidenav.
Is it possible that this bug is happening because the sidenav has been split into MdSidenav and MdDrawer?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cli: 1.2.7
node: 6.11.2
os: darwin x64
@angular/animations: 4.3.6
@angular/cdk: 2.0.0-beta.10
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/compiler-cli: 4.3.6
@angular/core: 4.3.6
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/language-service: 4.3.6
@angular/material: 2.0.0-beta.10
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.2.7

Chrome 60.0.3112.113 and Firefox 55.0.3

[willshowell]

Sounds like a duplicate of #6271

[faelmorais]

@willshowell, you're right, din't see it before posting. Closing.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}