Angular 7 just released a few weeks ago, it comes with a few new feature and improvements. In this article, we will be creating an Angular application. I will explain step by step tutorials from scratch and perform CRUD operations. We will use a separate backend using PHP/MySql and accessing by Angular 7.

The following tools, frameworks, and modules are required for this tutorial:

Node.js (recommended version)
Angular 7 CLI
Angular 7
Express and MongoDB API
Terminal (Mac/Linux) or Command Line (Windows)
IDE (Web Strom Recommended)
Wamp Server (Windows)

We will create two separate projects. One is for Angular, and one is for PHP Web API. That means one for frontend and one for the backend.

First, we will install Angular 7 using Angular CLI, and then we will continue to develop the frontend and backend.

Install Angular 7

If you have an older Angular CLI version, then you can run the following command to install the latest versions.

npm install -g @angular/cli

type the following command to check the updated Angular CLI version

ng v

you can see that we have updated Angular CLI.

Create Project

Now, you will be able to create a new Angular project using the following CLI command.

ng new ng7CRUD

after creating a new project, you can see the folder structure be like this.

Next, install the following dependencies using the following command via npm.

//Bootstrap
npm install bootstrap
--save
//jqueru
npm install jquery
--save
//dropify
npm install dropify
--save
//Datatables
npm install datatables.net --save
npm install datatables.net-dt --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

You need to import the CSS and JS files into an angular.json file. Into the styles section, you need to import CSS files. Into the script section, you need to import JS files. Example code is given below.

"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/bootstrap/dist/css/bootstrap-reboot.css",
"node_modules/bootstrap/dist/css/bootstrap-grid.css",
"node_modules/dropify/dist/css/dropify.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/dropify/dist/js/dropify.js",
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]

Next, you can run the project using the following command

ng serve