event binding and property binding user experience

[doggy8088]

Describe the bug

Related to #474

The developing experience for event binding and property binding user experience is changed in this new version 0.900.3.

To Reproduce

Steps to reproduce the behavior:

1. find a tag
2. add a (click)="" event binding or [accessKey]="" property binding

Expected behavior

When you type (cli then hit Tab should appear (click)="<CURSOR_HERE>".

Logs
N/A
Screenshots

0.900.3 Video
https://youtu.be/JB23F7vflL8

0.802.3 Video
https://youtu.be/i1XoRvyibjo

The original (0.802.3) DX is a bit nicer. Please change it back to the original behavior.

Additional context

Hope to get the same or better developer experience (DX) of the code snippet feature.

[ayazhafiz]

@kyliau we can probably extend the replacement span to include the closing parantheses in these cases, since we now know the kind of binding we're in before providing a completion. What do you think?

For reference: relevant change was angular/angular#34445

[ayazhafiz]

@doggy8088 does this remain a strong pain point for you?

[doggy8088]

@ayazhafiz I'm using the latest version (0.900.15). The UX issue still there. Let me give you an example.

1. Pick any tag, add an event binding syntax such as (click)=""

2. Enter (, enter cli, then hit Tab to complete. The current version will produce:

   (click|)
   ------↑

   I expected to get the following result:

   (click)="|"
   ---------↑

[ayazhafiz]

Okay, we will take a look at what can be done here :)

[doggy8088]

@kyliau The event binding is broken again in v12.0.0. There is no IntelliSense at Angular v12.0.0 version in the Visual Studio Code.