在Angular中，可以使用*ngIf指令来在加载http数据之前隐藏HTML元素，然后在数据加载完成后再渲染该元素。

以下是一个示例：

在组件的HTML模板中，使用*ngIf指令来控制要渲染的HTML元素：

  
  
{{ data }}

在组件的Typescript代码中，使用HttpClient模块来加载http数据，并在数据加载完成后将dataLoaded设置为true：

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  data: any;
  dataLoaded: boolean = false;

  constructor(private http: HttpClient) {
    this.loadData();
  }

  loadData() {
    this.http.get('https://api.example.com/data').subscribe(response => {
      this.data = response;
      this.dataLoaded = true;
    });
  }
}

在上面的示例中，当组件加载时，会调用loadData()方法来加载http数据。在数据加载完成后，会将dataLoaded设置为true，从而使得*ngIf指令渲染HTML元素。

请注意，需要先导入HttpClient模块，然后在组件的构造函数中注入HttpClient依赖。在loadData()方法中，使用http.get()方法来发起http请求，并使用subscribe()方法来订阅数据的返回。当数据返回时，将其赋值给data变量，并将dataLoaded设置为true。