How to prevent printing space after HTML element in Angular?

Issue

I want to output a formated name string with lastname in bold font. Like this:

LASTNAME, Firstname

In Angular I would typically doing this in the HTML template:

<strong>{{ lastname | uppercase }}</strong>, {{ firstname }}

But because of the strong-tag it will auto-insert a "space" after the tag and results in:

LASTNAME , Firstname

So how can I prevent that the additional space is printed in the HTML template?

Solution

Actually I am not able to replicate the issue, please find below the CSS to get rid of any extra space. If not please share back the stackblitz with the issue replicated, you need to do inspect element on that particular strong tag and check the computed tab, where that extra space is added

html

<div>
  <strong>{{ lastname | uppercase }}</strong>
  <span>, {{ firstname }}</span>
</div>

ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  imports: [CommonModule],
  templateUrl: './main.html',
  standalone: true,
})
export class App {
  name = 'Angular';

  lastname = 'Lastname';
  firstname = 'Firstname';
}

bootstrapApplication(App);

stackblitz

Answered By - Naren Murali