vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts

   1 import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
   2 import {HighlightPipe} from "../../pipes/highlight/highlight-filter.pipe";
   3 import * as _ from 'lodash';
   4
   5 @Component({
   6   selector : 'custom-ellipsis',
   7   template: `
   8     <span
   9           sdc-tooltip
  10           class="ellipsis"
  11           id="{{id}}"
  12           [innerHtml]="displayValue | safe : 'html'"
  13           [tooltip-text]="value">
  14       </span>`,
  15   styles : [
  16     `
  17       .ellipsis {
  18         white-space: nowrap;
  19         overflow: hidden;
  20         text-overflow: ellipsis;
  21         display: inline-block;
  22         width: 99%;
  23         text-align: left;
  24       }
  25     `
  26   ],
  27   providers : [HighlightPipe]
  28 })
  29 export class EllipsisComponent implements OnChanges{
  30   @Input() value : string;
  31   @Input() id : string;
  32   @Input() hightlight : string;
  33
  34   displayValue : string;
  35   constructor(private _highlightPipe : HighlightPipe){
  36     this.displayValue = this.value;
  37   }
  38
  39   ngOnChanges(changes: SimpleChanges): void {
  40     this.displayValue = this.value;
  41     if(!_.isNil(this.hightlight)){
  42       this.displayValue = this._highlightPipe.transform(this.value ,this.hightlight ? this.hightlight : '');
  43     }
  44   }
  45 }