要动态设置HTML属性，可以使用Angular的Renderer2服务。Renderer2服务是Angular提供的一个可用于与DOM交互的API。

以下是使用Renderer2服务动态设置HTML属性的代码示例：

首先，将Renderer2服务注入到组件的构造函数中：

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    Set Custom Attribute
  `,
})
export class ExampleComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  setCustomAttribute() {
    const button = this.el.nativeElement.querySelector('button');
    this.renderer.setAttribute(button, 'data-custom-attribute', 'custom value');
  }
}

在上面的代码中，我们注入了Renderer2服务和ElementRef服务。Renderer2服务用于与DOM进行交互，而ElementRef服务提供了对组件的宿主元素的访问。

然后，在setCustomAttribute()方法中，我们使用Renderer2的setAttribute()方法动态设置了一个名为"data-custom-attribute"的自定义属性，并将其值设置为"custom value"。在这个示例中，我们通过查询按钮元素来获取对它的引用，然后使用Renderer2服务设置自定义属性。

请确保在模板中为按钮元素添加一个本地引用（如上面的代码所示），以便在组件中获取对该元素的引用。

这样，在点击按钮时，就会调用setCustomAttribute()方法，并动态设置HTML属性。

希望这个示例能帮助到你！