DEV Community

Cover image for Angular 14 CRUD Tutorial
Ahmed Bouchefra
Ahmed Bouchefra

Posted on • Edited on

Angular 14 CRUD Tutorial

Image for post

Throughout this tutorial, we’ll be learning how to build an Angular 14 CRUD application with Bootstrap 4 styles to consume a REST Web API, create, read, modify, and search data.

Download this tutorial as a PDF ebook for offline reading.

Introducing our Angular 14 CRUD Application

We will learn how to build an Angular 14 front-end application that fetches data from a REST API of products:

  • Each product has id, name, description, availability status.
  • Users would be able to create, retrieve, update, and delete products.
  • Users can search for products by name.

The REST API Endpoints

We’ll be building a Angular 14 frontend app for a presumed REST API exporting the following REST API endpoints:

  • POST /api/products create new product
  • GET /api/products retrieve all products
  • GET /api/products/:id retrieve a product by :id
  • PUT /api/products/:id update a product by :id
  • DELETE /api/products/:id delete a product by :id
  • DELETE /api/products delete all products
  • GET /api/products?name=[keyword] find all products which name contains the passed keyword.

All of them can work well with this Angular App.

Angular 14 CRUD App Structure

These are the components of our CRUD app:

  • The App component is the parent of all other components and contains a router-outlet directive where the router will be inserting any matched component. It also contains a navigation bar that contains links to the app routes using routerLink directive.

ProductListComponent which displays the list of products.

ProductUpdateComponent which displays a form for editing product’s details by :id.

ProductCreateComponent which displays a form for creating a new product.

The components use the ProductService methods for actually making CRUD operations against the REST API. The service makes use of Angular 14 HttpClient to send HTTP requests to the REST and process responses.

Step 1 — Creating a New Angular 14 Project

Let’s get started by generating a new Angular 14 project using the CLI. You need to run the following command:

$ ng new Angular14CRUDExample

The CLI will ask you a couple of questions — If Would you like to add Angular routing? Type y for Yes and Which stylesheet format would you like to use? Choose CSS.

Step 2 — Generating Angular 14 CRUD Components and Service

Next, we need to generate a bunch of components and a service using the Angular CLI as follows:

$ ng generate service services/product

$ ng g c components/product-create

$ ng g c components/product-details

$ ng g c components/product-list

We have generated three components product-list, product-details, product-create and a product service that provides the necessary methods for sending HTTP requests to the server.

We also have the following artifacts:

– The src/app/app-routing.module.ts module will contain routes for each component. This file is automatically generated by Angular CLI when you answered Yes for routing. – The App component contains the router view and navigation bar.

– The src/app/app.module.ts module declares our Angular components and import the necessary modules such Angular HttpClient.

Please continue reading in Angular CRUD Example.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay