title: Angular Delete http request
body: <p>I'm getting started with angular CRUD operation and I want to have this delete request. My problem is When I execute this delete request on whichever rows I want to delete, It's always the first row.
  my Html-</p>
  <pre><code> &lt;tr *ngFor=&quot;let users of RegisteredUserList&quot;&gt;
          &lt;td&gt;{{users.id}}&lt;/td&gt;
          &lt;td&gt;{{users.userName}}&lt;/td&gt;
          &lt;td&gt;{{users.email}}&lt;/td&gt;
          &lt;td&gt;
            &lt;!-- Button trigger modal --&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-light btn-outline-danger mr-1&quot; data-toggle=&quot;modal&quot; data-target=&quot;#DeleteModal&quot;&gt;Delete&lt;/button&gt;
            &lt;!-- Modal --&gt;
            &lt;div class=&quot;modal fade&quot; id=&quot;DeleteModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;DeleteModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
              &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
                &lt;div class=&quot;modal-content&quot;&gt;
                  &lt;div class=&quot;modal-header&quot;&gt;
                    &lt;h5 class=&quot;modal-title&quot; id=&quot;DeleteModalLabel&quot;&gt;Confirm Delete&lt;/h5&gt;
                    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                      &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                    &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;modal-body&quot;&gt;
                    &lt;p&gt;Do you really want to delete {{users.userName}}.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;modal-footer&quot;&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-light btn-outline-danger mr-1&quot; (click)=&quot;Delete(users.id)&quot;&gt;Save changes&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  </code></pre>
  <p>my component.ts -</p>
  <pre><code>Delete(id: string): void {
      this.service.DeleteUser(id).subscribe(
        (data) =&gt; console.log(&quot;Success&quot;) );
    }
  </code></pre>
  <p>myservice.ts -</p>
  <pre><code>DeleteUser(id: string): Observable&lt;any&gt; {
      const options = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      }
      return this.http.delete&lt;any&gt;(this.baseURL + &quot;Account/Delete&quot; + &quot;/&quot; + id, options);
    }
  </code></pre>
  <p>backend code-</p>
  <pre><code>[Route(&quot;~/Account/Delete/{id?}&quot;)]
          [HttpDelete]
          public async Task&lt;IActionResult&gt; Delete([FromBody] string id)
          {
              var findUser = await userManager.FindByIdAsync(id);
              if (findUser != null)
              {
                  var deleteUser = await userManager.DeleteAsync(findUser);
                  if (deleteUser.Succeeded)
                  {
                      return StatusCode(200);
                  }
                  else
                  {
                      return BadRequest();
                  }
              }
              else
              {
                  return BadRequest();
              }
          }
  </code></pre>
  <p>which ever row I try to delete, only the first row is being sent and 400 error is thrown.</p>