Angular: ngModelChange does not work on methods of a member variable

[iu4u57k3]

app_component.dart:

import 'package:angular/angular.dart';
import 'package:angular_components/material_input/material_input.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.scss.css'],
  templateUrl: 'app_component.html',
  directives: [
    coreDirectives,
    formDirectives,// for material input
    MaterialInputComponent,
    MaterialInputDefaultValueAccessor,
  ],
)
class AppComponent {
  AppComponent() {
    input = new Input();
  }

  Input input;
}

class Input {
  String text;

  void textChange(String newText) {
    print('textChange 2');
    text = newText;
  }
}

app_component.html:

<material-input required
                label="Enter text"
                [ngModel]="input.text"
                (ngModelChange)="input.textChange"></material-input>

app_component.scss:

@import 'package:angular_components/css/material/material';

Project compiles successfully but when text inside material-input is changed, nothing is logged to the console.

Dart VM version: 2.4.0 (Wed Jun 19 11:53:45 2019 +0200) on "linux_x64"
webdev version : 2.2.0

angular:
version: "6.0.0-alpha"
angular_forms:
version: "2.1.3"
angular_components:
version: "0.14.0-alpha"
build_web_compilers:
version: "2.1.0"

[navidshad]

Test it on a new project

[iu4u57k3]

Hello navidshad, I did the test on a new project, and it still shows the same result.

[iu4u57k3]

Also I noticed that, ngModelChange tries to call textChange from the component itself and not from input.textChange.

If textChange is defined for the component then it will be called instead of calling input.textChange, even if we use : (ngModelChange)="input.textChange"

[alorenzen]

Our support for event tearoffs is pretty limited. I think you'll need to write the full expression here:
(ngModelChange)="input.textChange($event)"

[iu4u57k3]

Thanks for the clarification,

However, I feel like there is a small bug:

if we use : (ngModelChange)="input.textChange"
ngModelChange tries to call textChange from the component itself and not from input.textChange.

Also, analyzer plugin does not show any warning or error and project compiles successfully, after debugging for a while you start to notice something is wrong.

[iu4u57k3]

If event tearoffs are not supported for input.textchange and textchange is not defined on the component class then there should be warning or error message for clarification or it will cause a lot of confusion.

I had to spend few hours debugging this issue and rewriting components in a different way.