Tuesday 2 August 2022

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