Angular: Slice and *ngIf for Conditional Ellipsis / Tooltip on Data
source link: https://dev.to/riapacheco/angular-slice-and-ngif-for-conditional-ellipsis-tooltip-on-data-2d4h
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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:
// Component
onSave(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';
}
}
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK