How can I apply bold styling to my interpolation binding in Angular while working on my HTML code?

Below is the code snippet where I am attempting to highlight profile.userId:

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

I want the displayed output on the page to show as "User (username), last logged in on MM/dd/yyy h:mma" with the username in bold. However, I am unsure about how to apply styling to the profile.userId within a binding?

htmlcssangular

Answer №1

If you want to separate the text field, consider breaking up the binding. It may be necessary to simplify the pipes in order for this technique to work correctly. To achieve this, try dividing the text portion like so:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Techniques for extracting both the previous and current selections from a dropdown menu in Angular 2

How can I retrieve the previous value of a dropdown before selection using the OnChange event? <select class="form-control selectpicker selector" name="selectedQuestion1" [ngModel]="selectedQuestion1" (Onchange)="filterSecurityQuestions($event.t ...

angulartypescriptdrop-down-menu

How can I simulate mouse position in a UIWebView?

Can the mouse position (x,y) for HTML-5 elements on a UIWebView be programmatically set using stringByExecutingJavascript in order to trigger hover, mouse over, and other interactions? ...

javascriptioshtmluiwebview

What is the best way to ensure consistent display of a bootstrap 4 card structure on both mobile and desktop devices?

I'm attempting to make the bootstrap card look the same on mobile as it does on desktop, but I haven't been able to find a solution online. No snippets have been helpful! Below is a comparison of the appearance of the bootstrap v4 card: Desktop ...

htmlcssbootstrap-4

Efficiently managing desktop and mobile pages while implementing lazy loading in Angular

I am aiming to differentiate the desktop and mobile pages. The rationale is that the user experience flow for the desktop page involves "scrolling to section", while for the mobile page it entails "navigating to the next section." The issue at hand: Desk ...

javascriptangulartypescriptangular2-routingangular-routing

What is an alternative method for creating a horizontal line without the need for the <hr> tag?

Is there a way to create a slim horizontal line without using the <hr> tag ? This is what I attempted: .horizontal-line{ border-top: 1px solid #9E9E9E; border-bottom: 1px solid #9E9E9E; } While it does function, I am hoping for a thinner line. ...

javascripthtmlcsstagsvisual-web-developer-2010

Excessive content causing an overflow within the table and extending the length of

My page is currently overflowing its length compared to the main table, and I want it to be as long as the table. The issue seems to be related to the code snippet below: thumbnail { padding: 0; background-color: transparent; transition: transfo ...

htmlcssoverflow

Updating the DOM with an EventListener in Angular 5 is not functioning properly

Situation : Utilizing an Angular PWA for communication with an iOS native app via WKWebview. Implementing messageHandlers to facilitate data sharing between TypeScript and Swift logic code. Issue : Employing addEventListener to monitor a specific event on ...

javascriptangulartypescriptwkwebviewaddeventlistener

Accessing the total number of items from a service in Angular

I am facing an issue with my cart-service and 2 components. The product-list component is responsible for displaying the products along with a buy button. However, the top-bar component seems to have trouble displaying the count when I try to directly call ...

angular

Customizing the appearance of a radio button within a form

I need assistance with styling a form that contains a radio button. I'm looking to customize the appearance of the radio button by adding a background image and also changing the default view of the check image. Additionally, I want the form to be cen ...

csshtmlformsradio-button

The spacing between images on mobile devices is excessive

My images on mobile have too much space between them: mobile version They appear fine in Dev Tools: dev tools version This is my HTML: <div class="container-fluid"> <!-- <br> --> <div class="row"> ...

htmlcssmobilebootstrap-4mobile-development

What is the best way to retrieve the response from an Observable/http/async call in Angular?

My service returns an observable that makes an http request to my server and receives data. However, I am consistently getting undefined when trying to use this data. What could be causing this issue? Service: @Injectable() export class EventService { ...

javascriptangularasynchronoustypescriptobservable

What is the best way to utilize imported classes, functions, and variables within an Angular 2 template?

I've come up with a solution for incorporating static content into a template, but I'm unsure if it's the best approach. I would like to know if there is an official or more efficient method of achieving this. Here's an example showcas ...

angulartypescriptangular2-template

Shifting text upwards within a document

I'm struggling with CSS and bootstrap as I have limited knowledge in this area. I have multiple divs on a page that I want to align based on our old website design. The problem I'm facing is that one div is larger on the right, causing a lot of ...

htmlcsstextbootstrap-5whitespace

Mystery of the Unresponsive MD Ripple Button

While working on creating a CSS button, I wanted to incorporate the Material Design ripple or wave effect into it. I came across a simple script on codepen that works well by adding the class "ripple" to various elements such as divs, buttons, images, and ...

javascriptjqueryhtmlcssmaterial-design

Can the orientation of the card reveal be customized in Materializecss?

Exploring the card-reveal feature in the materializecss framework on this page: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ with official documentation located at: In my project, I've rearranged the <div class="card-content"> to display ...

javascriptcssmaterialize

Employing the "div" element to target in CSS styling

I'm dealing with a document structure that is consistent across multiple pages. HTML: <ul> <li> <div> <img src="" /> </div> </li> </ul> Presently, there is a border aroun ...

htmlcss

The clash between Traditional JavaScript and jQuery

As I pored over a textbook, I found myself stumped by an example problem. Here is the HTML code in question: $(function(){ $("#checkAll").click(function(){ $("[name=items]:checkbox").attr("checked", true); console.log("check all"); }); $("#checkNo").cl ...

javascriptjqueryhtml

Arranging elements on a webpage using CSS grid placements

Currently experimenting with css grid, envisioning a scenario where I have a 2x2 grid layout. When there are 4 child elements present, they would form 2 rows of 2 elements each. My challenge is when dealing with an odd number of children, I aim to avoid al ...

htmlcsscss-grid

Enhanced jQuery Embed Code validation for user input using a textarea

Currently, I am developing a website that allows users to input embed codes from popular platforms such as Twitter, YouTube, Instagram, Facebook, and so on. The embed code undergoes validation checks and is saved if it meets the criteria. However, when us ...

javascriptjqueryhtmlvalidationembed

What is the method for displaying map tooltips by default rather than on mouseover?

Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover ov ...

javascriptjqueryhtmlcssgoogle-maps