在Angular材料中，可以使用@HostBinding和@HostListener装饰器来实现悬停更改选项卡的效果。以下是一个示例代码：

首先，在组件的.ts文件中，导入所需的模块和装饰器：

import { Component, HostBinding, HostListener } from '@angular/core';

然后，在组件类中定义一个变量来跟踪选项卡是否处于悬停状态：

export class TabComponent {
  @HostBinding('class.hovered') isHovered = false;
}

接下来，使用@HostBinding装饰器将isHovered变量绑定到组件的主机元素上，这样我们就可以在CSS中根据悬停状态来更改样式。

在模板文件中，将选项卡的内容包装在一个div元素中，并使用ngClass指令根据isHovered变量的值来添加或移除hovered类：

最后，在组件类中使用@HostListener装饰器来监听鼠标进入和离开事件，并根据事件触发时的状态来更新isHovered变量的值：

export class TabComponent {
  @HostBinding('class.hovered') isHovered = false;

  @HostListener('mouseenter') onMouseEnter() {
    this.isHovered = true;
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.isHovered = false;
  }
}

现在，当鼠标进入选项卡时，isHovered变量将被设置为true，并且hovered类将被添加到选项卡的div元素上。当鼠标离开时，isHovered变量将被设置为false，并且hovered类将被移除。

请注意，我们还需要在组件的CSS文件中定义hovered类的样式，以实现悬停状态的效果。