如何在 textarea 中格式化或设置文本样式？

Question

I need to create a textarea to display data, it should looks like this(expected behavior):

This is my current UI (current behavior):

This is my HTML:

<textarea disabled class="bgYellow" rows="6">{{text1}}</textarea>

This is my Typescript Code:

  invoiceNo = '1000799758-00';
  status = 'Spark';
  palletLP = '';
  needAudit = 'NO';

  text1 = 'Invoice No.:  ' + this.invoiceNo + '\n' +
          'Status:  ' + this.status + '\n' +
          'Pallet LP:  ' + this.palletLP + '\n' +
          'Audit?:  ' + this.needAudit;

Can any one tell me how Can I make this Invoice No. Label align to left, data align to right. It is like Bootstrap grid style, but I am not sure how to do it.

Answer 1

Use the single backtick :

 text1 = `
Invoice No, : 1
Status      : 2
Pallet LP   : 3
...         : 4`
}

https://stackblitz.com/edit/angular-aewrtv?file=src/app/app.component.ts

Answer 2

change your code into

text1 =  ' Invoice No.: ' + this.invoiceNo + '\n' +
      '      Status: ' + this.status + '\n' +
      '   Pallet LP: ' + this.palletLP + '\n' +
      '      Audit?: ' + this.needAudit;

And then change the text area to use a terminal (fixed width font) using css will hopefully fix the problem.

Changing The Font Of Text Area