How to style just a part of a text from a label of a button in angular-CodePudding

I have a button that has in label 4 lines of text, coming from some objects. How can I change the fontsize of the last 2.

 <button 
              [ngStyle]="{'background-color': line!=null && line!=undefined &&
                                              line.status_color!=undefined &&
                                              line.status_color!=null ?
                                              line.status_color : '#000000',
                          'color': line.font_color!='' ? line.font_color : null }"
              [ngClass]="{'long-status-description':line.status_description.length > 15}"
              type="text" pButton (click)="selectLine(line.prod_line)"
              label="{{line.prod_line}} {{line.start_time_hour}} {{line.status_code}} {{line.status_description}}"
      ></button>

Thanks!

CodePudding user response：

Instead of passing the value to label, you can try it this way (Inline styling for demo purpose, please move it to your scss file)

  <button>
    <span>{{line.prod_line}}</span>
    <span>{{line.start_time_hour}}</span>
    <span style="color:red; font-size: 12px;">{{line.status_code}}</span>
    <span style="color:green; font-size: 15px;">{{line.status_description}}</span>
  </button>

CodePudding user response：

Put each line of text into separate DOM elements. You can then use the structural pseudo-class last-child and nth-last-child(2) on the parent's class to target the last and second last children.