# 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
Copied to clipboard!
# 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).
yarn add axios
Copied to clipboard!
# 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 with axios
import axios from 'axios'; axios.get('http://localhost:1337/api/restaurants').then(response => { console.log(response); });
Copied to clipboard!
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" } ] } ]
Copied to clipboard!
# Example
./src/app/app.component.ts
import { Component, OnInit } from '@angular/core'; import axios from 'axios'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { title = 'angular-app'; restaurants = []; error = null; async ngOnInit() { try { const response = await axios.get('http://localhost:1337/api/restaurants'); this.restaurants = response.data; } catch (error) { this.error = error; } } }
Copied to clipboard!
./src/app/app.component.html
<div *ngIf="error"> {{ error }} </div> <ul> <li *ngFor="let restaurant of restaurants">{{ restaurant['name'] }}</li> </ul>
Copied to clipboard!
# 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
import axios from 'axios'; axios .post('http://localhost:1337/api/restaurants', { name: 'Dolemon Sushi', description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious', categories: [3], }) .then(response => { console.log(response); });
Copied to clipboard!
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" } ] }
Copied to clipboard!
# 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 {}
Copied to clipboard!
./src/app/app.component.ts
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormArray, FormControl } from '@angular/forms'; import axios from 'axios' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { modifiedData; constructor( private formBuilder: FormBuilder, ) { this.modifiedData = this.formBuilder.group({ name: '', description: '', categories: new FormArray([]), }); } onCheckChange(event) { const formArray: FormArray = this.modifiedData.get('categories') as FormArray; if (event.target.checked) { formArray.push(new FormControl(event.target.value)); } else { let i: number = 0; formArray.controls.forEach((ctrl: FormControl) => { if (ctrl.value == event.target.value) { formArray.removeAt(i); return; } i++; }); } } title = 'angular-app'; allCategories = []; error = null; async ngOnInit() { try { const response = await axios.get('http://localhost:1337/api/categories'); this.allCategories = response.data } catch (error) { this.error = error } console.log(this.allCategories); } async onSubmit(restaurantData) { try { const response = await axios.post( 'http://localhost:1337/api/restaurants', restaurantData ); console.log(response); } catch (error) { this.error = error; } this.modifiedData.reset(); } }
Copied to clipboard!
./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>
Copied to clipboard!
# 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 with axios
import axios from 'axios'; axios .put('http://localhost:1337/api/restaurants/2', { categories: [2], }) .then(response => { console.log(response); });
Copied to clipboard!
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" } ] }
Copied to clipboard!
# 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.