Отображение простых данных JSON из консоли в HTML в Angular

Я использую Openhab для мониторинга датчиков. Но мне нужно вытащить / ввести элементы (вещи), свойства датчика, конфигурацию комнаты через веб-интерфейс. Итак, в openhab есть запросы REST, которые здесь хорошо документированы - https://docs.openhab.org/configuration/restdocs.html.

Я хотел разработать простой веб-интерфейс. (Раньше у меня не было опыта веб-разработки). Итак, я попытался следовать базовому руководству на angular.io и - https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b.

Как показано в блоге, я могу получить объект JSON с помощью запроса Httpclient до консоли, но я хочу отобразить его в HTML, но я не нахожу wa для этого. Итак, до сих пор у меня на консоли есть следующие данные:

Но как отобразить в HTML, например, какие изменения мне нужно внести в app.component.html? Если я просто попробую -

{{data.login}}

Я пробовал искать на сайтах и ​​в блогах, но они описывали только способы, как выполнить запрос и добраться до консоли. Но мне это было нужно в HTML.

Мой код: (Все для начального уровня - базовые коды и коды по умолчанию) app.component.ts

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  results = '';

  constructor(private http: HttpClient)
  {
  }


  ngOnInit(): void {
    this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(data => {
      console.info("User Login: " + data.login);
      console.info("Bio: " + data.bio);
      console.info("Company: " + data.company);
    });
  } 
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

interface UserResponse {
  login: string;
  bio: string;
  company: string;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  <img width = "300" alt = "Angular Logo" src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg= = ">
</div>



<h2>Here are some links to help you start: </h2>



<ul>
  <li>
    <h2><a target = "_blank" rel = "noopener" href = "https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target = "_blank" rel = "noopener" href = "https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target = "_blank" rel = "noopener" href = "https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

Большое спасибо за помощь.