Cannot get data from API by passing parameters from form

I have an API that gets data from API by passing parameters, but I can't pass the parameters to it from form:

• My API :

https://api.myapi.com/books?categor=[list of values]&creation_date=value

• My interface:

export interface Books{
    id: int
    name: string
    categor: string
    creation_date: string
}

• My Service :

import { Books } from '../interfaces/books ';

constructor(private http:HttpClient) { }

  getBooks(categor: string, creation_date: string): Observable<Books>{
    return this.http.get<Books>(`https://api.myapi.com/books?categor=${this.categor}&creation_date=${this.creation_date}`).pipe(
      tap(books=> console.log(books)),
    );
  }

• My component.ts :

books: any;
constructor(private booksService: BooksService){ }

onGetBooks(data:{categor: string, creation_date: string})
  {
    this.bookService.getBooks(data).subscribe((response) => {
      console.log(response);
      this.books = response.list;
    })
  }

• My HTML code :

<form #bookForm ="ngForm" (ngSubmit)="onGetBooks(bookForm.value)">
  <mat-form-field>
    <mat-label>Input</mat-label>
    <input matInput name="categor" ngModel>
  </mat-form-field>
  <mat-form-field>
    <mat-label>Input</mat-label>
    <input matInput name="creation_date" ngModel>
  </mat-form-field>

  <button mat-raised-button>Get Books</button>

</form>

You need to make couple of changes in you code

getBooks(categor: string, creation_date: string): Observable<Books>{
return this.http.get<Books>(`https://api.myapi.com/books?categor=${categor}&creation_date=${creation_date}`).pipe(
  tap(books=> console.log(books)),
);
}

In service file you don't need to use this as you are passing values to service file as the function arguments.

if you still face issue on calling API change,
either change tag <button> to <input type="submit">
or change event trigger of form (ngSubmit) to <button> to (click)