Http запросы в Angular

Подключение HttpClient

// app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  ...
  imports: [
    ...
    HttpClientModule
  ],
  ...
})

Примечание: обработка данных происходит через объект Observable

import { Component } from '@angular/core';
import { NewServiceService } from './new-service.service';
import { HttpClient } from '@angular/common/http'; (1)

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appcode pw';
  userName: string = "";
  response: any;

  constructor(private http: HttpClient) { (2)

  }
  search() {
    this.http.get('https://api.github.com/users/' + this.userName).subscribe((response) => { (3)
      this.response = response;
      console.log(this.response);
    })
  }
} 

Перед применением нужно убедиться импортирован модуль HttpClient (1) Далее в конструкторе объявляем переменную http (2) после чего используем в методе search (3)

// разметка
UserName: <input type="text" [(ngModel)]="userName" />
<button (click)="search()">Поиск</button>
<div *ngIf="response">
    <img src="{{response.avatar_url}}" alt="" />
</div> 

Дополнительная ссылка на документацию: https://angular.io/tutorial/toh-pt6

https://youtu.be/W9ZhQ_0z6Kg