Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Strings in bindings are not allowed to contain interpolation syntax #39601

Closed
JoostK opened this issue Nov 7, 2020 · 5 comments
Closed

Strings in bindings are not allowed to contain interpolation syntax #39601

JoostK opened this issue Nov 7, 2020 · 5 comments
Assignees
Milestone

Comments

@JoostK
Copy link
Member

@JoostK JoostK commented Nov 7, 2020

馃悶 bug report

Affected Package

The issue is caused by package @angular/compiler

Is this a regression?

Nope

Description

A parse error occurs when interpolation syntax is used inside of a string literal in a binding: e.g. <comp [input]="'{{interpolation}}'"></comp> is valid but is rejected with an error:

Parser Error: Got interpolation ({{}}) where expression was expected at column 1 in ['{{interpolation}}'] in /~/src/app/app.component.html@0:13

馃敩 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-wjcqqs?file=src%2Fapp%2Fapp.component.html

馃實 Your Environment

Angular Version:
Tested on 10.2.2 but has always been broken.

@JoostK JoostK added type: bug/fix comp: compiler state: confirmed P4 Low-priority issue that needs to be resolved labels Nov 7, 2020
@ngbot ngbot bot modified the milestone: Backlog Nov 7, 2020
@ttma1046
Copy link

@ttma1046 ttma1046 commented Nov 11, 2020

why not [input]="interpolation"?
with
in the ts

this.interpolation = `${whichyouwant}`

@basherr
Copy link
Contributor

@basherr basherr commented Nov 11, 2020

@ttma1046 the idea is to pass a string interpolation to child component but rather to evaluate. [input]="'{{awesome}}'" should be considered as string

@JoostK
Copy link
Member Author

@JoostK JoostK commented Nov 11, 2020

@ttma1046 This issue was created to capture a defect in the parser behavior, it's just a hypothetical example.

@crisbeto crisbeto self-assigned this Nov 24, 2020
crisbeto added a commit to crisbeto/angular that referenced this issue Nov 24, 2020
鈥racters

Currently the compiler treats something like `{{  '{{a}}' }}` as a nested
binding and throws an error, because it doesn't account for quotes
when it looks for binding characters. These changes add a bit of
logic to skip over text inside quotes when parsing.

Fixes angular#39601.
crisbeto added a commit to crisbeto/angular that referenced this issue Nov 24, 2020
鈥racters

Currently the compiler treats something like `{{  '{{a}}' }}` as a nested
binding and throws an error, because it doesn't account for quotes
when it looks for binding characters. These changes add a bit of
logic to skip over text inside quotes when parsing.

Fixes angular#39601.
crisbeto added a commit to crisbeto/angular that referenced this issue Nov 24, 2020
鈥racters

Currently the compiler treats something like `{{  '{{a}}' }}` as a nested
binding and throws an error, because it doesn't account for quotes
when it looks for binding characters. These changes add a bit of
logic to skip over text inside quotes when parsing.

Fixes angular#39601.
crisbeto added a commit to crisbeto/angular that referenced this issue Nov 25, 2020
鈥racters

Currently the compiler treats something like `{{  '{{a}}' }}` as a nested
binding and throws an error, because it doesn't account for quotes
when it looks for binding characters. These changes add a bit of
logic to skip over text inside quotes when parsing.

Fixes angular#39601.
@crisbeto crisbeto removed their assignment Nov 25, 2020
crisbeto added a commit to crisbeto/angular that referenced this issue Nov 28, 2020
鈥racters

Currently the compiler treats something like `{{  '{{a}}' }}` as a nested
binding and throws an error, because it doesn't account for quotes
when it looks for binding characters. These changes add a bit of
logic to skip over text inside quotes when parsing.

Fixes angular#39601.
crisbeto added a commit to crisbeto/angular that referenced this issue Dec 2, 2020
鈥racters

Currently the compiler treats something like `{{  '{{a}}' }}` as a nested
binding and throws an error, because it doesn't account for quotes
when it looks for binding characters. These changes add a bit of
logic to skip over text inside quotes when parsing.

Fixes angular#39601.
crisbeto added a commit to crisbeto/angular that referenced this issue Dec 8, 2020
鈥racters

Currently the compiler treats something like `{{  '{{a}}' }}` as a nested
binding and throws an error, because it doesn't account for quotes
when it looks for binding characters. These changes add a bit of
logic to skip over text inside quotes when parsing.

Fixes angular#39601.
alxhub pushed a commit that referenced this issue Dec 10, 2020
鈥racters (#39826)

Currently the compiler treats something like `{{  '{{a}}' }}` as a nested
binding and throws an error, because it doesn't account for quotes
when it looks for binding characters. These changes add a bit of
logic to skip over text inside quotes when parsing.

Fixes #39601.

PR Close #39826
@alxhub alxhub closed this as completed in dc6d40e Dec 10, 2020
@JoostK
Copy link
Member Author

@JoostK JoostK commented Dec 10, 2020

Reopening this as this wasn't actually addressed in dc6d40e.

@JoostK JoostK reopened this Dec 10, 2020
zarend pushed a commit to zarend/angular that referenced this issue Dec 11, 2020
鈥racters (angular#39826)

Currently the compiler treats something like `{{  '{{a}}' }}` as a nested
binding and throws an error, because it doesn't account for quotes
when it looks for binding characters. These changes add a bit of
logic to skip over text inside quotes when parsing.

Fixes angular#39601.

PR Close angular#39826
crisbeto added a commit to crisbeto/angular that referenced this issue Dec 26, 2020
鈥g in property binding

Currently we check whether a property binding contains an interpolation using a regex so
that we can throw an error. The problem is that the regex doesn't account for quotes
which means that something like `[prop]="'{{ foo }}'"` will be considered an error, even
though it's not actually an interpolation.

These changes build on top of the logic from angular#39826 to account for interpolation
characters inside quotes.

Fixes angular#39601.
@crisbeto crisbeto self-assigned this Dec 26, 2020
twerske pushed a commit to twerske/angular that referenced this issue Jan 5, 2021
鈥racters (angular#39826)

Currently the compiler treats something like `{{  '{{a}}' }}` as a nested
binding and throws an error, because it doesn't account for quotes
when it looks for binding characters. These changes add a bit of
logic to skip over text inside quotes when parsing.

Fixes angular#39601.

PR Close angular#39826
josephperrott pushed a commit that referenced this issue Jan 5, 2021
鈥g in property binding (#40267)

Currently we check whether a property binding contains an interpolation using a regex so
that we can throw an error. The problem is that the regex doesn't account for quotes
which means that something like `[prop]="'{{ foo }}'"` will be considered an error, even
though it's not actually an interpolation.

These changes build on top of the logic from #39826 to account for interpolation
characters inside quotes.

Fixes #39601.

PR Close #40267
@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Feb 5, 2021

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 5, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
4 participants