Angular Template

CRM App Backend Template
Angular — Schema, API & AI Guide

A production-ready Angular CRM backend schema and Starter Kit on Back4app: Contact, Company, Deal, Activity, pipeline stages, ER diagram, data dictionary, JSON schema, API playground, and a one-click AI Agent prompt to deploy in minutes.

Key Takeaways

On this page you get a production-ready CRM schema, a one-click AI prompt, and step-by-step Angular code — so you can ship a CRM app without building the backend.

  1. Deploy in minutesPaste the AI Agent prompt and get a running app with contacts, companies, deals, and pipeline.
  2. Secure by defaultACLs and role-based access so users see only their assigned deals and data.
  3. Angular-native SDKTyped objects, async/await, offline pinning, and Live Queries for pipeline updates.
  4. REST + GraphQLBoth APIs auto-generated; filter deals by stage, list activities by relatedTo.
  5. Five classes_User (built-in), Company, Contact, Deal (pipeline), Activity (tasks/events).

What Is the Angular CRM App Backend Template?

Back4app is a backend-as-a-service (BaaS) ideal for CRM apps: managed database, real-time sync, role-based access, and SDKs for 13+ technologies. The CRM App Backend Template is a pre-built, production-ready backend schema on Back4app. It gives you five classes (_User, Company, Contact, Deal, Activity), pipeline stages, REST and GraphQL APIs, and a one-click AI Agent prompt — so you can connect a Angular frontend and ship a working CRM app in minutes instead of days. Pick your technology below for step-by-step SDK integration.

Best for:

Sales teamsCRM buildersRapid prototypingField repsMVP launchesTeams choosing a BaaS for CRM

Overview

Angular CRM apps typically use an injectable service to talk to the backend. Back4app's CRM schema is available via the Parse JavaScript SDK; your service calls Parse.Query('Deal').equalTo('stage', stage).find() and exposes results through signals or observables.

The five classes (_User, Company, Contact, Deal, Activity) support pipeline views, contact/company CRUD, and activities. Use Angular guards and interceptors to send the session token; Back4app enforces ACLs so users only see their deals and related data.

Core CRM Features

Angular CRM backend with injectable services and the Parse SDK: contact management, deal pipeline, and activity tracking with signals or observables and ACLs.

Contact management

Store and manage contacts with name, email, phone, company, and notes. Ideal for Angular apps.

Company management

Track companies with name, website, industry, and address. Links to contacts and deals.

Deal pipeline

Sales pipeline with stages, amount, expected close date, and assignment. Built for Angular backends.

Activity tracking

Log calls, emails, meetings, and notes linked to contacts and deals. Works with Angular SDK.

User & permissions

Built-in user model and pointers for ownership and assignment. ACLs out of the box for Angular.

Why Build Your Angular CRM Backend with Back4app?

Back4app gives Angular apps a ready backend so you can focus on services and signals for CRM.

  • Injectable service: Wrap the Parse JavaScript SDK in an injectable service; use signals or observables to expose contacts, deals, and pipeline to components.
  • Auth and guards: Parse.User session works with Angular guards and interceptors; send the session token in HTTP headers.
  • Modern Angular: Fits Angular 18+ with signals and standalone components; same backend for any CRM client.

Ideal for Angular developers building CRM or sales dashboards with injectable services and signals.

Core Benefits

A production-ready CRM backend so you can ship faster and focus on your app.

Ship Faster, No Backend Code

REST & GraphQL APIs and a ready-to-use schema — connect your app and go.

Secure by Default

ACLs and class-level permissions; restrict by assignedTo and createdBy.

Real-Time Pipeline

Live Queries over WebSockets for instant deal and activity updates.

Built-In Auth

User sign-up, login, and session handling out of the box.

Works Offline

Local pinning keeps contacts and deals available offline and syncs when you reconnect.

Deploy in Minutes

Use the AI Agent to create and deploy your CRM app from this template.

Ready to try it?

Let the Back4app AI Agent create your CRM app backend, connect the Angular frontend, and deploy — all from a single prompt.

Free to start — 50 AI Agent prompts/month, no credit card required

Technical Stack

Everything powering this CRM app template at a glance.

Frontend
Angular
Backend
Back4app
Database
MongoDB
Auth
Auth & Access Control
APIs
REST & GraphQL
Deployment
AI Agent / Dashboard

ER Diagram

Entity-Relationship diagram for the Angular CRM app data model.

View diagram source
Mermaid
erDiagram
    _User {
        String objectId PK
        String username
        String email
        String password
        Date createdAt
        Date updatedAt
    }

    Company {
        String objectId PK
        String name
        String website
        String industry
        String address
        String notes
        Pointer createdBy FK
        Date createdAt
        Date updatedAt
    }

    Contact {
        String objectId PK
        String name
        String email
        String phone
        Pointer company FK
        String notes
        Pointer createdBy FK
        Date createdAt
        Date updatedAt
    }

    Deal {
        String objectId PK
        String title
        Number amount
        String stage
        Pointer contact FK
        Pointer company FK
        Date expectedCloseDate
        String notes
        Pointer assignedTo FK
        Date createdAt
        Date updatedAt
    }

    Activity {
        String objectId PK
        String type
        String subject
        String description
        Date dueDate
        Date completedAt
        Pointer relatedTo FK
        Pointer createdBy FK
        Date createdAt
        Date updatedAt
    }

    Company ||--o{ Contact : "has"
    Company ||--o{ Deal : "has"
    Contact ||--o{ Deal : "has"
    _User ||--o{ Deal : "assignedTo"
    _User ||--o{ Activity : "createdBy"
    Contact ||--o{ Activity : "relatedTo"
    Deal ||--o{ Activity : "relatedTo"
    _User ||--o{ Company : "createdBy"
    _User ||--o{ Contact : "createdBy"

Integration Flow

Auth-to-CRUD sequence: how your Angular app talks to Back4app — login, then query contacts and deals, update pipeline.

View diagram source
Mermaid
sequenceDiagram
  participant User
  participant App as Angular App
  participant Back4app as Back4app Cloud

  User->>App: Login
  App->>Back4app: Parse.User.logIn(username, password)
  Back4app-->>App: Session token
  App-->>User: Logged in

  User->>App: Load contacts and deals
  App->>Back4app: new Parse.Query('Deal').find() or Parse.Query('Contact').find()
  Back4app-->>App: List of Deal / Contact
  App-->>User: Show pipeline

  User->>App: Create deal or contact
  App->>Back4app: deal.save() or contact.save()
  Back4app-->>App: Deal (objectId)
  App-->>User: Updated list

Data Dictionary

Complete field reference for every class in the schema.

FieldTypeDescriptionRequired
objectIdStringAuto-generated unique identifierauto
nameStringFull name of the contact
emailStringEmail address
phoneStringPhone number
companyPointer<Company>Company this contact belongs to
notesStringFree-form notes
createdByPointer<_User>User who created this contact
createdAtDateAuto-generated creation timestampauto
updatedAtDateAuto-generated last-update timestampauto

9 fields in Contact

Security & Permissions

How ownership, ACLs, and class-level permissions protect data in this CRM schema.

Row-Level ACLs

Use ACLs and pointers (assignedTo, createdBy) so users only see and edit their assigned deals and related data.

Class-Level Permissions

CLPs restrict which roles or users can create, read, update, or delete objects at the class level.

Pointer-Based Ownership

Deal.assignedTo and Activity.createdBy link to _User; Cloud Code can enforce visibility and edits by role.

Schema (JSON)

Raw JSON schema definition — copy and use in your Back4app app or import via the API.

JSON
{
  "classes": [
    {
      "className": "Contact",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "name": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": false
        },
        "phone": {
          "type": "String",
          "required": false
        },
        "company": {
          "type": "Pointer",
          "targetClass": "Company",
          "required": false
        },
        "notes": {
          "type": "String",
          "required": false
        },
        "createdBy": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Company",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "name": {
          "type": "String",
          "required": true
        },
        "website": {
          "type": "String",
          "required": false
        },
        "industry": {
          "type": "String",
          "required": false
        },
        "address": {
          "type": "String",
          "required": false
        },
        "notes": {
          "type": "String",
          "required": false
        },
        "createdBy": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Deal",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "amount": {
          "type": "Number",
          "required": false
        },
        "stage": {
          "type": "String",
          "required": false
        },
        "contact": {
          "type": "Pointer",
          "targetClass": "Contact",
          "required": false
        },
        "company": {
          "type": "Pointer",
          "targetClass": "Company",
          "required": false
        },
        "expectedCloseDate": {
          "type": "Date",
          "required": false
        },
        "notes": {
          "type": "String",
          "required": false
        },
        "assignedTo": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Activity",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "type": {
          "type": "String",
          "required": false
        },
        "subject": {
          "type": "String",
          "required": false
        },
        "description": {
          "type": "String",
          "required": false
        },
        "dueDate": {
          "type": "Date",
          "required": false
        },
        "completedAt": {
          "type": "Date",
          "required": false
        },
        "relatedTo": {
          "type": "Pointer",
          "required": false
        },
        "createdBy": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "_User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

Build with AI Agent

Use the Back4app AI Agent to build a real CRM app from this template: it will create the frontend, the backend (this schema, auth, and APIs), and deploy it — no manual setup. The prompt below describes this CRM stack so the Agent can generate a production-ready app in one go.

Back4app AI Agent
Ready to build
Create a CRM app on Back4app with this exact schema and behavior.

Schema:
1. _User (use Back4app built-in): username (String, required), email (String, required), password (String, required); objectId, createdAt, updatedAt (system).
2. Company: name (String, required), website (String), industry (String), address (String), notes (String), createdBy (Pointer to _User); objectId, createdAt, updatedAt (system).
3. Contact: name (String, required), email (String), phone (String), company (Pointer to Company), notes (String), createdBy (Pointer to _User); objectId, createdAt, updatedAt (system).
4. Deal: title (String, required), amount (Number), stage (String; e.g. lead, qualified, proposal, negotiation, won, lost), contact (Pointer to Contact), company (Pointer to Company), expectedCloseDate (Date), notes (String), assignedTo (Pointer to _User); objectId, createdAt, updatedAt (system).
5. Activity: type (String; e.g. call, email, meeting, note), subject (String), description (String), dueDate (Date), completedAt (Date), relatedTo (Pointer to Contact or Deal), createdBy (Pointer to _User); objectId, createdAt, updatedAt (system).

Security:
- Set ACLs so only authenticated users can access data; use role-based or owner-based rules where appropriate (e.g. assignedTo, createdBy).
- Use Class-Level Permissions so only authenticated users can create/read/update/delete these classes.

Auth:
- Sign-up (username, email, password) and login; support logout/session.

Behavior:
- Full CRUD for Company, Contact, Deal, and Activity.
- List deals with filter by stage and order by expectedCloseDate or updatedAt (pipeline view).
- List activities by relatedTo (Contact or Deal).
- Optional: real-time Live Queries for Deal and Activity for dashboard/pipeline updates.
- Optional: offline pinning for mobile (Contacts, Deals, Activities).

Deliver:
- Create the Back4app app with the schema above, ACLs, and any Cloud Code needed.
- Generate the frontend and connect it to this backend; deploy so the app is runnable end-to-end.

Press the button below to open the Agent with this template's prompt pre-filled.

Deploy in minutes50 free prompts / monthNo credit card required

API Playground

Try the REST and GraphQL endpoints for the CRM schema. Responses from the example data above — no Back4app account needed.

Loading playground…

Uses the same CRM schema (Contact, Company, Deal, Activity) as this template.

Step-by-Step Angular Integration

Connect to your Back4app backend from a Angular app using the Back4app Angular SDK.

  1. Step 1: Install Back4app Angular SDK

    Add the Back4app SDK for your stack (e.g. npm, pubspec, or package manager).

    Bash
    npm install parse
  2. Step 2: Initialize Back4app in your app

    Initialize the Back4app SDK at app startup with your App ID and server URL.

    JavaScript
    // app.config.ts or main.ts
    import Parse from 'parse';
    
    Parse.initialize(
      environment.parseAppId,
      environment.parseJsKey,
      { serverURL: 'https://parseapi.back4app.com' }
    );
    Parse.serverURL = 'https://parseapi.back4app.com';
  3. Step 3: Query contacts and deals

    Use the SDK to fetch Contact and Deal objects; filter deals by stage for the pipeline.

    JavaScript
    // In CrmService
    async getDeals(stage = 'qualified'): Promise<Parse.Object[]> {
      const query = new Parse.Query('Deal');
      query.equalTo('stage', stage);
      query.ascending('expectedCloseDate');
      return await query.find();
    }
    async getContacts(): Promise<Parse.Object[]> {
      const query = new Parse.Query('Contact');
      return await query.find();
    }
  4. Step 4: Create a contact or deal

    Create a new Contact or Deal with the required fields and pointers (company, contact, assignedTo), then save.

    JavaScript
    async createDeal(title: string, stage = 'lead', amount?: number): Promise<Parse.Object> {
      const Deal = Parse.Object.extend('Deal');
      const deal = new Deal();
      deal.set('title', title);
      deal.set('stage', stage);
      if (amount != null) deal.set('amount', amount);
      await deal.save();
      return deal;
    }
    async createContact(name: string, email?: string, phone?: string): Promise<Parse.Object> {
      const Contact = Parse.Object.extend('Contact');
      const contact = new Contact();
      contact.set('name', name);
      if (email) contact.set('email', email);
      if (phone) contact.set('phone', phone);
      await contact.save();
      return contact;
    }
  5. Step 5: Update deal stage and activities

    Update Deal.stage when moving in the pipeline; create and list Activity by relatedTo.

    JavaScript
    async updateDealStage(objectId: string, stage: string) {
      const query = new Parse.Query('Deal');
      const deal = await query.get(objectId);
      deal.set('stage', stage);
      await deal.save();
    }
    async deleteDeal(objectId: string) {
      const query = new Parse.Query('Deal');
      const deal = await query.get(objectId);
      await deal.destroy();
    }

State Management Integration

Integrate the Back4app SDK with your app's state layer (e.g. context, store, or services) for pipeline and contact state.

Full Data Model

Copy a complete CRM model for type-safe serialization (e.g. class, interface, or type definition).

JavaScript
// models/crm.model.ts
export interface Deal {
  objectId?: string;
  title: string;
  amount?: number;
  stage?: string;
  expectedCloseDate?: string;
  contact?: { __type: string; className: string; objectId: string };
  company?: { __type: string; className: string; objectId: string };
  assignedTo?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

export interface Contact {
  objectId?: string;
  name: string;
  email?: string;
  phone?: string;
  company?: { __type: string; className: string; objectId: string };
  notes?: string;
  createdAt?: string;
  updatedAt?: string;
}

export function toDeal(obj: Parse.Object): Deal {
  return {
    objectId: obj.id,
    title: obj.get('title'),
    amount: obj.get('amount'),
    stage: obj.get('stage'),
    expectedCloseDate: obj.get('expectedCloseDate')?.toISOString?.() ?? undefined,
    contact: obj.get('contact'),
    company: obj.get('company'),
    assignedTo: obj.get('assignedTo'),
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}
export function toContact(obj: Parse.Object): Contact {
  return {
    objectId: obj.id,
    name: obj.get('name'),
    email: obj.get('email'),
    phone: obj.get('phone'),
    company: obj.get('company'),
    notes: obj.get('notes'),
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

Frequently Asked Questions

Common questions about the CRM app backend template.

What is Back4app?
Why use Back4app for an Angular CRM app?
How do I query deals by stage in Angular?
How do I assign deals to the current user?

Trusted by developers worldwide

Join the community building the future of apps

G2 Users Love Us Badge

Ready to Build Your CRM App?

Start your Angular project in minutes. No credit card required.

Build with AI Agent