CODEWITHSUNDEEP
dartdart-polymer
Shady
Shady

Reputation: 804

Listen to click event of core-drawer-panel with polymer.dart the "right" way?

I have this core-drawer-panel and want the #navicon to toggle the drawer. Like in the examples.

Using on-click in the HTML and the following code in the dart file, I get a NoSuchMethod Error on the panel

  void toggleDrawer() {
    querySelector('#drawerPanel')..togglePanel();
  }

Now I read that on-click is somewhat deprecated and I'm totally confused.

What is the best practice way to query elements and catch events like this one? I saw this question as well, but it's still not working for me.

Upvotes: 0

Views: 467

Answers (2)

Shady
Shady

Reputation: 804

See Günters answer first. Other than that, I found out how to do it like the article on dartlang.org suggests.

HTML

<core-drawer-panel id="drawerPanel">

        <core-header-panel drawer>
            <core-toolbar id="navheader'">
                <span>Menu</span>
            </core-toolbar>
            <core-menu>
                <core-item label="One"></core-item>
                <core-item label="Two"></core-item>
            </core-menu>
        </core-header-panel>

        <core-header-panel main>
            <core-toolbar id="mainheader">
                <paper-icon-button id="navicon" icon="menu"></paper-icon-button>
                <span flex>Title</span>
            </core-toolbar>
            <div class="content">
                If drawer is hidden, press button to display drawer.
            </div>
        </core-header-panel>

    </core-drawer-panel>

Dart File

  void attached() {
    super.attached();
    shadowRoot.querySelector('#navicon').on['tap'].listen(
        (event) => toggleDrawer()
    );
  }

  void toggleDrawer() {
    shadowRoot.querySelector('#drawerPanel')..togglePanel();
  }

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657268

on-tap instead of on-click provides better support on mobile platforms. on-tap 'includes' on-click. See also Touch & gestures and When to use on-click or on-tap w/ Polymer?

You probably need shadowRoot.querySelector(....

Upvotes: 0

Related Questions