How to style a dynamically populated string - an interpolated string, in Angular?

Question

I am using Angular - THE JS ANGULAR FRAMEWORK - and my code is something like this -

<p> Server ID: {{ serverID }} server status: {{ serverStatus }}</p>

which outputs something like this - Server ID: 15 server status: offline

What is the best way to style ONLY the interpolated strings
either {{ serverID }} or {{ serverStatus }} - only selecting them,
without affecting the rest of the paragraph?

I tried wrapping the interpolated string with some HTML tags -

<p> Server ID: <span>{{ serverID }}</span> server status: <div>{{ serverStatus }}</div></p>

where of course this HTML element could be anything
- <div>, <span> another <p>
I just used div and span as an example, I could also add a class if I wanted to... and this works.

Now even if I use [ngStyle] or [ngClass] - I will still have to use some HTML element,
there doesn't seem to be a way around it... which is fine.

But I would like to know if there are alternative ways to select the
interpolated string in Agular - what is best / common practice & most effective ?

To be abundantly clear - I am asking how to select the interpolated tags - not how to write css
so no need for css code samples, and maybe please don't just repeat the exact same example
that I already listed, and pretend is a completely new solution that you just came up with
- you can just say the 'span method', or wrapping in a HTML tag seems to be the best way, something like this... Thank you.

Ивайло Казанджиев · Accepted Answer · 2022-06-16 15:17:08Z

1

Your solution - listed in the details - the span method or any html tag, seems to be the best one

answered Jun 16, 2022 at 15:17

Ивайло Казанджиев

262 bronze badges

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

Comments

Talon · Accepted Answer · 2022-06-16 08:15:33Z

1

html

<p>Server ID: <span>{{ serverID }}</span> server status: <span>{{ serverStatus }}</span></p>

css

p {
    span {
        font-weight: bold;
    }
}

Try this, of course you can add a class to span if you prefer

answered Jun 16, 2022 at 8:15

Talon

3711 silver badge11 bronze badges

Comments

ThePeasantLife · Accepted Answer · 2022-06-16 08:33:49Z

0

p's and span's.

In your example, you have the incorrect html. You don't have a starting span. Something like this should suffice

p { color: red; }
p span { color: blue; }

<p> 
  Server ID: <span>1234</span> 
  server status: <span>Open</span>
</p>

answered Jun 16, 2022 at 8:33

ThePeasantLife

666 bronze badges

Collectives™ on Stack Overflow

How to style a dynamically populated string - an interpolated string, in Angular?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related