Angular 19 Guide: Building a CRUD Application with REST API [2025 Update]

Angular 19 Guide: Building a CRUD Application with REST API [2025 Update]

This guide is tailored for developers aiming to leverage Angular 19 in 2025 to build front-end applications that interact with back-end REST APIs. If you prefer to avoid setting up a traditional backend, you can simulate the REST API using JSON-Server. This post will demonstrate this approach in the first part of the tutorial.

Angular 19 CRUD Guide: Part 1

In this first part, we will guide you step-by-step through creating a simple CRUD (Create, Read, Update, Delete) application. You will not only learn how to set up a new Angular 19 project but also get a hands-on understanding of core Angular features such as components, services, and HttpClient.

No Need for a Backend REST API Server

For those of you who would rather skip the complexities of setting up a traditional backend, this tutorial will show you how to mock the backend API using JSON-Server.

With JSON-Server, you can quickly create a mock API that behaves like a real REST API, allowing you to focus purely on the front-end development of your application without worrying about back-end infrastructure. This is especially useful for testing and prototyping purposes.

We’ll demonstrate how to:

  • Set up JSON-Server to simulate a REST API.
  • Populate it with sample data.
  • Configure the Angular 19 app to interact with this mock API.

Once your mock API is up and running, you’ll be able to send and receive data (such as creating and fetching accounts, contacts, and activities) through your Angular 19 app.

Note: For those interested in consuming a third-party REST API, check out this tutorial on how to integrate external APIs into your Angular app using HttpClient.

Key Concepts You’ll Learn

This is a beginner-level tutorial, ideal for developers who are new to Angular 19. In this first part, you will master:

  • Installing Angular CLI 19 and creating a new Angular project.
  • Using Angular CLI to generate components and set up your application structure.
  • Understanding the Component-based architecture of Angular 19 applications.
  • The new approach for configuring HttpClient to be able to interact with a REST API, by making GET, POST, PUT, and DELETE requests.

By the end of this tutorial, you’ll be able to build a real-world CRUD application and gain the skills needed to develop modern web apps with Angular 19 and REST APIs.

Prerequisites

To follow this tutorial, you'll need:

  • Node.js and npm installed on your system, as they are required by Angular CLI.
  • Familiarity with TypeScript.

If you meet these prerequisites, you're ready to start!

Mocking the REST API with json-server

If you prefer not to use a real back-end server, you can mock the REST API using json-server.

First, install json-server:

$ npm install -g json-server

Next, create a folder for your server and a JSON file (data.json) with the following content:

{
    "users":[
        {
            "id": 1,
            "first_name": "Robert",
            "last_name": "Schwartz",
            "email": "[email protected]"
        }

    ],
    "accounts": [
        {
            "id": 1,
            "name": "",
            "email":"",
            "phone": "",
            "industry": "",
            "website": "",
            "description": "",
            "createdBy": 1,
            "createdAt": "",
            "isActive": true
        }
    ],
    "contacts": [
        {
            "id": 1,
            "first_name": "",
            "last_name": "",
            "account": 1,
            "status":1,
            "source": 1,
            "email": "",
            "phone": "",
            "address": "",
            "description": "",
            "createdBy": 1,
            "createdAt": "",
            "isActive": true
        }
    ],
    "activities": [
        {
            "id": 1,
            "description": "",
            "createdAt" : "",
            "contact": 1,
            "status": 1
        }
    ],
    "contactsources": [
        {
            "id":1,
            "source": ""
        }
    ],
    "contactstatuses": [
        {
            "id":1,
            "status": ""
        }
    ],
    "activitystatuses":[
        {
            "id":1,
            "status": ""
        }
    ]
}

Feel free to add your own data or use a tool like Faker.js to generate fake data.

Start the JSON server:

$ json-server --watch data.json

Your REST API server will run at http://localhost:3000.

You'll have the following resources exposed:

  • http://localhost:3000/users

  • http://localhost:3000/accounts

  • http://localhost:3000/contacts

  • http://localhost:3000/activities

  • http://localhost:3000/contactsources

  • http://localhost:3000/contactstatuses

  • http://localhost:3000/activitystatuses

Here is what each endpoint does:

  • /accounts: create or read a paginated list of accounts
  • /accounts/: read, update or delete an account
  • /contacts: create or read a paginated list of contacts
  • /contacts/: read, update or delete a contact
  • /activities: create or read a paginated list of activities
  • /activities/: read, update or delete an activity
  • /contactstatuses: create or read a paginated list of contact statuses
  • /activitystatuses: create or read a paginated list of activity statuses
  • /contactsources: create or read a paginated list of contact sources

Note: The angular 19 application we'll develop as a demo is the front-end for the CRM RESTful API, which allows you to create accounts, contacts, and activities. It's a great example of a CRUD (Create, Read, Update, and Delete) SPA application (Single Page Application). The sample application is still under development, so we'll be developing it over a series of tutorials and updating it to include advanced features like RxJS and JWT authentication.

Installing the Angular CLI 19

Ensure you have Node.js installed, then install Angular CLI 19 using this command:

$ npm install @angular/cli --global

At the time of writing, @angular/cli v19 will be installed.

You can verify the installed version using the following command:

$ ng version

You're now ready to start a new project using Angular CLI 19. Simply run:

ng new ngsimplecrm

The CLI will create typical Angular 19 application files and install necessary dependencies.

When prompted, Would you like to add Angular routing? (y/N), type y. For Which stylesheet format would you like to use?, choose CSS and press Enter.

Serve your application locally:

$ cd ./ngsimplecrm
$ ng serve

Your application will be served at http://localhost:4200.

Creating Angular 19 Components

Before creating the required components of our Angular 19 CRUD application, let's first introduce components to beginners.

What's a Component

Feel free to skip if you are already familiar with the concept of components in Angular.

A component is a TypeScript class that controls a region of the screen using an HTML template and an optional set of CSS styling.

The most fundamental aspect in Angular 19 is standalone components. An Angular application is essentially a component tree with a root component that gets bootstrapped at the start of the application using the bootstrapApplication() function from @angular/platform-browser package.

Reusability is a fundamental property of components. A component may be reused inside the application and even in other apps. Common and repetitive code that accomplishes a certain activity may be wrapped into a reusable component and invoked anytime the function it offers is required.

Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.

Creating the Required Components

Based on the endpoints of the REST API, we can divide our app into these standalone components:

  • AccountListComponent: this component displays and controls a tabular list of accounts
  • AccountCreateComponent: this component displays and controls a form for creating or updating accounts
  • ContactListComponent: displays a table of contacts
  • ContactCreateComponent: displays a form to create or update a contact
  • ActivityListComponent: displays a table of activities
  • ActivityCreateComponent: displays a form to create or update an activity

Use the Angular CLI to create the necessary components for the CRM application by running the following commands:

$ ng generate component AccountList
$ ng generate component AccountCreate
$ ng generate component ContactList
$ ng generate component ContactCreate
$ ng generate component ActivityList
$ ng generate component ActivityCreate

In Angular 19 and beyond, the components that will be created will be standalone by default and belong to no modules.

Setting up Angular 19 HttpClient

Now that we've created the components, let's set up HttpClient in our Angular 19 project to be able to fetch and consume the RESTful API endpoints.

In modern Angular, there is a new approach to import HttpClient in your project using the provideHttpClient function available from the @angular/common/http package.

This is new simplified application bootstrap mechanism that has been introduced to streamline the initialization process of Angular apps.

In the main.ts file of your project, start by importing the provideHttpClient function with the following code:

import { provideHttpClient } from "@angular/common/http";

Then update the bootstrapApplication function as follows:

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()],
});

Now, HttpClient is available for use in our application.

Here is a detailed explanation of the code:

  • bootstrapApplication(App): This function is used to bootstrap the root application component. It replaces the older platformBrowserDynamic().bootstrapModule() method, simplifying the initialization of the Angular app.
  • AppComponent: Refers to the root component of our application. It serves as the entry point for our Angular 19 app.
  • providers: [provideHttpClient()]: The providers array is used to inject services into the application. In this case, provideHttpClient() is added to provide the HttpClient service, which is essential for making HTTP requests in the application. By including this provider, the HttpClient is available throughout the app for making AJAX requests and interacting with the back-end API.

Creating Angular Services

A service is a global class that can be injected into any component. It encapsulates code that can be shared across multiple components, reducing redundancy.

Let's create services to encapsulate all REST API interaction code. Using Angular CLI 19, run:

$ ng generate service services/contact
$ ng generate service services/activity
$ ng generate service services/account

Injecting HttpClient in the Services

Open src/app/services/contact.service.ts and import and inject HttpClient:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ContactService {
  constructor(private httpClient: HttpClient) { }
}

Angular provides a way to register services/providers directly in the @Injectable() decorator by using the new providedIn attribute. This attribute accepts any module of your application or 'root' for the main app module. Now you don't have to include your service in the providers array of your module.

You need to the same step for the other components.

Conclusion

In this first part of our Angular 19 CRUD tutorial, we focused on the core concepts needed to build a simple CRUD application using Angular 19. Here’s what we've covered:

  • Installing the Angular CLI: Learn how to install Angular 19 and set up your project.
  • Creating Components: Understand the basics of Angular components and how to generate them using the CLI.
  • Setting Up HttpClient: Discover how to configure the HttpClient module to make HTTP requests to your back-end API or a mock server.
  • Creating Services: Learn how to create Angular services to manage API interactions in a clean and reusable manner.
  • Mocking REST API with JSON-Server: Practice CRUD operations with a simulated REST API using JSON-Server.
  • New Bootstrap Mechanism: Angular 19 introduces a new way to bootstrap your application with bootstrapApplication() for simplified app initialization.

By the end of this part, you should be comfortable with setting up Angular 19 and understanding its basic features to interact with a REST API. However, there’s more to come! In the next parts of this tutorial, we’ll dive deeper into more advanced features.

Specifically, we'll learn how to add routing, integrate advanced RxJS operators, implement JWT authentication, and much more!

Check out the other parts of this tutorial:

  • Date: