CODEWITHSUNDEEP
angulartypescriptmarkup
FiringBlanks
FiringBlanks

Reputation: 2084

Angular 5 - Format text in Typescript?

I'm trying to add markup from my Typescript file. Here's what I'm trying:

textString = `<b>This</b> should be bold`;
parser = new DOMParser();
parsedHTML = this.parser.parseFromString(this.textString, 'text/html');

and I'm spitting it back out with {{parsedHTML}} in HTML side but all I'm getting back is [object HTMLDocument].

How would I display a formatted string in an *ngFor loop?

Typescript

textString = `<b>This</b> should be bold`;

  planBundle = [
    'One month ($4.99)',
    `One year ($47.90 - 20% Discount)`,
    this.textString
  ];

HTML

<div>
  <mat-radio-group layout="vertical" [(ngModel)]="selectedPlan">
    <mat-radio-button *ngFor="let plan of planBundle" [value]="plan" style="display: block; margin-top: 8px;">
      {{plan}}
    </mat-radio-button>
  </mat-radio-group>
</div>

Current Output

enter image description here

Could you add inline CSS into this? It doesn't seem to be showing up. Here's what I'm trying:

Typescript

 planYearTextString = `One year payment <s>($59.88)</s> <b>$47.90</b> <span style="color: green;">(Save 20%)</span>`;

  planBundle = [
    'One month ($4.99)',
    this.planYearTextString
  ];

Output

enter image description here

Upvotes: 0

Views: 12807

Answers (2)

FiringBlanks
FiringBlanks

Reputation: 2084

As per David's comment, the solution to get formatted text into the template is:

<div [innerHtml]="textString"></div>

Upvotes: 0

David
David

Reputation: 34425

Same principle, you need to use innerHtml

<div>
  <mat-radio-group layout="vertical" [(ngModel)]="selectedPlan">
    <mat-radio-button *ngFor="let plan of planBundle" [value]="plan" 
style="display: block; margin-top: 8px;">
     <span [innerHtml]="plan"></span>
    </mat-radio-button>
  </mat-radio-group>
</div>

Upvotes: 3

Related Questions