Text Overflow hidden with 3dot show content in Auto Tooltip or Title in Angular

Steps:

1. Create one sample application in Angular

2. Generate Components where we need to apply ex: ElipisyfyDemo

3. Generate Directive ex: ng g directive Directives/appEllipsifyMe

Directive code like below:

import {

  Directive, ElementRef, Renderer2,

  HostListener, AfterViewInit }

  from '@angular/core';

@Directive({

selector: '[appEllipsifyMe]'

})

export class EllipsifyMeDirective implements AfterViewInit {

  domElement: any;

constructor(private elementRef: ElementRef,

            private renderer: Renderer2) {

      this.domElement = this.elementRef.nativeElement;

      this.renderer.setProperty(this.domElement.style, 'text-overflow', 'ellipsis');

      this.renderer.setProperty(this.domElement.style, 'overflow', 'hidden');

      this.renderer.setProperty(this.domElement.style, 'white-space', 'nowrap');

    }

ngAfterViewInit(): void {

      this.renderer.setProperty(this.domElement, 'scrollTop', 1);

      //after view init setToolTip function will call based size it will apply.

      this.setToolTip();

   }

/// HostListener will listen whenever UI Resize ex: Minimize or maximize

@HostListener('window:resize', ['$event.target'])

  setToolTip() {

    /// conditional operator when if overflow add title else remove title

      (this.domElement.offsetWidth < this.domElement.scrollWidth) ?

         this.renderer.setAttribute(this.domElement,

                     'title',this.domElement.textContent) :

         this.renderer.removeAttribute(this.domElement, 'title');

   }

}

app.module.ts

Map directive in @NgModule to use it across entire module.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { ElipisyfyDemoComponent } from './elipisyfy-demo/elipisyfy-demo.component';

import { EllipsifyMeDirective } from './Directives/app-ellipsify-me.directive';

@NgModule({

  declarations: [

    AppComponent,

    ElipisyfyDemoComponent,
    EllipsifyMeDirective

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule,

    ReactiveFormsModule,

   

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Component Html:

<p>elipisyfy-demo works!</p>

<div class="title"  appEllipsifyMe>

    ArulkumarSivaraj@blogspot.com Based on screen size dynamically add tool-tip

    to the element

    when it's getting overflow hidden scenario.

    ArulkumarSivaraj@blogspot.com Based on screen size dynamically add tool-tip

    to the element

    when it's getting overflow hidden scenario.

    ArulkumarSivaraj@blogspot.com Based on screen size dynamically add tool-tip

    to the element

    when it's getting overflow hidden scenario.

</div>

After Run application & Result is below:

Text Overflow Demo