Angular 5 - Format text in Typescript?

Question

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

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

That finally displays my content, thanks. But I'm getting the unformatted text <b>This</b> should be bold. How can I format this properly? — FiringBlanks
– FiringBlanks, Commented Jan 2, 2018 at 9:22
Actually, do you know how I would do this inside an *ngFor loop? I edited my question above. — FiringBlanks
– FiringBlanks, Commented Jan 2, 2018 at 10:34

David · Accepted Answer · 2018-01-02 10:40:26Z

3

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>

answered Jan 2, 2018 at 10:40

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FiringBlanks Over a year ago

Could you also add some inline CSS into this? I modified my question again :)

David Over a year ago

Sorry I don't know much about css. Anyway, people here will help you if you are stuck with something, but not do everything for you. Especially with css, where "nice" is not an accurate requirement (I could change these buttons to bright pink oval shapes, but you light not find it 'nice')

FiringBlanks · Accepted Answer · 2018-01-02 10:43:19Z

0

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

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

edited Jan 2, 2018 at 10:43

answered Jan 2, 2018 at 10:24

FiringBlanks

2,0944 gold badges34 silver badges51 bronze badges

Collectives™ on Stack Overflow

Angular 5 - Format text in Typescript?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related