Quickstarters
How to Build a Basic CRUD App with Angular?

41min
Introduction
In this guide, we will walk you through the process of constructing a basic CRUD (Create, Read, Update, Delete) application using Angular. 
You’ll learn how to develop an application that efficiently manages data operations by leveraging Angular’s robust framework. 
To start, you'll create and configure a new Back4app project titled Basic-CRUD-App-Angular, which will serve as the backbone of your backend data management.
Next, you'll design a scalable database model by outlining detailed collections and fields—either manually or with the assistance of the Back4app AI Agent. This step guarantees that your system is well-prepared to handle all CRUD functionalities.
After setting up your schema, you will explore the Back4app Admin App, an intuitive drag-and-drop interface, to easily manage your collections and records.
Finally, you will integrate your Angular frontend with Back4app using REST/GraphQL (or the Parse SDK, if preferred), while also implementing advanced security measures to safeguard your backend.
By the end of this tutorial, you will have built a production-ready Angular application featuring user authentication and comprehensive CRUD capabilities.
Key Takeaways
Master how to construct CRUD applications that handle data efficiently with a reliable backend.
Gain practical insights into creating a scalable data model and linking it to an Angular frontend.
Learn how to utilize the Back4app Admin App’s user-friendly interface for effortless data management.
Understand deployment strategies, including Docker containerization, to rapidly launch your Angular app.
﻿
Prerequisites
Before you begin, please ensure you have the following:
A Back4app account with a new project setup.
Need help? Check out Getting Started with Back4app.
An Angular development environment.
Install Angular CLI by running npm install -g @angular/cli and create a new project using ng new. Make sure Node.js (version 14 or above) is installed.
A basic understanding of TypeScript, Angular, and REST APIs.
For a refresher, visit the Angular documentation.
﻿
Step 1 – Setting Up Your Project
Launching a New Back4app Project
Sign in to your Back4app account.
Click the “New App” button from your dashboard.
Enter the project name: Basic-CRUD-App-Angular and follow the setup prompts.
Create New Project
﻿
Once the project is created, it will appear on your Back4app dashboard, providing a strong foundation for your backend configuration.
﻿
Step 2 – Crafting Your Database Schema
Constructing Your Data Model
For this CRUD application, you will define several collections. Below are examples of the collections and their fields that will form the basis of your database schema. These collections empower the application to perform essential CRUD operations.
1. Items Collection
This collection stores information for each item.
Field
Data Type
Details
_id
ObjectId
Auto-generated unique identifier.
title
String
The title of the item.
description
String
A brief summary of the item.
created_at
Date
Timestamp for when the item was added.
updated_at
Date
Timestamp for the latest update.
2. Users Collection
This collection maintains user credentials and authentication data.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
username
String
A unique identifier for the user.
email
String
A distinct email address.
password_hash
String
Securely hashed password for authentication.
created_at
Date
Timestamp indicating when the account was created.
updated_at
Date
Timestamp of the most recent update.
You can set up these collections manually in the Back4app dashboard by creating a new class for each and adding columns to define the fields.
Create New Class
﻿
Add columns by choosing a data type, naming the field, setting a default value, and marking whether it is required.
Create Column
﻿
﻿
Leveraging the Back4app AI Agent for Schema Setup
The Back4app AI Agent is a versatile tool available in your dashboard that allows you to automatically generate your database schema based on a descriptive prompt. This feature saves time and ensures that your backend is perfectly tailored for CRUD operations.
Steps to Use the AI Agent:
Open the AI Agent:
Log in to your Back4app dashboard and find the AI Agent option.
Describe Your Schema:
Input a detailed prompt outlining the collections and fields you need.
Review and Confirm:
After submission, review the generated schema and apply it to your project.
Sample Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
This AI-powered approach streamlines the process and ensures a consistent, optimized schema.
﻿
Step 3 – Activating the Admin App & Managing CRUD Operations
A Glimpse at the Admin App
The Back4app Admin App provides a no-code, drag-and-drop interface that allows you to manage your backend data effortlessly. 
With it, you can easily perform CRUD operations such as adding, viewing, modifying, and deleting records.
Activating the Admin App
Navigate to the “More” menu in your Back4app dashboard.
Select “Admin App” and click “Enable Admin App.”
Set Up Your Admin Credentials:
Create your initial admin user, which will also configure roles (e.g., B4aAdminUser) and system collections.
Enable Admin App
﻿
After activation, log into the Admin App to manage your collections and records.
Admin App Dashboard
﻿
Utilizing the Admin App for CRUD Tasks
Within the Admin App, you can:
Add New Records: Click “Add Record” in any collection (e.g., Items) to create new entries.
View & Edit Records: Select a record to see its details or update its fields.
Remove Records: Use the delete option to remove outdated records.
This intuitive interface greatly simplifies the management of your backend data.
﻿
Step 4 – Connecting Your Angular Frontend to Back4app
Now that your backend is fully set up and managed through the Admin App, it’s time to link your Angular frontend to Back4app.
Option A: Integrating the Parse SDK with Angular
Install the Parse SDK:
Bash
npm install parse
npm install parse
﻿
Set Up Parse in Your Angular Project:
Create a configuration file (e.g., src/app/parse-config.ts):
TypeScript
// src/app/parse-config.ts
import Parse from 'parse';
// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/app/parse-config.ts
import Parse from 'parse';
// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
﻿
Text

3. **Implement Parse in an Angular Component:**  
For example, create a component to fetch and display items:

```typescript
// src/app/components/items-list/items-list.component.ts
import { Component, OnInit } from '@angular/core';
import Parse from '../../parse-config';

@Component({
selector: 'app-items-list',
templateUrl: './items-list.component.html',
styleUrls: ['./items-list.component.css']
})
export class ItemsListComponent implements OnInit {
items: any[] = [];

async ngOnInit() {
 const Items = Parse.Object.extend('Items');
 const query = new Parse.Query(Items);
 try {
   const results = await query.find();
   this.items = results;
 } catch (error) {
   console.error('Error retrieving items:', error);
 }
}
}

3. **Implement Parse in an Angular Component:**  
For example, create a component to fetch and display items:

```typescript
// src/app/components/items-list/items-list.component.ts
import { Component, OnInit } from '@angular/core';
import Parse from '../../parse-config';

@Component({
selector: 'app-items-list',
templateUrl: './items-list.component.html',
styleUrls: ['./items-list.component.css']
})
export class ItemsListComponent implements OnInit {
items: any[] = [];

async ngOnInit() {
 const Items = Parse.Object.extend('Items');
 const query = new Parse.Query(Items);
 try {
   const results = await query.find();
   this.items = results;
 } catch (error) {
   console.error('Error retrieving items:', error);
 }
}
}
﻿
And in the HTML template (items-list.component.html):
HTML
<div>
<h2>Items</h2>
<ul>
 <li *ngFor="let item of items">
   {{ item.get('title') }} – {{ item.get('description') }}
 </li>
</ul>
</div>
<div>
<h2>Items</h2>
<ul>
 <li *ngFor="let item of items">
   {{ item.get('title') }} – {{ item.get('description') }}
 </li>
</ul>
</div>
﻿
Option B: Utilizing REST or GraphQL
If you prefer not to use the Parse SDK, you can execute CRUD operations via REST or GraphQL. For example, to fetch items using REST in Angular, create a service method like this:
TypeScript
// src/app/services/items.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ItemsService {
  private apiUrl = 'https://parseapi.back4app.com/classes/Items';

  constructor(private http: HttpClient) { }

  getItems(): Observable<any> {
    const headers = new HttpHeaders({
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    });
    return this.http.get(this.apiUrl, { headers });
  }
}
// src/app/services/items.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ItemsService {
  private apiUrl = 'https://parseapi.back4app.com/classes/Items';

  constructor(private http: HttpClient) { }

  getItems(): Observable<any> {
    const headers = new HttpHeaders({
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    });
    return this.http.get(this.apiUrl, { headers });
  }
}
﻿
You can integrate these API calls within your Angular components as needed.
﻿
Step 5 – Protecting Your Backend
Implementing Access Control Lists (ACLs)
Enhance your data security by assigning ACLs to your objects. For example, to create an item accessible only by its owner:
TypeScript
async function createSecureItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Assign ACL: only the owner has read/write access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Secure item created:', savedItem);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
async function createSecureItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Assign ACL: only the owner has read/write access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Secure item created:', savedItem);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust the CLPs for each collection to set default access rules, ensuring that only authenticated or authorized users can access sensitive data.
﻿
Step 6 – Managing User Authentication
Creating and Handling User Accounts
Back4app utilizes Parse’s User class to manage authentication. In your Angular project, you can handle user registration and login as follows:
TypeScript
// src/app/components/auth/auth.component.ts
import { Component } from '@angular/core';
import Parse from '../../parse-config';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp(event: Event) {
    event.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registration successful!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
// src/app/components/auth/auth.component.ts
import { Component } from '@angular/core';
import Parse from '../../parse-config';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp(event: Event) {
    event.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registration successful!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
﻿
And the corresponding HTML template (auth.component.html):
HTML
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
<form (submit)="signUp($event)">
  <input type="text" placeholder="Username" [(ngModel)]="username" name="username" required />
  <input type="password" placeholder="Password" [(ngModel)]="password" name="password" required />
  <input type="email" placeholder="Email" [(ngModel)]="email" name="email" required />
  <button type="submit">Register</button>
</form>
﻿
A similar approach can be applied for user login and session management. For features such as social logins or password resets, adjust your settings in the Back4app dashboard.
﻿
Step 7 – Deploying Your Angular Frontend
Back4app’s Web Deployment feature enables you to host your Angular application by deploying code directly from a GitHub repository. In this section, you'll prepare your production build, commit your source code, and integrate your repository for deployment.
7.1 Building Your Production Version
Open your project directory in a terminal.
Run the production build command:
Bash
ng build --prod
ng build --prod
﻿
This command compiles your Angular application into an optimized dist/ folder.
Verify the Build:
Ensure that the dist/ directory contains the index.html and all necessary assets.
7.2 Structuring and Uploading Your Source Code
Your repository should contain your entire Angular project. A typical file structure might look like:
Text
Basic-CRUD-App-Angular/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── components/
│   │       ├── auth/
│   │       │   ├── auth.component.ts
│   │       │   └── auth.component.html
│   │       └── items-list/
│   │           ├── items-list.component.ts
│   │           └── items-list.component.html
├── angular.json
├── package.json
└── README.md
Basic-CRUD-App-Angular/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── components/
│   │       ├── auth/
│   │       │   ├── auth.component.ts
│   │       │   └── auth.component.html
│   │       └── items-list/
│   │           ├── items-list.component.ts
│   │           └── items-list.component.html
├── angular.json
├── package.json
└── README.md
﻿
Example: src/app/parse-config.ts
TypeScript
// src/app/parse-config.ts
import Parse from 'parse';
// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/app/parse-config.ts
import Parse from 'parse';
// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Example: src/app/app.component.ts
TypeScript
import { Component } from '@angular/core';
import Parse from './parse-config';

@Component({
  selector: 'app-root',
  template: `
    <div style="padding: 2rem;">
      <h1>Items</h1>
      <app-items-list></app-items-list>
    </div>
  `,
  styles: []
})
export class AppComponent { }
import { Component } from '@angular/core';
import Parse from './parse-config';

@Component({
  selector: 'app-root',
  template: `
    <div style="padding: 2rem;">
      <h1>Items</h1>
      <app-items-list></app-items-list>
    </div>
  `,
  styles: []
})
export class AppComponent { }
﻿
Committing Your Code to GitHub
Initialize a Git repository in your project folder if you haven’t already:
Bash
git init
git init
﻿
Add your project files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit for Angular frontend"
git commit -m "Initial commit for Angular frontend"
﻿
Create a GitHub repository:
For instance, name it Basic-CRUD-App-Angular.
Push your code to GitHub:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Angular.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Angular.git
git push -u origin main
﻿
7.3 Linking Your GitHub Repository with Web Deployment
Access the Web Deployment feature:
Log in to your Back4app dashboard, select your project (Basic-CRUD-App-Angular), and choose Web Deployment.
Connect Your GitHub Account:
Follow the prompts to integrate your GitHub account, allowing Back4app to access your repository.
Select Your Repository and Branch:
Choose your repository (e.g., Basic-CRUD-App-Angular) and the branch (e.g., main) that contains your code.
7.4 Configuring Your Deployment Settings
Provide the necessary configuration details:
Build Command:
If your repository lacks a pre-built dist/ folder, specify the build command (e.g., ng build --prod).
Output Directory:
Set the output directory to dist/your-project-name so Back4app knows where your static files are located.
Environment Variables:
Add any required environment variables (such as API keys) in the deployment configuration.
7.5 Containerizing Your Angular Application with Docker
If you prefer a Docker-based deployment, include a Dockerfile in your repository. For example:
Dockerfile
# Use an official Node image to build the Angular app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the application and build it
COPY . .
RUN npm run build --prod

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/dist/your-project-name /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image to build the Angular app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the application and build it
COPY . .
RUN npm run build --prod

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/dist/your-project-name /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Include this Dockerfile in your repository, then select the Docker deployment option in Back4app’s Web Deployment settings.
7.6 Launching Your Application
Click the Deploy Button:
Once your deployment settings are configured, click Deploy.
Monitor the Deployment Process:
Back4app will pull your code, execute the build command if needed, and deploy your Angular app.
Retrieve Your URL:
After a successful deployment, Back4app will provide a URL where your application is live.
7.7 Testing Your Deployed Application
Visit the Provided URL:
Open the URL in your browser.
Verify Functionality:
Ensure that your Angular app loads properly, all routes function as expected, and assets are served correctly.
Troubleshoot if Necessary:
Use browser developer tools to identify and resolve any issues. Check Back4app’s deployment logs and your configuration if problems arise.
﻿
Step 8 – Wrapping Up and Future Directions
Congratulations! You have successfully built a basic CRUD application using Angular and Back4app. 
You set up a project named Basic-CRUD-App-Angular, designed comprehensive database collections for Items and Users, and managed your data using the intuitive Admin App. 
Additionally, you connected your Angular frontend to your backend and implemented robust security measures.
Next Steps:
Enhance Your Frontend:
Extend your Angular application with advanced features such as detailed item views, search functionality, and real-time updates.
Expand Functionality:
Consider integrating additional backend logic (like Cloud Functions) or implementing role-based access control.
Explore Further Resources:
Check out the Back4app documentation and other Angular resources to deepen your understanding.
With this guide, you are now equipped to build robust, scalable CRUD backends for your Angular applications using Back4app. Happy coding!
Field	Data Type	Details
_id	ObjectId	Auto-generated unique identifier.
title	String	The title of the item.
description	String	A brief summary of the item.
created_at	Date	Timestamp for when the item was added.
updated_at	Date	Timestamp for the latest update.
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
username	String	A unique identifier for the user.
email	String	A distinct email address.
password_hash	String	Securely hashed password for authentication.
created_at	Date	Timestamp indicating when the account was created.
updated_at	Date	Timestamp of the most recent update.
Updated 13 Feb 2025
Did this page help you?
How to Build a Basic CRUD App with Next.js?
How to Build a CRUD App with ReactJS?