Angular 8 - CRUD Operations - Part One

 In this series, we will learn step by step how to implement CRUD (Create, Read, Update, Delete) operations using Angular 8 With Web API and SQL database.

Table of contents for this article
  • Install or update
  • Introduction of CLI and CLI commands
  • Install and Create Sample application
  • Implement Routing
  • Create Services
  • Implement CRUD operations functionality
  • Run and test the application
The following tools and frameworks are required.
  • Node.JS, NPM
  • Angular CLI
  • Visual Studio Code
  • Web API

Install or Update

Follow the given link to install node.js --  that includes npm as well. The given package have latest version of node.js (12.14.1) and npm (6.13.4).
To check if you have installed nodejs and npm, follow these commands using the command prompt.
  • node -v
  • npm -v
Angular 8 - CRUD Operations
Provide the following command to install Angular CLI,
npm install -g @angular/cli


npm install -g @angular/cli@latest
Use this command to check the installed CLI version using command line.
ng –version
Angular 8 - CRUD Operations
We can install Visual Studio code from given link

Introduction of CLI and CLI Commands 

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as Angular Console. 

CLI Commands 

 Adds support for an external library to your project.
 Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
 Retrieves or sets Angular configuration values in the angular.json file for the workspace.
 Invokes the deploy builder for a specified project or for the default project in the workspace.
 Generates and/or modifies files based on a schematic.
 Lists available commands and their short descriptions.
 Creates a new workspace and an initial Angular app.
 Runs an Architect target with an optional custom builder configuration defined in your project.
 Builds and serves your app, rebuilding on file changes.
 Runs unit tests in a project.
 Updates your application and its dependencies.

Create a Sample Application

Start Visual Studio Code and open terminal in Visual Studio Code and type the following command to create a new project.
ng new ng-crud-sample
Angular 8 - CRUD Operations
After that, hit ENTER. It will take a while to create the project.
You will be asked to add Angular routings (y/N), I am adding y.
Then it would ask which stylesheet format you would like to use. I am adding Saas, it’s up to you which you want to use.
Angular 8 - CRUD Operations
Wait until project structure is ready.
Angular 8 - CRUD Operations
Once created, the project should look like this,
Angular 8 - CRUD Operations
We are done with installation and project structure here. In the next part we will learn how to implement routing and how to use Web API in Angular Services and Implement CRUD operations with database. 


In this article, we have learned how to install Angular framework and how to set up a new Angular application using Visual Studio Code.