question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problems with property opened in Angular Material --> sidenav

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
omararturocommented, Oct 28, 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.

1reaction
paumayrcommented, Sep 29, 2016

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error with Angular Material sidenav: cannot ... - Stack Overflow
Show activity on this post. I fixed the issue by changing mat-sidenav to mat-drawer in the mat-navbar-test. component. html .
Read more >
Sidenav - Angular Material
The opened state can also be set via a property binding in the template using the opened property. The property supports 2-way binding....
Read more >
Why is my sidenav initialliy hidden when I set its default to ...
So using property binding something like [opened]="true". Double check that is the correct input property for setting the initial opened state ...
Read more >
Angular Material 15 Tutorial: Navigation UI with Toolbar and ...
Following that, we'll build a navigation UI using the Material toolbar, sidenav, buttons, and icons components from Material Design.
Read more >
using mat-sidenav, cannot read property 'toggle' of ... - YouTube
HTML : Angular Material : using mat- sidenav, cannot read property 'toggle' of undefined [ Beautify Your Computer ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found