These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.
Angular is a TypeScript-based, open-source web application framework developed by Google. It’s designed to build dynamic, single-page web applications (SPAs) with a scalable, modular approach.
Key features include:
Angular provides tools for routing, form handling, HTTP communication, and unit testing. It uses HTML for templating and extends it with directives and custom components.
The Angular CLI (Command Line Interface) simplifies project setup, development, and deployment, which makes Angular a comprehensive solution for front-end development.
Integrating Angular with Strapi creates a powerful tech stack that addresses common developer challenges. Here’s why this integration works well:
Let’s walk through integrating Angular with Strapi to build dynamic, robust, and flexible web applications.
Start by setting up both Angular and Strapi in your development environment. If you're new to TypeScript (used by Angular), consider learning it quickly to get up to speed.
1
npm install -g @angular/cli
1
2
ng new my-angular-app
cd my-angular-app
1
npx create-strapi-app my-strapi-project --quickstart
When setting up Strapi, remember the key factors in choosing a headless CMS to ensure it meets your project's needs. Follow these steps to ensure Strapi works effectively with your Angular application.
config/middleware.js
in your Strapi project. 1
2
3
4
5
6
7
8
module.exports = {
settings: {
cors: {
enabled: true,
origin: ['http://localhost:4200']
}
}
};
Depending on your API architecture, you may want to choose between REST and GraphQL. For a deeper understanding, check out this article on GraphQL vs REST.
Create a service to communicate with Strapi from your Angular application. In this section, we'll utilize TypeScript for Angular to create a service that communicates with Strapi.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class StrapiService {
private apiUrl = 'http://localhost:1337';
constructor(private http: HttpClient) { }
getContentType(contentType: string): Observable<any> {
return this.http.get(`${this.apiUrl}/api/${contentType}`);
}
getSingleItem(contentType: string, id: number): Observable<any> {
return this.http.get(`${this.apiUrl}/api/${contentType}/${id}`);
}
createItem(contentType: string, data: any): Observable<any> {
return this.http.post(`${this.apiUrl}/api/${contentType}`, { data });
}
updateItem(contentType: string, id: number, data: any): Observable<any> {
return this.http.put(`${this.apiUrl}/api/${contentType}/${id}`, { data });
}
deleteItem(contentType: string, id: number): Observable<any> {
return this.http.delete(`${this.apiUrl}/api/${contentType}/${id}`);
}
}
Our service uses TypeScript's features, such as classes and typing. Understanding TypeScript interfaces can be very beneficial for better code maintainability.
Here's how to fetch data from Strapi in your Angular components:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { Component, OnInit } from '@angular/core';
import { StrapiService } from './strapi.service';
@Component({
selector: 'app-content-list',
template: `
<div *ngFor="let item of contentItems">
<h2>{{ item.attributes.title }}</h2>
<p>{{ item.attributes.description }}</p>
</div>
`
})
export class ContentListComponent implements OnInit {
contentItems: any[] = [];
constructor(private strapiService: StrapiService) {}
ngOnInit(): void {
this.strapiService.getContentType('articles').subscribe(
(response) => {
this.contentItems = response.data;
},
(error) => {
console.error('Error fetching content:', error);
}
);
}
}
When you're ready to take your Angular-Strapi application live:
1
ng build --configuration production
1
2
3
NODE_ENV=production npm run start
(Optionally run 'npm run build' only if your Strapi project defines a custom build script.)
These steps will help you create a solid integration between Angular and Strapi. This setup combines Strapi’s powerful content management with Angular’s dynamic front-end capabilities, providing a strong foundation for building modern web applications.
Let’s examine a simple news app built with Angular and Strapi. This project demonstrates how to fetch and display articles from a Strapi back-end within an Angular application.
The core of our Angular-Strapi integration is the article service:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ArticleService {
private apiUrl = 'http://localhost:1337/api/articles';
constructor(private http: HttpClient) {}
getArticles(): Observable<any> {
return this.http.get(this.apiUrl);
}
getArticleById(id: string): Observable<any> {
return this.http.get(`${this.apiUrl}/${id}?populate=*`);
}
}
This component displays article titles and summaries:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Component, OnInit } from '@angular/core';
import { ArticleService } from '../services/article.service';
@Component({
selector: 'app-article-list',
template: `
<div class="articles">
<div *ngFor="let article of articles" class="article-card">
<h2>{{ article.attributes.title }}</h2>
<p>{{ article.attributes.summary }}</p>
<a [routerLink]="['/article', article.id]">Read more</a>
</div>
</div>
`
})
export class ArticleListComponent implements OnInit {
articles: any[] = [];
constructor(private articleService: ArticleService) {}
ngOnInit(): void {
this.articleService.getArticles().subscribe(response => {
this.articles = response.data;
});
}
}
Check out our GitHub repository for the complete implementation, including authentication, pagination, and advanced querying. This repo provides best practices for Angular-Strapi integration that you can adapt for your own content-driven applications.
For additional examples, check out our guide on building a movie app with Angular and Strapi, which showcases the integration in a different context.
If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.
For more details, visit the Strapi documentation and the Angular documentation.