Angular: Provide a better story async methods in components

[matanlurey]

Whether this ends up being a new feature(s) or documentation, lots of people have asked for guidance around making asynchronous calls in Angular components and best practices.

One option is to make this explicit, i.e. introduce an @OnChanges() annotation:

class MyComponent {
  @Input()
  int userId;

  @OnChanges(const [#userId])
  Future<Null> onUserIdChanged() async {
    var user = await userService.getUserById(userId);
    print('Looks up user: $user');
  }
}

Or simply make it a practice of using ngOnChanges as it is today:

class MyComponent implements OnChanges {
  @Input()
  int userId;

  @override
  Future<Null> onChanges(_) async {
    var user = await userService.getUserById(userId);
    print('Looks up user: $user');
  }
}

Or some other mechanic. Open for community suggestions 📋

[zoechi]

What problem does this address?

[matanlurey]

We've had users complain there is no idiomatic way to make an asynchronous call (read: RPC) when an input changes, since input changes are currently processed as a setter being called - this means you can't do something like:

User user;

set userId(int userId) async /* <-- Invalid */ {
  user = await getUserById(userId);
}

Another option is we could allow functions to be called, instead of setters.

I actually like this the most so far:

@Input('userId')
Future<Null> setUserId(int userId) async {
  user = await getUserById(userId);
}

[zoechi]

I see. I wasn't aware that async on setters is invalid. Why is that?
The analyzer doesn't complain. .

[zoechi]

After I continued editing, the analyzer showed it as error.
In this case I also prefer such a setter-method.

[b-strauss]

I would also prefer the Input on functions.

[matanlurey]

We're currently discussing how to proceed. Once we have a bit of consensus on the AngularDart team I will share more of the possible designs and let folks weigh in. It's unlikely this will be in 4.0.0.

[matanlurey]

Just an update: We still don't have a clear way to proceed here :-/

@jonahwilliams did some background research, and it's not clear how AngularDart can (today) rely on the Future as part of the component lifecycle - for example, they are not cancelable/abortable. Still open for other suggestions.

/cc @kevmoo

[alorenzen]

Should we close this because of https://github.com/dart-lang/angular/issues/710?

[matanlurey]

I think we can leave it open. Definitely folks _want_ a way to express async "the right way", and we haven't provided one. Open to any ideas, though.

[matanlurey]

Closing due to lack of a specific or good way to move forward here.