Integrate Angular with Strapi

These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

What Is Angular?

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:

• Two-way data binding: Automatically synchronizes data between model and view.
• Dependency injection: Manages service dependencies for more modular and testable code.
• Component-based architecture: Promotes reusability and maintainability.

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.

Why Integrate Angular with Strapi

Integrating Angular with Strapi creates a powerful tech stack that addresses common developer challenges. Here’s why this integration works well:

• Customizable Content Types and APIs: Strapi gives you complete control over your data structure. You can tailor content models to fit your Angular app’s needs—whether for a blog, e-commerce site, or complex enterprise system. For more information, check out our guide on building a Strapi content strategy.
• Automatic API Generation: Strapi automatically generates APIs for your content types, so you can focus on building elegant Angular interfaces instead of writing repetitive API code.
• Performance Benefits: Strapi’s headless approach keeps your Angular app fast by loading only the data it needs. To ensure smooth performance, you can optimize data fetching with pagination and filtering as your content grows.
• Efficient Data Consumption: Using Strapi as your headless CMS allows Angular to efficiently consume data, which improves the user experience.
• User-Friendly Content Management: Strapi’s admin panel lets non-technical team members update content independently. Your Angular app pulls content through Strapi’s APIs to create a seamless content-to-presentation workflow.
• Built-in Security: Strapi provides robust authentication and authorization features that integrate smoothly with Angular. Role-based access control ensures that the right permissions are reflected in your app's interface.

How to Integrate Angular with Strapi

Let’s walk through integrating Angular with Strapi to build dynamic, robust, and flexible web applications.

Setting up the Development Environment

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. Install Angular CLI globally:

npm install -g @angular/cli

2. Create a new Angular project:

ng new my-angular-app
cd my-angular-app

3. Install Strapi using NPX:

npx create-strapi-app my-strapi-project --quickstart

4. Create an administrator account: Once Strapi is installed, navigate to http://localhost:1337/admin to set up your admin account.

Configuring Strapi for Angular Integration

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.

1. Set up content types in Strapi:
   • Access the Strapi admin panel.
   • Navigate to Content-Type Builder.
   • Create new collection types as needed for your application.
2. Configure API permissions:
   • Go to Settings > Roles & Permissions.
   • Set appropriate permissions for your content types.
3. Enable CORS for Angular:
   • Open config/middleware.js in your Strapi project.
   • Add the following configuration:

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.

Creating Angular Services for Strapi API

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.

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.

Data Fetching and Management

Here's how to fetch data from Strapi in your Angular components:

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);
      }
    );
  }
}

Deployment Considerations

When you're ready to take your Angular-Strapi application live:

1. Build your Angular application for production:

ng build --configuration production

2. Prepare Strapi for production:

NODE_ENV=production npm run start

(Optionally run 'npm run build' only if your Strapi project defines a custom build script.)

3. Configure environment variables for production, including:
   • Database connection details
   • API keys
   • CORS settings
4. Use a process manager like PM2 to keep your Strapi application running.
5. Set up a reverse proxy (like Nginx) to serve both your Angular application and Strapi API.

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.

Project Example (+ GitHub Project Repo)

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.

Key Implementation: Article Service

The core of our Angular-Strapi integration is the article service:

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=*`);
  }
}

Article List Component

This component displays article titles and summaries:

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.

Strapi Open Office Hours

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.