I need to Delete any object from my DRF / django connected database through angular 13

I am getting the id which i have to delete but the last line of service.ts that is of delete method is not getting executed…

the files and code snippets I used are : –

COMPONENT.HTML

<li *ngFor="let source of sources$ | async | filter: filterTerm">
       <div class="card">
        <div class="card-body">
          <h5 class="card-title">{{source.name}}</h5>
          <p>URL:- <a href ='{{source.url}}'>{{source.url}}</a></p>
          <a class="btn btn-primary" href='fetch/{{source.id}}' role="button">fetch</a>

           <button class="btn btn-primary" (click)="deleteSource(source.id)">delete </button>
           <br>
        </div>
            </div>


</li>

I tried to console the id geeting from html and the Id i am getting is correct.
//component.ts

export class SourcesComponent implements OnInit {
  filterTerm!: string;
  sources$ !: Observable<sources[]>;
//   deletedSource !: sources;

  constructor(private sourcesService: SourcesService) { }

//  prepareDeleteSource(deleteSource:  sources){
//   this.deletedSource = deleteSource;
//  }

  ngOnInit(): void {
    this.Source();
  }

  Source(){
    this.sources$ = this.sourcesService.Sources()
      }

  deleteSource(id : string){
  console.log(id)
    this.sourcesService.deleteSource(id);
    }

//service.ts

export class SourcesService {
API_URL = 'http://127.0.0.1:8000/sourceapi';

constructor(private http: HttpClient) { }
//   let csrf = this._cookieService.get("csrftoken");
//   if (typeof(csrf) === 'undefined') {
//     csrf = '';
//   }
     /** GET sources from the server */
    Sources() :  Observable<sources[]> {
      return this.http.get<sources[]>(this.API_URL,);
    }
      /** POST: add a new source to the server */

    addSource(source : sources[]): Observable<sources[]>{
      return this.http.post<sources[]> (this.API_URL, source);
      //console.log(user);
      }

    deleteSource(id: string): Observable<number>{
    let httpheaders=new HttpHeaders()
    .set('Content-type','application/Json');
    let options={
      headers:httpheaders
    };
     console.log(id)
     return this.http.delete<number>(this.API_URL +'/'+id)


  }
}

>Solution :

Angular HTTP functions return cold observables. This means that this.http.delete<number>(this.API_URL +'/'+id) will return an observable, which will not do anything unless someone subscribes to it. So no HTTP call will be performed, since no one is watching the result.

If you do not want to use the result of this call, you have different options to trigger a subscription.

1. simply call subscribe on the observable:

deleteSource(id : string){
  console.log(id)
  this.sourcesService.deleteSource(id).subscribe();
}

2. Convert it to a promise and await it (or don’t, if not needed) using lastValueFrom:

async deleteSource(id : string){
  console.log(id)
  await lastValueFrom(this.sourcesService.deleteSource(id));
}