Esta es la directiva personalizada que se está utilizando,

    constructor(
      private el: ElementRef,
      private renderer: Renderer
    ) { }

    @HostListener('mouseover') onHover() {
    const offWidth = this.el.nativeElement.offsetWidth;
    const scrollWidth = this.el.nativeElement.scrollWidth;
    if(offWidth < scrollWidth) {
        this.renderer.setElementAttribute(this.el.nativeElement, 'matTooltipDisabled', false);
        console.log("enable tooltip");
    } else {
        this.renderer.setElementAttribute(this.el.nativeElement, 'matTooltipDisabled', true);
        console.log("disable tooltip");
    }
}

Esto no funciona. La punta de la herramienta del tapete siempre está habilitada. El atributo se actualiza correctamente a verdadero y falso, pero la información sobre herramientas siempre se muestra.

           <input
                appMyCustomDirective
                class="testclass"
                name="testval"
                id="testid"
                [(ngModel)]="testval"
                type="text"
                autocomplete="off"
                [matTooltip] = "testval"
                matTooltipClass = "tooltip"
                matTooltipPosition = "above"
            />
1
Sunitha 30 sep. 2019 a las 13:29

1 respuesta

La mejor respuesta

Cree una directiva que implemente la condición y exporte una referencia de la misma:

@Directive({
  selector: '[isOutOfBound]',
  exportAs: 'outOfBound'
})
export class IsOutOfBoundDirective {
  constructor() { }
  @Input('isOutOfBound') outOfBound = false;
  @HostListener('mouseenter') onEnter() {
    this.outOfBound = !this.outOfBound;
  }
}

Luego usa la referencia para vincular el resultado a [matTooltipDisabled] de forma similar a:

<button mat-raised-button
    matTooltip="Info about the action"
    [isOutOfBound]
    #c="outOfBound"
    [matTooltipDisabled]="c.outOfBound"
    >

Una muestra rápida: https://stackblitz.com/edit/angular-mjz2n7

2
sabithpocker 30 sep. 2019 a las 12:04