CODEWITHSUNDEEP
htmlcssangular
tritheforce
tritheforce

Reputation: 5

How do I make my interpolation binding bold in my HTML using Angular?

I have the following code where I need to make the profile.userId bold:

<p class="profile__last-login" *ngIf="profile.lastLoggedIn">
    {{'intranet.profile.dashboard.lastLoggedIn' | messageBundle: profile.userId + ',' + (profile.lastLoggedIn | date: 'MM/dd/yyy h:mma') }}
</p>

When displayed on the page, it should say "User (username), last logged in on MM/dd/yyy h:mma" with the username in bold, but I'm not sure how to style the profile.userId within a binding?

Upvotes: 0

Views: 567

Answers (1)

BobtheMagicMoose
BobtheMagicMoose

Reputation: 2429

You could split the text field. You do not need to keep the binding all together. However, I'm not quite sure what's happening with your pipes so this may not work. My guess is that you should simplify your pipes so that you can break up the text portion as below:

<p class="profile__last-login" *ngIf="profile.lastLoggedIn">
    <b>{{'intranet.profile.dashboard.lastLoggedIn' | messageBundle: profile.userId }} </b>
    , {{ (profile.lastLoggedIn | date: 'MM/dd/yyy h:mma') }}
</p>

Upvotes: 1

Related Questions