Which @angular/* package(s) are relevant/releated to the feature request?

compiler-cli, language-service

Description

Extended diagnostics often have a suggestion solution. This is by design, since they are intended to identify specific mistakes often made by developers with clear solutions or best practices. Since these fixes are so mechanical, we should give an easy, automated way to apply them to a diagnostic.

Proposed solution

Extended diagnostics should be able to generate a set of possible "quick fix" transformations which IDE's can use to address the diagnostic. In the case of invalidBananaInBox, we could automate a change like:

<div ([foo])="bar">Hello</div>
<!-- Fixes to... -->
<div [(foo)]="bar">Hello</div>

@danieltre23 came up with a prototype in danieltre23@52f6a7a and was able to demo the feature. It's a relatively small commit so I don't think this is a significant amount of effort. The work here is to define the "quick fix" data type in the compiler, we'll need something custom since we don't want to depend on VSCode / LSP types here (curious how tsc does this?). The language service / VSCode extension will then need to transform the "quick fix" type into VSCode-compatible "code actions", which the IDE can show and apply with a single click.

Alternatives considered

N/A