HTTP GET Request in Angular 19 using HttpClient

providers: [
   provideHttpClient(),
] 

import { HttpClient } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class WriterService {
    constructor(private http: HttpClient) { }
} 

get(url: string, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    observe?: HttpObserve;
    params?: HttpParams | {
        [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
    withCredentials?: boolean;
} = {}): Observable<any> 

findAllWriters(): Observable<Writer[]> {
    return this.http.get<Writer[]>("/api/writers");
} 

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { TestData } from './test-data';

export const APP_CONFIG: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    importProvidersFrom(InMemoryWebApiModule.forRoot(TestData, { delay: 2000 }))
  ]
}; 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Writer } from './writer';

@Injectable({
    providedIn: 'root'
})
export class WriterService {
    constructor(private http: HttpClient) { }
    findAllWriters(): Observable<Writer[]> {
        const httpHeaders = new HttpHeaders()
            .set('Accept', 'application/json');
        return this.http.get<Writer[]>("/api/writers", {
            headers: httpHeaders,
            responseType: 'json'
        });
    }
    findWriterById(id: number): Observable<Writer> {
        const httpParams = new HttpParams().set('id', id);
        return this.http.get<Writer>("/api/writers", {
            params: httpParams
        });
    }
    findWriterByNameNCity(name: string, city: string): Observable<Writer[]> {
        const httpParams = new HttpParams()
            .set('name', name)
            .set('city', city);
        return this.http.get<any[]>("/api/writers", {
            params: httpParams
        });
    }
} 

export interface Writer {
    id:number;
    name:string;
    city:string;
} 

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { WriterService } from './writer.service';
import { Writer } from './writer';
import { CommonModule } from '@angular/common';

@Component({
   selector: 'app-writer',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './writer.component.html'
})
export class WriterComponent implements OnInit {
   allWriters!: Observable<Writer[]>;
   constructor(private writerService: WriterService) { }

   ngOnInit() {
      this.findAllWriters();
      this.findWriterById();
      this.findWriterByNameNCity();
   }
   findAllWriters() {
      this.allWriters = this.writerService.findAllWriters();
   }
   findWriterById() {
      this.writerService.findWriterById(100).subscribe(writer => console.log(writer));
   }
   findWriterByNameNCity() {
      this.writerService.findWriterByNameNCity("James", "Mumbai").subscribe({
         next: (data: Writer[]) => console.log(data),
         error: (err) => console.log("Error occurred: ", err),
         complete: () => console.log("Request completed")
      });
   }
} 

<h3>All Writers</h3>
@for (w of allWriters | async; track w) {
    <p> {{w.id}} - {{w.name}} | {{w.city}}
}