Taiga UI 5.0 is out!

HoveredChange CDK

GitHub

tuiHoveredChange is used for emitting true/false when users hovers over an element or moves cursor away from it.

Basic

Hidden Text Appears Here: 

    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    class="tui-space_bottom-5"
    (tuiHoveredChange)="onHovered($event)"
>
    Hover to reveal hidden text!
</button>

<p>
    Hidden Text Appears Here:
    <span
        class="text-style"
        [class.hidden]="!hovered"
    >
        You Just Hovered Over The Button!
    </span>
</p>

    

      
      
    

  
    
      .text-style {
    font-size: 16px;
    color: #f00;
}

.hidden {
    display: none;
}
GitHub StackBlitz