Components: Problems with property opened in Angular Material --> sidenav

Created on 29 Sep 2016 · 11Comments · Source: angular/components

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

Source

ADominguezes

👍2

Most helpful comment

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.

omararturo on 28 Oct 2016

👍2

All 11 comments

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()

paumayr on 29 Sep 2016

👍1

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

ADominguezes on 29 Sep 2016

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

rolandjitsu on 3 Oct 2016

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

ADominguezes on 3 Oct 2016

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

tapas4java on 3 Oct 2016

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

da45 on 17 Oct 2016

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.

omararturo on 28 Oct 2016

👍2

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