在Angular组件中，当发生HTTP错误时，可以使用toPromise()方法将Observable转换为Promise，并使用catch()方法捕获错误。然后，可以在catch()方法中处理错误，并将错误消息显示在组件中。

下面是一个示例代码，展示了如何在Angular组件中捕获和显示HTTP错误消息：

首先，引入必要的模块和服务：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

在组件的构造函数中注入HttpClient服务：

constructor(private http: HttpClient) { }

在组件的ngOnInit()方法中发送HTTP请求，并处理错误：

ngOnInit() {
  this.http.get('https://api.example.com/data')
    .toPromise()
    .then(response => {
      // 处理响应数据
    })
    .catch(error => {
      // 处理错误消息
      if (error.error instanceof ErrorEvent) {
        // 客户端错误
        console.error('An error occurred:', error.error.message);
      } else {
        // 服务器错误，可以从error对象中获取错误信息
        console.error(
          `Backend returned code ${error.status}, ` +
          `body was: ${error.error}`);
      }
    });
}

在HTML模板中，可以使用Angular的数据绑定语法来显示错误消息：

{{ errorMessage }}

在组件中定义一个errorMessage属性，并在catch()方法中赋值：

errorMessage: string;

// ...

ngOnInit() {
  // ...

  .catch(error => {
    // ...

    // 设置错误消息
    this.errorMessage = error.error instanceof ErrorEvent ?
      error.error.message : `Backend returned code ${error.status}, body was: ${error.error}`;
  });
}

这样，当发生HTTP错误时，错误消息将显示在组件的HTML模板中。

请注意，上述示例代码中的URL仅用作示例，您需要根据实际情况替换为您的API URL。