HTTP Get request not sending out to the provided URL

I'm new to angular and I was building this system from scratch. I wrote the the following method to sed a GET request to an endpoint in the back end. The method is called in the ngOnInit method.

    public getExistingDrp():Observable<any>{
    const url = "http://localhost:2252/api/mldetails/mldropdown?AgID=49&CID=37&intExist=0";
    const token = "test-token";
    const headers = new HttpHeaders(
      {
        'Authorization': 'Bearer ' + token
      }
    );
    return this.http.get(url ,{headers: headers})
  }

The call does not reach backend. I have added breakpoints to the backend methods and they get hit when I send the request from postman. But from this app nothing happens, not even an error. Also nothing is shown in the Network tab in the browser. The console gives following output.

    _Observable {
  source: _Observable {
    source: _Observable {
      source: [_Observable],
      operator: [Function (anonymous)]
    },
    operator: [Function (anonymous)]
  },
  operator: [Function (anonymous)]
}

my app.module.ts is as follows

    import { NgModule } from '@angular/core';
import {
  BrowserModule,
  provideClientHydration,
} from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { TransferMLOComponent } from './pages/transfer-mlo/transfer-mlo.component';
import { MLOcomponentsComponent } from './pages/existing-mlodetails/allMLOdetails/mlocomponents/mlocomponents.component';
import { MLOdetailsNavbarComponent } from './pages/existing-mlodetails/mlodetails-navbar/mlodetails-navbar.component';
import { MLOtarrifComponent } from './pages/existing-mlodetails/allMLOdetails/mlotarrif/mlotarrif.component';
import { MLOlocationsComponent } from './pages/existing-mlodetails/allMLOdetails/mlolocations/mlolocations.component';
import { MLOdamagesComponent } from './pages/existing-mlodetails/allMLOdetails/mlodamages/mlodamages.component';
import { MLOrepairComponent } from './pages/existing-mlodetails/allMLOdetails/mlorepair/mlorepair.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { provideHttpClient, withFetch, HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SidebarComponent,
    TransferMLOComponent,
    MLOcomponentsComponent,
    MLOdetailsNavbarComponent,
    MLOtarrifComponent,
    MLOlocationsComponent,
    MLOdamagesComponent,
    MLOrepairComponent,
  ],
  imports: [BrowserModule, AppRoutingModule, NgbModule, HttpClientModule],
  providers: [provideClientHydration(), provideHttpClient(withFetch())],
  bootstrap: [AppComponent],
})
export class AppModule {}

Am I missing something? Is there anything I'm doing wrong?

getExistingDrp returns an Observable. To execute the HTTP request you simply have to call subscribe method like so:

ngOnInit() {
  this.getExistingDrp().subscribe();
}

More on this – https://angular.io/guide/http-request-data-from-server#starting-the-request