如何通过 Angular 自定义组件传递 class

Question

So I have a tooltip custom component that I need to be able to pass a class through to the underlying html, but not sure how to do it. Currently the tooltip (custom angular component) html looks like this:

<div role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-bottom-right">
    <clr-icon class="icon-shape is-solid" shape="info-circle" size="20"></clr-icon>
    <div class="tooltip-content">
        <ng-content></ng-content>
    </div>
</div>

Using this custom component is like:

<tooltip>This is the text displayed.</tooltip>

What I need to be able to do is pass in a position so that the tooltip isn't always at bottom-right. So I need to pass either a property or class or something so that in the custom component I can change the class of my div to "tooltip-top-right", "tooltip-bottom-left", etc... like so:

<tooltip class="tooltip-bottom-left">Tooltip text</tooltip>

or

<tooltip position="bottom-left">Tooltip text</tooltip>

And then inside the component's.ts or.html, assign the appropriate class to my div.
Thanks in advance!

Answer 1

You could use mat-tooltip for this case. https://material.angular.io/components/tooltip/overview

It has built in matTooltipPosition directive so you wouldnt need to add any class to it.

1) Import the appropriate module in app.module.ts

import {MatTooltipModule} from '@angular/material/tooltip';

2) Use the mat-tooltip selector and the matTooltipPosition input property

<button mat-raised-button
    matTooltip="Info about the action"
   [matTooltipPosition]='where you want it to be'
    aria-label="Button that displays a tooltip when focused or hovered over">
  Action
 </button>

more examples: https://material.angular.io/components/tooltip/examples