get text from DOM element and insert it to 'title' typescript

Question

I am trying to write a directive in angular2 + typescript that makes tooltip to show only when ellipsis is active (show complete text pop up only when its not fully displayed, and ends with "..." ). I found this answer in stackoverflow:

show the tooltip only when ellipsis is active

Now I'm trying to translate this Jquery function:

To typescript. so far this is what I got:

import { Directive, ElementRef } from '@angular/core';

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

export class IsEllipsisActiveDirective {
constructor(el: ElementRef) {
    if (el.nativeElement.classList.contains('className')) {
         if (this.isEllipsisActive(el.nativeElement)) {
             //el.nativeElement.attributes("title",el.nativeElement.text());
         }
    }
}
 isEllipsisActive(e: any) {
return (e.offsetWidth < e.scrollWidth);
  }
}

I can't figure out how to get the text from the element and pass it on to the element's title using typescript. any ideas?

Thanks!

score 0 · Answer 1 · edited May 23 '17 at 11:54

It seems that using ElementRef for direct DOM access isn't safe according to Angular2 doc. You can use Renderer with ElementRef to get/set a DOM value this way:

import {Renderer, ElementRef} from '@angular/core;
...
export class IsEllipsisActiveDirective {
constructor {
  private _renderer: Renderer,
  private _el: ElementRef
} (
  //get value
  this._el.nativeElement.querySelector('div/p/whatever...')
  //set value
  this._renderer(_el.nativeElement.querySelector(tag), 'innerHTML', 'Foo')
)

Hope this helps. Credit goes to these Stack Overflow answers:

get text from DOM element and insert it to 'title' typescript

1 Answers1