# Getting Started with Angular
✋ CAUTION
This third-party integration guide might not be up-to-date with Strapi v4. Contributions (opens new window) are most welcome.
This integration guide is following the Quick Start Guide. We assume that you have fully completed its "Hands-on" path, and therefore can consume the API by browsing this url (opens new window).
If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Angular (opens new window) remains the same except that you will not fetch the same content.
# Create a Angular app
Create a basic Angular application using angular CLI (opens new window).
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 (opens new window) and Fetch (opens new window).
# 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 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.
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.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
.
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-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.