I am attempting to listen to a button click on the a toolbar that toggles the main drawer of a drawer_panel when the button is clicked, but without much success.
The code is shown below - the code in the method void menu_icon_handler() is incorrect.
<!DOCTYPE html>
<link rel="import" href="../../../packages/polymer/polymer.html">
<link rel="import" href="../../../packages/core_elements/core_drawer_panel.html">
<link rel="import" href="../../../packages/core_elements/core_icon_button.html">
<link rel="import" href="../../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../../packages/paper_elements/roboto.html">
<link rel="import" href="../../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../../packages/paper_elements/paper_icon_button.html">
<link rel="import" href="./reg/registrant-view.html">
<link rel="import" href="./reg/patient-view.html">
<link rel="import" href="drawer-form.html">
<polymer-element name="main-form">
<template>
<core-drawer-panel id="core_drawer_panel">
<section id="drawer" drawer>
<drawer-form on-new-patient-event='{{newPatientHandler}}'></drawer-form>
</section>
<section id="main" main>
<core-toolbar id="core_toolbar">
<paper-icon-button
icon="menu"
id='menu_icon'
on-click='{{menu_icon_handler}}'></paper-icon-button>
<div id="div" flex>Toolbar</div>
</core-toolbar>
<section id='new-patient'>
</section>
</section>
</core-drawer-panel>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:core_elements/core_drawer_panel.dart';
@CustomTag( 'main-form' )
class MainForm extends PolymerElement
{
CoreDrawerPanel drawerPanel;
MainForm.created() : super.created();
void toggleDrawer()
{
bool state = drawerPanel.narrow;
}
void menu_icon_handler()
{
bool state = drawerPanel.narrow;
print ( state );
}
@override
void attached()
{
super.attached();
drawerPanel = $['drawerPanel'] as CoreDrawerPanel;
}
}
</script>
</polymer-element>
When the toolbar button is clicked, I get the following stacktrace
Exception: The null object does not have a getter 'narrow'.
NoSuchMethodError: method not found: 'narrow'
Receiver: null
I see the null, looking at the docs 'narrow' is an attribute of CoreDrawerPanel
You look the element up with
but your HTML doesn't contain an element with id
drawerPanel, but you have an element with idcore_drawer_panelchanging the id in this line should solve the problem