CODEWITHSUNDEEP
htmlangulartext
Vlad Danila
Vlad Danila

Reputation: 1382

How would I change displayed text in HTML Angular?

I do have 6 tabs displayed in my Angular template:

 <tabset class="tabs">
      <tab *ngFor="let option of options" [heading]="option.type" >
      <!-- tab content -->
 </tab>

The heading of each tab is read in a quite ugly format, from a JSON data( the six values are : NEW, SUMMARY, CURRENT, EXPIRED, ARTICLE, EXTRA).

I would like to be able to pretty print these strings. For example, to change:

'EXPIRED' -> 'Expired Section'

or

'SUMMARY' -> 'Summary Calculation'

How can I do that?

Upvotes: 0

Views: 102

Answers (2)

Daniel Liverant
Daniel Liverant

Reputation: 11

I would suggest to create an object with your mapping

In Your TS: 

const mapping = {
       'EXPIRED': 'Expired Section',
       'SUMMARY':'Summary Calculation'
};

In your HTML:

 <tabset class="tabs">
      <tab *ngFor="let option of options" [heading]="mapping[option.type]" >
      <!-- tab content -->
 </tab>

Upvotes: 0

Joniras
Joniras

Reputation: 1336

Create a function that does your trick:

public myFormats = {
   EXPIRED: 'Expired Section',
   ....
}

public getMyFormat(type){
   return this.myFormats[type];
}

<tabset class="tabs">
      <tab *ngFor="let option of options" [heading]="getMyFormat(option.type)" >
      <!-- tab content -->
 </tab>

Credits to mr.void

Upvotes: 1

Related Questions