Use Angular interpolated string in CSS content property

Question

I am using the CSS content property content: attr(myValue); in an Angular 7 component's .css file

&::before {
    content: attr(myValue);
    position: absolute;
    left: 2em;
    font-weight: bold;
    top: 1em;
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: .785rem;
}

which is connected to a string value in the component's .html file like this:

      <div class="timeline-item" myValue='Can I use an interpolated value here instead?'>
        ...
      </div>

I want to insert an interpolated string value in the myValue in the .html. I have tried the various bind techniques outlined in the official Angular template syntax guide without any success.

Is there a way to insert the interpolated value in myValue? In other words, can I do the equivalent of this:

      <div class="timeline-item" myValue='{{myInterpolatedString}}'>
        ...
      </div>

currently not on a computer but i think you should use " instead of '. then it could work i think — Isitar
– Isitar, Commented Mar 16, 2019 at 22:16
Thanks @Isitar. Looks like that worked: attr.myValue="{{observation.observationDateTime}}. I am sure I had tried that because it is included in the Angular guidance I quoted in my question — Winthorpe
– Winthorpe, Commented Mar 16, 2019 at 22:25
@Isitar - if you add it as answer I will mark is as the accepted answer - when you get to a computer... :) — Winthorpe
– Winthorpe, Commented Mar 16, 2019 at 22:27

Isitar · Accepted Answer · 2019-03-16 22:56:38Z

4

You cannot bind an unknown property like myValue on a div to a value, the runtime is giving you an error

Error: Template parse errors:
Can't bind to 'myValue' since it isn't a known property of 'div'. ("
<div class="timeline-item" [ERROR ->]myValue="{{'something'}}">
"): ng:///AppModule/AppComponent.html@4:31

You have to use attr.myValue instead. It is possible to use single quotes ' aswell as double-quotes ".

attr.myValue="{{myBoundValue}}"
attr.myValue='{{myBoundValue}}'

You could ommit the curly braces by using this syntax

[attr.myValue]="myBoundValue"

answered Mar 16, 2019 at 22:56

Isitar

1,4691 gold badge17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use Angular interpolated string in CSS content property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related