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.
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
Your solution - listed in the details - the span method or any html tag, seems to be the best one
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>