How can I Interpolate data from HttpClient Rest Api?

I have this component where I am pulling data from a REST API using the HttpClient. The pulling of the data works well. I could tell because I could see the data being displayed in Console Log.

When it comes to using the data in the HTML I am stuck. I can't figure how to do so. Nothing is broken the Data just won't show.

Here is my Code

Imports in the Component

    import { Component, OnInit } from '@angular/core';
    import {MatTabsModule} from '@angular/material/tabs';
    import {MatListModule} from '@angular/material/list'; 
    import { Observable } from 'rxjs';
    import {HttpClient, HttpHeaders} from '@angular/common/http';

This is the class

    export class TestComponent implements OnInit {
    constructor(private http: HttpClient ) {
    
    this.http
    .get<any>('http://api.data_redacted_for_privacy').subscribe(data => {
    console.log(data);
    });
    }

    ngOnInit(){

    this.http
    .get<any>('http://api.data_redacted_for_privacy').subscribe(data => {
    console.log(data);
    });

    }
    }

The HTML is as follows

<div *ngFor="let data">{{data.id}}</div>

I tried adding and Observable, but i believe my implementation is wrong. Sure is not like using AngularFire.

Assign the returned data to a class variable, then loop through it using let... of...:

export class TestComponent implements OnInit {

   allData: any = null; // or any other type you have at your disposal

   constructor(private http: HttpClient){} // you don't need to subscribe to the same endpoint (if it's the same endpoint, disregard the comment if it's not!)

   ngOnInit(){

       this.http.get<any>('http://api.data_redacted_for_privacy').subscribe(data => {
          console.log(data);
          this.allData = data;
        });
    }

}

Then in template: <div *ngFor="let data of allData">{{data.id}}</div>