> For the complete documentation index, see [llms.txt](https://elixor.js.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elixor.js.org/sending-data-to-the-server/making-a-post-request.md).

# Making a POST request

Apps often POST data to a server. They POST when submitting a form. In the following example, the `HeroesService` posts when adding a hero to the database.

{% code title="heros.service.ts" %}

```typescript
/** POST: add a new hero to the database */
addHero (hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
    .pipe(
      catchError(this.handleError('addHero', hero))
    );
}
```

{% endcode %}

The `Elixor.post()` method is similar to `get()` in that it has a type parameter (you're expecting the server to return the new hero) and it takes a resource URL.

It takes two more parameters:

1. `hero` - the data to POST in the body of the request.
2. `httpOptions` - the method options which, in this case, [specify required headers](https://elixor.gitbook.io/elixor/sending-data-to-the-server/adding-headers).

Of course it catches errors in much the same manner [described above](https://elixor.gitbook.io/elixor/error-handling/getting-error-details).

The `HeroesComponent` initiates the actual POST operation by subscribing to the `Observable` returned by this service method.<br>

{% code title="Hero.tsx" %}

```typescript
addHero(newHero)
  .subscribe(hero => this.heroes.push(hero));
```

{% endcode %}

When the server responds successfully with the newly added hero, the component adds that hero to the displayed `heroes` list.