如何在angular 7中的垫子步骤标题图标上添加红点？

在Angular 7中，可以通过以下步骤在垫子步骤标题图标上添加红点：

1. 首先，在HTML模板文件中找到垫子步骤标题的图标元素。这通常是一个<i>或<span>标签，具体取决于你使用的图标库或自定义图标。
2. 在该图标元素上添加一个CSS类，用于设置红点的样式。例如，可以添加一个名为red-dot的类。
3. 在CSS样式文件中，定义red-dot类的样式。可以使用background-color属性设置红点的颜色，border-radius属性设置红点的圆角，width和height属性设置红点的大小等。
4. 在组件的逻辑代码中，根据需要动态添加或移除red-dot类。可以使用Angular的属性绑定或样式绑定来实现。

以下是一个示例代码：

HTML模板文件：

<i class="icon" [ngClass]="{'red-dot': showRedDot}"></i>

CSS样式文件：

.red-dot {
  background-color: red;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

组件的逻辑代码：

export class MyComponent {
  showRedDot: boolean = true;

  // 根据需要，在适当的时机设置showRedDot为true或false
}

在上述示例中，showRedDot属性控制是否显示红点。当showRedDot为true时，图标元素会添加red-dot类，从而显示红点；当showRedDot为false时，图标元素会移除red-dot类，从而隐藏红点。

请注意，以上示例中的代码仅为演示目的，实际应用中可能需要根据具体情况进行适当的调整。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种计算场景。了解更多信息，请访问腾讯云云服务器。
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端对象存储服务，适用于存储和处理各种类型的数据。了解更多信息，请访问腾讯云对象存储。

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估和决策。