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

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.

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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>