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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

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
@crisbeto
Labels
area: compiler Issues related to `ngc`, Angular's template compiler compiler: parser P4 A relatively minor issue that is not relevant to core functions state: confirmed state: has PR type: bug/fix
Milestone
Backlog

Comments

@JoostK
Copy link
Member

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 area: compiler Issues related to `ngc`, Angular's template compiler state: confirmed P4 A relatively minor issue that is not relevant to core functions labels Nov 7, 2020
@ngbot ngbot bot modified the milestone: Backlog Nov 7, 2020
@ttma1046
Copy link

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

this.interpolation = `${whichyouwant}`

@basherr
Copy link
Contributor

basherr commented Nov 11, 2020 •
edited
Loading

@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 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
@crisbeto
fix(compiler): handle strings inside bindings that contain binding ch…
436aaaf 
…aracters

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 mentioned this issue Nov 24, 2020
Closed
crisbeto added a commit to crisbeto/angular that referenced this issue Nov 24, 2020
@crisbeto
fix(compiler): handle strings inside bindings that contain binding ch…
1e58121 
…aracters

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
@crisbeto
fix(compiler): handle strings inside bindings that contain binding ch…
13f72e3 
…aracters

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
@crisbeto
fix(compiler): handle strings inside bindings that contain binding ch…
1816113 
…aracters

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
@crisbeto
fix(compiler): handle strings inside bindings that contain binding ch…
332ba69 
…aracters

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
@crisbeto
fix(compiler): handle strings inside bindings that contain binding ch…
86bc6b3 
…aracters

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
@crisbeto
fix(compiler): handle strings inside bindings that contain binding ch…
c51bb46 
…aracters

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
@crisbeto @alxhub
fix(compiler): handle strings inside bindings that contain binding ch…
f5aab2b 
…aracters (#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 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
@crisbeto @zarend
fix(compiler): handle strings inside bindings that contain binding ch…
d226f99 
…aracters (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
@crisbeto
fix(compiler): don't report parse error for interpolation inside stri…
63c1d8f 
…ng 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 mentioned this issue Dec 26, 2020
Closed
@crisbeto crisbeto self-assigned this Dec 26, 2020
josephperrott pushed a commit that referenced this issue Jan 5, 2021
@crisbeto @josephperrott
fix(compiler): don't report parse error for interpolation inside stri…
7977509 
…ng 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

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.
Assignees

@crisbeto crisbeto

Labels
area: compiler Issues related to `ngc`, Angular's template compiler compiler: parser P4 A relatively minor issue that is not relevant to core functions state: confirmed state: has PR type: bug/fix
Projects
None yet
Milestone
Backlog
4 participants
@JoostK @ttma1046 @crisbeto @basherr