# Getting Started with Angular

This integration guide is following the Getting started guide. We assume that you have completed Step 8 and therefore can consume the API by browsing this url.

If you haven't gone through the getting started guide, the way you request a Strapi API with Angular remains the same except that you will 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 an HTTP client

Many HTTP clients are available but in this documentation we'll use Axios and Fetch.

# 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.

Response

[
  {
    "id": 1,
    "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.",
    "created_by": {
      "id": 1,
      "firstname": "Paul",
      "lastname": "Bocuse",
      "username": null
    },
    "updated_by": {
      "id": 1,
      "firstname": "Paul",
      "lastname": "Bocuse",
      "username": null
    },
    "created_at": "2020-07-31T11:37:16.964Z",
    "updated_at": "2020-07-31T11:37:16.975Z",
    "categories": [
      {
        "id": 1,
        "name": "French Food",
        "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.component.html

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

<ul>
  <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.

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.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

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

./src/app/app.component.html

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

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

  <div>
    <label for="address">
      Description
    </label>
    <input id="description" type="text" formControlName="description" />
  </div>

  <div *ngIf="allCategories">
    <br />
    Select categories
    <div *ngFor="let category of allCategories">
      <label>{{ category.name }}</label>
      <input [value]="category.id" type="checkbox" (change)="onCheckChange($event)" />
    </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.

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-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"
    }
  ]
}

# Starter

# Conclusion

Here is how to request your Collection Types in Strapi using Angular. When you create a Collection Type or a Single Type you will have a certain number of REST API endpoints available to interact with.