Question 363306 in Html Question posted in
Some basic documentation can be found here.

Html – How to emphasize strings that are dynamic in Typescript

I am trying to emphasize a particular part of a text in Angular but only the dynamic part of the string. I have tried adding html elements in various places but that did not help. I am hoping I do not need to create a whole other component just to get the text make it bold an push it down to the other component that actually reads it.

In the HTML file:

<button mat-icon-button (click)="openThatThing()" matTooltip="Do the thing">
      <mat-icon>some-icon</mat-icon>
</button>

In the TS file:

openThatThing(): void {

this.action = thing.that.needs.done;
const messageBody = "Do this to "" + this.current.name + ""?";
const thisThing = this.dialog.open(ActionDialogComponent, {
  width: '400px',
  disableClose: true,
  hasBackdrop: false,
  panelClass: ["something", "mat-typography"],
  data: {title: "Confirm Thing", msgBody: messageBody, primaryAction: "Action"}
});

}

I would like this.current.name to be bold. I can’t seem to find documentation or other stackoverflow articles on this particular matter. It is possible that I am not asking the question properly in the search engines.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I focused on the ActionDialogueComponent and from there I realized I could split out this.current.name from the string. Manipulate it however I wanted and stick it all back together in the aforementioned component's HTML file.


  2. 0

    You can style your text with HTML, for that you need to inject your HTML in ActionDialogComponent:

    <p [innerHtml]="data.msgBody"></p>

    when you pass your msgBody you need to sanitize the HTML for security reasons:

    constructor(private sanitizer: DomSanitizer) {}

openThatThing(): void {
    const messageBody = this.sanitizer.bypassSecurityTrustHtml("Do this to <b>"+ this.current.name +"</b>?");
   // rest of the code
}

    if you know what this.current.name can be, you can trust the HTML with no problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search