Getting Started with Angular

🏗 Work in progress

The content of this page might not be fully up-to-date with Strapi 5 yet.

This integration guide follows the Quick Start Guide and assumes you have fully completed the "Hands-on" path. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.

If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Angular remains the same except that you do not fetch the same content.

Create a Angular app

Create a basic Angular application using angular CLI.

npx -p @angular/cli ng new angular-app

Use the Angular HTTP client

Import the Angular HttpClientModule:

./src/app/app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

GET Request your collection type

Execute a GET request on the restaurant collection type in order to fetch all your restaurants.

Be sure that you activated the find permission for the restaurant collection type.

Example GET request

// this.http is the Angular HttpClient service.
this.http
  .get("http://localhost:1337/api/restaurants", {
    params: { populate: "*" },
  })
  .subscribe((response) => {
    console.log(response);
  });

Example response

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "name": "Biscotte Restaurant",
        "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
        "createdAt": "2023-03-25T11:13:41.883Z",
        "updatedAt": "2023-03-25T11:17:45.737Z",
        "publishedAt": "2023-03-25T11:17:45.735Z",
        "categories": {
          "data": [
            {
              "id": 2,
              "attributes": {
                "name": "Brunch",
                "createdAt": "2023-03-25T11:14:20.605Z",
                "updatedAt": "2023-03-25T11:17:00.158Z",
                "publishedAt": "2023-03-25T11:17:00.153Z"
              }
            }
          ]
        }
      }
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

Example

./src/app/app.component.ts

import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { catchError, map, Observable, of } from "rxjs";

interface Restaurant {
  name: string;
  description: string;
}

interface Entry<T> {
  id: number;
  attributes: T;
}

interface Response {
  data: Entry<Restaurant>[];
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  error: any | undefined;
  restaurants$: Observable<Restaurant[]> | undefined;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    const url = "http://localhost:1337/api/restaurants";
    const opts = { params: { populate: "*" } };

    this.restaurants$ = this.http.get<Response>(url, opts).pipe(
      catchError((error) => this.handleError(error)),
      map((response) => response.data.map((x) => x.attributes))
    );
  }

  private handleError(error: HttpErrorResponse): Observable<never> {
    this.error = error;
    return of();
  }
}

./src/app/app.component.html

<div *ngIf="error">{{error}}</div>

<ul *ngIf="restaurants$|async as restaurants">
  <li *ngFor="let restaurant of restaurants">{{restaurant.name}}</li>
</ul>

POST Request your collection type

Execute a POST request on the restaurant collection type in order to create a restaurant.

Be sure that you activated the create permission for the restaurant collection type and the find permission fot the category collection type.

In this example a japanese category has been created which has the id: 3.

Example POST request with axios

// this.http is the Angular HttpClient service.
this.http
  .post("http://localhost:1337/api/restaurants", {
    data: {
      name: "Dolemon Sushi",
      description:
        "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
      categories: [3],
    },
  })
  .subscribe((response) => {
    console.log(response);
  });

Example response

{
  "id": 2,
  "name": "Dolemon Sushi",
  "description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
  "created_by": null,
  "updated_by": null,
  "created_at": "2020-08-04T09:57:11.669Z",
  "updated_at": "2020-08-04T09:57:11.669Z",
  "categories": [
    {
      "id": 3,
      "name": "Japanese",
      "created_by": 1,
      "updated_by": 1,
      "created_at": "2020-07-31T11:36:23.164Z",
      "updated_at": "2020-07-31T11:36:23.172Z"
    }
  ]
}

Example

./src/app/app.module.ts

import { HttpClientModule } from "@angular/common/http";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

./src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder } from '@angular/forms';
import { catchError, map, Observable, of, tap } from 'rxjs';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

interface Category {
  name: string;
}

interface Entry<T> {
  id: number;
  attributes: T;
}

interface Response<T> {
  data: Entry<T>[];
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  allCategories$: Observable<Entry<Category>[]> | undefined;
  error: any | undefined;
  modifiedData = {
    name: '',
    description: '',
    categories: new Array<{ id: number; checked: boolean }>(),
  };

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.allCategories$ = this.http
      .get<Response<Category>>('http://localhost:1337/api/categories')
      .pipe(
        catchError((error) => this.handleError(error)),
        map((response) => response.data),
        tap((data) => {
          data.forEach((x) => {
            this.modifiedData.categories.push({ id: x.id, checked: false });
          });
        })
      );
  }

  onSubmit(): void {
    const body = {
      data: {
        name: this.modifiedData.name,
        description: this.modifiedData.description,
        categories: this.modifiedData.categories
          .filter((x) => x.checked)
          .map((x) => x.id),
      },
    };

    this.http
      .post('http://localhost:1337/api/restaurants', body)
      .pipe(catchError((error) => this.handleError(error)))
      .subscribe((response) => {
        console.log(response);
        this.resetForm();
      });
  }

  private handleError(error: HttpErrorResponse): Observable<never> {
    this.error = error.message;
    return of();
  }

  private resetForm(): void {
    this.modifiedData.name = '';
    this.modifiedData.description = '';
    this.modifiedData.categories.forEach((x) => (x.checked = false));
  }
}

./src/app/app.component.html

<div *ngIf="error">{{error}}</div>

<form (ngSubmit)="onSubmit()">
  <div>
    <label for="name"> Name </label>
    <input name="name" type="text" [(ngModel)]="modifiedData.name" />
  </div>

  <div>
    <label for="address"> Description </label>
    <input
      name="description"
      type="text"
      [(ngModel)]="modifiedData.description"
    />
  </div>

  <div *ngIf="allCategories$ | async as allCategories">
    <br />
    Select categories
    <div *ngFor="let category of allCategories; index as i">
      <label
        >{{category.attributes.name}}
        <input
          type="checkbox"
          name="category{{i}}"
          [(ngModel)]="modifiedData.categories[i].checked"
        />
      </label>
    </div>
  </div>

  <button class="button" type="submit">Create</button>
</form>

PUT Request your collection type

Execute a PUT request on the restaurant collection type in order to update the category of a restaurant.

Be sure that you activated the put permission for the restaurant collection type.

We consider that the id of your restaurant is 2. and the id of your category is 2.

Example PUT request

// this.http is the Angular HttpClient service.
this.http
  .put("http://localhost:1337/api/restaurants/2", {
    data: {
      categories: [2],
    },
  })
  .subscribe((response) => {
    console.log(response);
  });

Example response

{
  "id": 2,
  "attributes": {
    "name": "Dolemon Sushi",
    "description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
    "created_by": null,
    "updated_by": null,
    "created_at": "2020-08-04T10:21:30.219Z",
    "updated_at": "2020-08-04T10:21:30.219Z",
    "categories": [
      {
        "id": 2,
        "name": "Brunch",
        "created_by": 1,
        "updated_by": 1,
        "created_at": "2020-08-04T10:24:26.901Z",
        "updated_at": "2020-08-04T10:24:26.911Z"
      }
    ]
  }
}