Angular mat-button-toggle-group limit number of displayed characters and add hint-CodePudding

Is is possible to limit the number of characters of the value displayed on the mat-button-toggle elements from a mat-button-toggle-group? The component.html file:

...
<mat-button-toggle-group #group="matButtonToggleGroup" [value] = "selectedValue">
 <mat-button-toggle  *ngFor="let item of toggleOptions;" (change)="onChange($event)" [value]="item">{{item}}</mat-button-toggle>
</mat-button-toggle-group>
...

The texts on the mat-button can be very long, I would like to limit them to 10 characters and show the full text as hint. How can this be realized? The component.ts file:

...
  toggleOptions: Array<String> = ["Option 12345678900987654321", "Option 55"];
...

CodePudding user response：

Create a method in component to truncate the string if length exceed 10 and use mat tool tip to show hint on hover.Show the code will be. Ts

 truncateVal(val:string){
    return val?.length > 10 ? val.substring(0,10) '...' : val;
  }

HTML

<mat-button-toggle-group #group="matButtonToggleGroup" [value]="selectedValue">
  <mat-button-toggle
    [matTooltip]="item"
    *ngFor="let item of toggleOptions"
    (change)="onChange($event)"
    [value]="item"
    >{{ truncateVal(item) }}</mat-button-toggle
  >
</mat-button-toggle-group>

Demo

CodePudding user response：

you can write like this for mat-button-toggle:

button {
    height: 21px;
    max-width: 10ch;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

<button>Hello World!</button>