Как сделать в Angular metod для put запросов

У меня не получается сделать в Angular metod для put запросов.Я хочу сделать, чтобы состояние при нажатие на флажок менялось на true. Помогите,пожалуйста, разобраться. Я написал следующий код:

    //Appcomponent.ts
        export class AppComponent {
          public text = '';
          public isCompleted="";
          public todoList!: Todo[];
          public todos!: Todos[];
          private httpClient:HttpClient;
            constructor(httpClient:HttpClient) { 
              this.httpClient= httpClient;
            }
    
      
    
     
      onComplete(onComplete:Todos):void {          

    this.httpClient.put<Todos[]>('https://intense-plateau-06126.herokuapp.com/categories/2/todos/'+onComplete.id , {isCompleted:!onComplete.isCompleted})
    .subscribe(todos=>{
      this.todos=todos;
    console.log(todos)
     })
}
      
//Appcomponent.html
<div class="main">
  <label for="addItemInput">What would you like to do today?</label>

<input
  #newItem
  placeholder="add an item"
  (keyup.enter)="onCreate"
  class="lg-text-input"
  id="addItemInput"
/>

<button class="btn-primary" (click)="onCreate">Add</button>
  <h2>What would you like to do today?</h2>

  <ul class ="todos">
    <li *ngFor="let todo of todoList">
      <span >{{ todo.title | json}}</span>
     
      <div class="todo" *ngFor="let item of todo.todos">

      
        <input type="checkbox"
        name="isCompleted" 
        (change)="onComplete(item)"
        [(ngModel)] = "item.isCompleted">
        
 <span *ngIf="item.isCompleted">{{ item.text }}</span>
 <span *ngIf="!item.isCompleted"><del>{{ item.text }}</del></span>
    </div>
    </li>
  </ul>
</div>