Problems with property opened in Angular Material --> sidenav

[ADominguezes]

I've a problem with sidenav, with the property "opened" of md-sidenav

I've this code:

<md-sidenav #sidenav mode="side" class="app-sidenav" opened="true">
    ...
</md-sidenav>

When I refresh the page, sidenav is open and it's ok, but when I click in the button for close sidenav, I've the next errors in console:

error_handler.js:45 EXCEPTION: Uncaught (in promise): undefined
error_handler.js:50 ORIGINAL STACKTRACE:
error_handler.js:51 Error: Uncaught (in promise): undefined
at resolvePromise (zone.js:429)
at MdSidenav._openPromiseReject (zone.js:406)
at MdSidenav._onTransitionEnd (sidenav.js:152)
at DebugAppView._View_AppComponent0._handle_transitionend_5_0 (AppComponent.ngfactory.js:2129)
at view.js:404
at dom_renderer.js:249
at dom_events.js:26
at ZoneDelegate.invoke (zone.js:203)
at Object.onInvoke (ng_zone_impl.js:43)
at ZoneDelegate.invoke (zone.js:202)
zone.js:357 Error: Uncaught (in promise): undefined(…)

My version of Angular Material is: 2.0.0-alpha.9
My version of Sidenav is: 2.0.0-alpha.8-2

[paumayr]

As of 2.0.0-alpha.9 there is only a single package called @angular/material
you can uninstall all @angular2-material/* packages, as all controls are now in @angular/material.

Note: also, update your NgModule to only reference MaterialModule / MaterialModule.forRoot()

[ADominguezes]

Ammm!! ok thank you I didn't know. ;)
The problem with sidenav continues.

[rolandjitsu]

Experiencing the same issue. Happens only once, the first time you trigger a change in state (open/close).

[ADominguezes]

Yes it's true, the error shows only the first time

[tapas4java]

Experienced the same issue on material 9-3. Any resolution for this?

[da45]

Hi Guys, I any news please, did someone solve this issue?

[omararturo]

Hi,
This is the temporal solution:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MeteorComponent } from 'angular2-meteor';
import { MdSidenav } from '@angular/material';

import template from './app.component.html';

@Component({
    selector: 'app',
    template
})
export class AppComponent extends MeteorComponent implements OnInit {

    @ViewChild('sidenav') sidenav: MdSidenav;

    constructor(
    ) { 
        super();
    }

    ngOnInit(): void {
        this.sidenav._onTransitionEnd = function () {            
            this._openPromise = null;
            this._closePromise = null;
        }
    }
}

I hope it will be helpful to you.

[jelbourn]

@mmalerba can you confirm that this is fixed in master?

[mmalerba]

Yup, I can repro it in the plunker template but not in master, so seems like it's fixed.

[leocaseiro]

I confim the error still happening with @angular/[email protected]

The fix from @omararturo works temporary for me.

PS: I reported detail about this error here: #1382 (comment)

[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.}