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 |
