Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 17, 2021 09:02 pm GMT

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 the start and end 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:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To