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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ivy): Add `style="{{exp}}"` based interpolation #34202

Draft
wants to merge 1 commit into
base: master
from

Conversation

@mhevery
Copy link
Member

mhevery commented Dec 3, 2019

Fixes #34056

Add support for interpolation in styles as shown:

<div style="color: {{exp1}}; width: {{exp2}};">

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.io application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@googlebot googlebot added the cla: yes label Dec 3, 2019
})
class Cmp {
self = 'content: "self"';
one = 'one';

This comment has been minimized.

Copy link
@pkozlowski-opensource

pkozlowski-opensource Dec 3, 2019

Member

super nit: using actual number (ex. one = 1) would make it easier to "visually parse" asserts (a1b2c vs. aonebtwoc

This comment has been minimized.

Copy link
@mhevery

mhevery Dec 4, 2019

Author Member

good idea, changed.

@mhevery mhevery added the comp: core label Dec 3, 2019
@ngbot ngbot bot added this to the needsTriage milestone Dec 3, 2019
@mhevery mhevery force-pushed the mhevery:style_interpolation branch from 48ccac5 to 5b9fb25 Dec 4, 2019
mhevery added a commit to mhevery/angular that referenced this pull request Dec 4, 2019
Fixes angular#34202

Add support for interpolation in styles as shown:
```
<div style="color: {{exp1}}; width: {{exp2}};">
```
mhevery added a commit to mhevery/angular that referenced this pull request Dec 4, 2019
Fixes angular#34202

Add support for interpolation in styles as shown:
```
<div style="color: {{exp1}}; width: {{exp2}};">
```
@mhevery mhevery force-pushed the mhevery:style_interpolation branch from 5b9fb25 to 847202f Dec 4, 2019
Fixes #34202

Add support for interpolation in styles as shown:
```
<div style="color: {{exp1}}; width: {{exp2}};">
```
@mhevery mhevery force-pushed the mhevery:style_interpolation branch from 847202f to f40e0b5 Dec 4, 2019
@Component({
selector: 'my-component',
template: \`
<div style="p1:{{p1}};"></div>

This comment has been minimized.

Copy link
@sod

sod Dec 6, 2019

Contributor

Does this reintroduce the trap as described in #8009 (element.style = 'color: red' doesn't work in safari), or does this write the properties individually into the style object?

This comment has been minimized.

Copy link
@sod

sod Dec 9, 2019

Contributor

Hm, from https://hackmd.io/@5zDGNGArSxiHhgvxRGrg-g/rycZk3N5S it reads like it uses style.cssText, that works cross browser, nice 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.