Binding syntax outside of an attribute still highlighted as a binding rather than plain text

[Cdrew92]

🐞 bug report

Is this a regression?

N/A

Description

A clear and concise description of the problem...

If the bug is caused or experienced by a particular source code, please provide a minimal
reproduction of that source code.

Bug Type

What does this bug affect

• Angular Language Service VSCode extension

• Angular Language Service server

Reproduction

Steps to reproduce the behavior:

1. in a component.html file add the following:

    <app-image-img>
        [filesArray]="event.Event_Files" //this line of text is blue!
    </app-image-img>

Expected behavior

• Because the filesArray property is defined outside the closing arrow of the opening <app-image-img> element, I would expect the text to turn white as it does when a property without an array is added outside the opening arrow:

    <app-image-img>
        [filesArray]="event.Event_Files" //this line of  text is blue, indicating no error!
        files="test" //this line of text is white, denoting an error!
    </app-image-img>

Logs

N/A - No errors in Angular Server Log or Browser Console

Screenshots

Incorrectly added property tag outside of closing arrow: (unexpected behavior, text is blue.)

Shows white text when non-bracketed property is added: (expected behavior, showing white text)

Correct implementation of property binding: (working properly)

🌍 Your Environment

Angular Version:

Angular CLI: 13.3.7
Node: 16.13.2
Package Manager: npm 8.1.2
OS: win32 x64

Extension Version:

Angular Language Service v14.01

VSCode Version:

Version: 16.9.0 (user setup)

Operating System:

Edition	Windows 10 Pro
Version	21H2
Installed on	‎5/‎28/‎2021
OS build	19044.1766
Experience	Windows Feature Experience Pack 120.2212.4180.0

Extension options:

{
    "angular.log": "verbose"
}

Anything else relevant?
N/A

[atscott]

This is not a syntax error. Syntactically, this is just a text literal.

The blue and white highlighting is the syntax highlighting, which is regex-based. White is a text literal and blue is an attribute.

There won't ever be an error for this, but we could investigate how feasible it is to ensure the syntax highlighting gets fixed here.

[Cdrew92]

Thanks, Andrew!

[atscott]

Closing in favor of angular/angular#49842

edit: reopening. This one deals with the binding text while the angular/angular issue is for adding a warning/error

[a-stewart]

I've just come across the same issue. The challenge is that the language is injected into L:text.html -comment which means it applies the logic at the root element.

There are a few patterns which are inserted:

    {
      "include": "#interpolation"
    },
    {
      "include": "#propertyBinding"
    },
    {
      "include": "#eventBinding"
    },
    {
      "include": "#twoWayBinding"
    },
    {
      "include": "#templateBinding"
    }

If we remove #propertyBinding and #eventBinding, the default html language extension seems to be fine highlighting the contents anyway.

What do you reckon to removing the bindings and letting the default html extension handle these?

An alternative option could be to have a second injected grammar which injects into something like L:text.html meta.tag -comment. This would allow for defining certain grammars which are only matched in tags, such as these bindings, whilst also allowing for things like interpolation to be defined on source.html.

[atscott]

Hi @a-stewart, that seems reasonable. Would you like to send a PR out for this?

[a-stewart]

Sorry for the delay - created #1992 for this.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}