(Angular) How do I output an API Get response into a variable

New to Angular, and currently working on a small project. I have a local server running and I intend to pull a name down from it, then write it to a variable (repeat) to be used on my html page. I was wondering if anyone had any suggestions as to how best to write my get requests response to a variable, and (excuse my ignorance as I am new to object oriented programming, but reference this variable in my AppComponent class). Thank you.

import { Injectable, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AppComponent } from './app.component';

@Injectable({
  providedIn: 'root'
})


export class sqlservice {
  constructor(public http: HttpClient) { }
  ngOnInit(){
  this.http.get('http://localhost:7271/sql').subscribe(Response)=>
}

}

import { Component } from '@angular/core';
import { repeat } from 'rxjs';
import { sqlservice } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})


export class AppComponent {
title= 'angulartest';
repeat=;

}

Welcome to Angular! I got you:

In order to use the response from the HTTP get request in your AppComponent class, you would want to have a method in your service that returns an Observable, and then subscribe to that Observable in your AppComponent.

You could do it like this:

export class SqlService {
  constructor(private http: HttpClient) { }
  
  getData(): Observable<any> {
    return this.http.get('http://localhost:7271/sql');
  }
}

No need for ngOnInit in your service class, because you're going to call getData() in your AppComponent which has the ngOnInit.

In AppComponent, you'll want to do a couple things:

Just like you called the HttpClient in your service, you'll want to now call that SqlService in the constructor of your AppComponent. Second, you'll want to initialize getData. The end result will look something like this:

export class AppComponent implements OnInit {
  title = 'angulartest';
  data: any; // This variable will hold the response from the HTTP GET request

  constructor(private sqlService: SqlService) { }

  ngOnInit() {
    this.sqlService.getData().subscribe(response => {
      this.data = response;
      // You now have access to the data within your AppComponent
      console.log(this.data);
    });
  }
}

Here is solid documentation that goes into deep detail about communicating with backend services.

Hope this helps, add a comment to this answer if you have any questions!