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

Issue

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.

Solution

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>

  1. Use a raw string as the template:

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

Answered By – Kul

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.