Add event listener in Dart for events in polymer

Question

Need add event listener for core-header-transform, from core-scroll-header-panel element in dart package core_elements. How i can do that?

app.html:

<template>
  <core-scroll-header-panel id="scroll-panel" condenses flex>
    <core-toolbar class="tall">
        <header id="main-header" horizontal layout flex>
            <div id="application-name">
                status
                <server-status></server-status>
            </div>
        </header>
      <div class="bottom indent title">title</div>
    </core-toolbar> </template>

Dart app.dart:

import 'package:polymer/polymer.dart';

@CustomTag('some-app')
class SomeApp extends PolymerElement {
  Some.created() : super.created();

  onReady(){
    var coreScrollHeader = $['scroll-panel'];

    coreScrollHeader.on['core-header-transform'].listen((event){
      print('core-header-transform');
    });
  }
}

in pubspec.yaml: polymer: "^0.16.3+3"

Answer 1

At first ensure Polymer is properly initialized (for details see how to implement a main function in polymer apps)

The register the event listener like:

  @whenPolymerReady
  onReady(){
    var coreScrollHeader = querySelector('* /deep/ #scroll-panel');

    coreScrollHeader.on['core-header-transform'].listen((event){
      print('core-header-transform');
    });
  }