Angular 14 CRUD Tutorial
Tags: angular
Published: 2020-10-30 17:59:53

---
title: Angular 14 CRUD Tutorial
published: true
description: 
tags: angular
cover_image: https://miro.medium.com/max/483/1*7FbNFe1HPplLMhCPpMp9Ow.png
---

![Image for post](https://miro.medium.com/max/483/1*7FbNFe1HPplLMhCPpMp9Ow.png)

Throughout this tutorial, we’ll be learning how to build an [Angular 14](https://webtips101.com/whats-new-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_](https://www.techiediaries.com/angular-10-crud-bootstrap-tutorial.pdf) _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](https://www.techiediaries.com/routing-angular-router/)?**  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](https://www.techiediaries.com/angular-11-crud-rest-api-tutorial/).