November 17, 2021 09:02 pm GMT
Using
Add ellipsis as conditional
Original Link: https://dev.to/riapacheco/angular-slice-and-ngif-for-conditional-ellipsis-tooltip-on-data-2d4h
Angular: Slice and *ngIf for Conditional Ellipsis / Tooltip on Data
Problem: Conditional Ellipsis without CSS
I want to add an ellipsis to data that's brought in from a service without having to use CSS' text-overflow: ellipsis
feature, since it's unreliable and could break overtime if not monitored during refactoring.
Using Slice Pipe
Determine character max overflow limit
- Determine max overflow by number of characters (instead of max-width)
- Example: max overflow characters 20 (inclusive, aka 20 or more)
- I use
slice
pipe where you add thestart
andend
of the slice to the interpolated string
<!--Template--><a *ngFor="let item of items"> {{ item.name | slice: 0 : 20 }}</a>
Add ellipsis as conditional span
- Conditional span is based on data's
length
<!--Template--><a *ngFor="let item of items"> {{ item.name | slice:0:20 }}<span *ngIf="item.name.length >= 20">...</span></a>
If Problems with String vs. Object
Sometimes typescript or certain db packages make this harder by making it so strings
are but aren't considered strings. Solve this programmatically, by saving a new boolean
value, when the data is either stored or updated:
// ComponentonSave(event: any, item: Iitem): void { if (String(this.item.name).length >= 20) { this.item.maxChar == true; } if (event) { this.dataService.addItem(this.item); }}
Thus, can then apply in template as
<!--Template--><span *ngIf="item.maxChar == true">...</span>
Show Tooltip Conditionally
I want the tooltip to appear when this maxChar
is true; but to remove itself from the DOM when no longer hovering over the item.
<!--Template--><a *ngFor="let item of items" (mouseover)="(item.name.length >= 20) ? onHover($event, item.name) : ''" (mouseout)="showsTooltip ? (showsTooltip = !showsTooltip) : ''"> {{ item.name | slice:0:20 }}<span *ngIf="item.name.length >= 20">...</span><a><!--Tooltip--><div *ngIf="showsTooltip" [style.top]="tooltipTopY" [style.left]="tooltipLeftX" class="tooltip" > {{ tooltipText }}</div>
Component
Catches coordinates of event and binds them
export class SomeComponent implements OnInit { // Properties showsTooltip = false; // show or not tooltipText = ''; // text to be binded tooltipTopY!: any; tooltipLeftX!: any; // Methods onHover(event: any, itemName: string): void { this.tooltipText = itemName; if (event) { this.showsTooltip = true; this.tooltipTopY = event.clientY + 'px'; this.tooltipLeftX = event.clientX + 'px'; } }}
Original Link: https://dev.to/riapacheco/angular-slice-and-ngif-for-conditional-ellipsis-tooltip-on-data-2d4h
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To