Use MatTooltip with host Angular component

Question

I'm working with Angular 15.1 & Angular Material 15.1 and I need to use MatTooltip directive with the host component. I know I can create a wrapper and use tooltip attribute - but I need a solution with the host component.

I tried to use MatTooltip like that:

 host: {
    '[attr.matTooltip]': 'some text',
  }

and also with ViewContainerRef, createComponent method and @HostListener, but none of the options did work out

Did you try `@HostBinding`? This question might be a duplicate of [this](https://stackoverflow.com/questions/41298168/how-to-dynamically-add-a-directive) — Eldar, Jan 12 '23 at 18:21
Not really a duplicate, cause I wanted to use MatTooltip exactly, not the custom directive. But it's not possible at the moment, as i found out from the accepted answer — retsuko, Jan 13 '23 at 08:46
Please do not add answers to the question body itself. Instead, you should add it as an answer. [Answering your own question is allowed and even encouraged](https://stackoverflow.com/help/self-answer). — Adriaan, Jan 13 '23 at 12:31

score 0 · Answer 1 · answered Jan 12 '23 at 18:32

0

in Angular v15 you can use Directive composition API

@Component({
  selector: 'test',
  template: 'test.html',
  hostDirectives: [{
    directive: MatTooltip,
    inputs: [...],
    outputs: [...],
  }],
})
export class TestComponent { }

answered Jan 12 '23 at 18:32

Mehdi Shakeri

584
3
11

1

I've got an error "Host directive MatTooltip must be standalone" – retsuko Jan 12 '23 at 18:49
2

check [stackblitz](https://stackblitz.com/edit/angular-9tczmy?file=src/app/tooltip-overview-example.ts) – Mehdi Shakeri Jan 12 '23 at 20:03
can I do that without creating custom directive? I want use [matTooltip] without any additional directives – retsuko Jan 12 '23 at 21:12
Not until the angular material project migrates to standalone api – Mehdi Shakeri Jan 12 '23 at 21:30
I can confirm that what @MehdiShakeri has shared is in fact the solution. – Jakub Aug 01 '23 at 10:08

score 0 · Accepted Answer · answered Jan 13 '23 at 12:38

I've found an answer on my own, maybe someone will need this too. I will share code pieces below.

 @Component({
  selector: 'test-component',
  template: `
   
    <div>test</div>
  `,
  providers: [MatTooltip],
  styleUrls: ['./test.component.scss'],
})

...

constructor(
    private readonly _tooltip: MatTooltip,
  ) {}

...

@HostListener('mouseenter') onMouseEnter(): void {
    this._tooltip.message = 'your message';
    this._tooltip.show();
  }

  @HostListener('mouseleave') onMouseLeave(): void {
    this._tooltip.hide();
  }

Use MatTooltip with host Angular component

2 Answers2