Angular - innerHTML attribute - delay of one part of the innerHTML

Question

I am using [innerHTML] to display a string. A string is made from two properties of the same object. The object comes from from passing a list of objects(from Observable from NgRx) to *ngFor. Also, the pipe is used to decide what should be in [innerHTML].

Sometimes, part of the html which comes from innerHTML is rendering slower than the rest - it is delayed.

So, let's say, innerHTML after pipe is <strong><em>MMY</em></strong> superObj123

so I should see MMY superObj123,

but Sometimes MMY is rendered a second later after superObj123.

What can be a cause of this behaviour?

Can it be that rendering html from the innerHTML take more time than just rendering a string and because of that a string is sometimes rendered first?

HTML:

<tr *ngFor="let obj of objts$ | async">
    <td *ngIf="someVar" [innerHTML]="obj | objPipe"></td>
</tr>

Component:

@select(['objts'])
public objts$: Observable<objtsInterface>;

Pipe:

@Pipe({
  name: 'objPipe',
})
export class ObjPipe implements PipeTransform {
  public transform(value: any): any {
    if (!value) return '';
    if (!value.property1) return value.otherProperty;
    return `<strong><em>${value.property1}</em></strong> ${value.otherProperty}`;
  }
}

This bug only occurs on an actual server, not locally and I've only seen it when going to the app's tab with this element just after log in into my app.

Answer 1

One of my friends suggested, that I should create a mini-component for this, because Pipes are not for manipulating a DOM, but rather a value.
I haven't checked yet if this solution (mini-component instead of a pipe) works better.