"Angular 2 could not understand the value in View#template" using $event

Question

I can't get $event working. Example:

import 'package:angular2/core.dart';

@Component(
    selector: 'my-app', 
    template: '''
        <h1>{{title}}</h1>
        <button (click)="onTest($event)">testing</button>
    ''')
class AppComponent {
    String title = 'Testing event';

    onTest(event) {
        print(event);
    }
}

When I let pub serve the app, I throws a build error:

Build error:
Transform DirectiveProcessor on file_transfer|lib/app_component.dart threw error: Angular 2 could not understand the value in View#template.
'''
        <h1>{{title}}</h1>
        <button (click)="onTest($event)">testing</button...
package:angular2/src/transform/common/type_metadata_reader.dart 164:5   _expressionToString
package:angular2/src/transform/common/type_metadata_reader.dart 920:17  _CompileTemplateMetadataVisitor._populateTemplate
package:angular2/src/transform/common/type_metadata_reader.dart 901:9   _CompileTemplateMetadataVisitor.visitNamedExpression
package:analyzer/src/dart/ast/ast.dart 7455:15                          NamedExpressionImpl.accept
...

I also tried to change the (click) into ng-click as here $event in AngularDart 1.0 is not available anymore - what is the alternative? but it didn't help.

I'm new to angular, but the code above should work, right? I looked at https://webdev.dartlang.org/angular/guide/template-syntax#!#event-binding and the heroes example where $event is used too. Can't see any difference...

Any help is appreciated.

Answer 1

This snippet would work fine if the template was in its own file.

However, since the template is in a .dart file, any $variable in a string will be evaluated to the value of variable in that context.

In this case, either of the following will make this work:

1. Escape the $ in the template. Replace

<button (click)="onTest($event)">testing</button>

with

<button (click)="onTest(\$event)">testing</button>

2. Use a raw string as the template:

template: r''' ...template content... ''')