lentschi / ngx-ellipsis

Multiline text with ellipsis for angular 9+
MIT License
96 stars 22 forks source link

Missing "exportAs" #18

Closed quetzalcoatl closed 5 years ago

quetzalcoatl commented 5 years ago

I've just tried using a typical binding:

<span #me ellipsis [ellipsis-content]="foo" #ell="ellipsis" (click)="inspectMe(me,ell)">

and got following error in the result:

There is no directive with "exportAs" set to "ellipsis"

Please consider adding this attribute to the ellipsis directive, or else its users will not be able to bind names to it via standard angular name binding:

<element ellipsis #ell="ellipsis" ...>...</element>
quetzalcoatl commented 5 years ago

Fix is probably as simple as changing:

@Directive({
  selector: '[ellipsis]'
})

to

@Directive({
  selector: '[ellipsis]',
  exportAs: 'ngxEllipsis'    // or just ellipsis, or whatever name you would like to have there
})

in /src/lib/directives/ellipsis.directive.ts

lentschi commented 5 years ago

@quetzalcoatl I added support for that in ngx-ellipsis@2.0.4 just as you requested.

However a fair warning - I hadn't planned for the API to be publicly accessed so far (though it does make sense, I agree). The only things I tested so far:

// applying the ellipsis manually 
// (you probably want to use the brand new ellipsis-resize-detection="manual" 
// option with that - see README):
this.ell.applyEllipsis();

// changing the content would also work, but you'd
// have to call ngOnChanges manually, so I accually recommend to
// stick with using the input instead. (I know, I could
// transform ellipsisContent into a setter, but I don't want to risk that change right now):
this.ell.ellipsisContent = 'new content';
this.ell.ngOnChanges();

What were you trying to accomplish by accessing the directive directly?

quetzalcoatl commented 5 years ago

Hello! Thank you for looking into this!

What were you trying to accomplish by accessing the directive directly?

Actually, a very simple thing. Two actually.

1) I wanted to get the original, untrimmed text

I use [ellipsis-content] with some more or less complex expressions, totally view-related, and I wanted to follow single-definition-rule and have them stated in one place only.

Instead of writing:

<tag ellipsis [ellipsis-content]="(some long expr || other || ...)" (click)="handler(1,2,(some long expr || other || ...))">

I thought of writing it as:

<tag ellipsis #e="?ellipsis?" [ellipsis-content]="(some long expr || other || ...)" (click)="handler(1,2,e.ellipsisContent)"

and of course the ?ellipsis? depends on exportAs.

2) I wanted to detect when the text ellipsis is active

That's another topic, it's easy to check when I have the original text at hand, I can just compare it with the possibly-truncated output. However, it'd be great if the directive could be somehow queried for that.

1+2 are needed to show .. tooltips. I have a requirement for my system, that when a text overflows and is trimmed, it should show "..." and then when the text is hovered-upon, a tooltip with full text should show up. As odd/dangerous it sounds (show all works of the Shakespeare as a tooltip..), well.. sometimes disputing the requirements is not possible.