Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

Before going to the main steps, we assume that you have to install Node.js. Next, upgrade or install new Ionic 4 CLI by open the terminal or Node command line then type this command.

You will get the latest Ionic CLI in your terminal or command line. Check the version by type this command.

1. Ionic 4, Angular 7 and Cordova Tutorial: Create a New Application

To create a new Ionic 4 and Angular 7 application, type this command in your terminal.

If you see this question, just type N for because we will installing or adding Cordova later.

After installing NPM modules and dependencies, you will see this question, just type N because we are not using it yet.

Next, go to the newly created app folder.

You will see the Angular version still using 6 in the package.json.

Next, we have to upgrade the angular version to 7. You can replace all dependencies in package.json with this.

Then run this commands.

As usual, run the Ionic 4 and Angular 7 app for the first time, but before run as lab mode, type this command to install @ionic/lab.

Now, open the browser and you will the Ionic 4 and Angular 7 app with the iOS, Android, or Windows view. If you see a normal Ionic 4 tabs application, that’s mean the Angular upgrade process is successful.

2. Ionic 4, Angular 7 and Cordova Tutorial: Install Material and CDK

To install Angular 7 Material and CDK, simply run this command.

Type enter or yes for every question that showed up.

Next, register all required Angular Material components or modules to app.module.ts. Open and edit that file then add this imports.

Register the above modules to @NgModule imports.

3. Ionic 4, Angular 7 and Cordova Tutorial: Create RESTful API Service

Before creating a service for RESTful API access, first, we have to install or register HttpClientModule. Open and edit src/app/app.module.ts then add this import.

Add it to @NgModule imports after BrowserModule.

We will use the type specifier to get a typed result object. For that, create a new Typescript file src/app/product.ts then add this lines of Typescript codes.

Next, generate an Angular 7 service by typing this command.

Next, open and edit src/app/api.service.ts then add these imports.

Add these constants before the @Injectable.

Inject the HttpClient module to the constructor.

Add the error handler function.

Add all CRUD (create, read, update, delete) functions of product data.

4. Ionic 4, Angular 7 and Cordova Tutorial: Modify Tabs Page

We will put every CRUD pages inside tabs that previously created as default Ionic 4 starter template. We will display a list of data inside the home page, so for edit, add and details we will modify the existing page or tab items. Rename contact page folder, files and it’s filed contents as add. Rename about page folder, files and it’s filed contents as edit. Type this command to generate a new details page.

Next, open and edit src/app/tabs/tabs.router.module.ts then replace and add these imports.

Change the route constant as below.

Next, open and edit src/app/tabs/tabs.module.ts then add or replace these imports.

Add those imported modules to the @NgModule import array.

Next, open and edit src/app/tabs/tabs.page.html then replace all HTML tags with this.

5. Ionic 4, Angular 7 and Cordova Tutorial: View List of Data

To display list of data, open and edit src/app/home/home.page.ts then add/replace this imports.

Next, add the constructor then inject those modules to the constructor.

Remove all default generated variable, function and constructor body if exists then add this variable before the constructor for hold classroom data that get from the service.

Add function for getting Product list from API.

Add Angular 7 init function after the constructor for call above function.

Add function for the new Angular 7 CDK Drag&Drop.

Next, because we will use the new Angular 7 CDK features. We should add modules for it to src/app/home/home.module.ts then add these imports.

Register to @NgModule import array.

Next, open and edit src/app/home/home.page.html then replace all HTML tags with this.

6. Ionic 4, Angular 7 and Cordova Tutorial: Display Data Details and Delete

Every time you click the list item in the list of data, you will be redirected to the Details tab including the ID of the selected data. Open and edit src/app/details/ then add/replace this imports.

Inject the above modules to the constructor.

Add a variable before the constructor for hold Product data.

Add an asynchronous function to getting Product detail from API.

Add an asynchronous function to display an alert.

Call get product function from Angular 7 init function.

Add the functions to delete the data.

Next, open and edit src/app/details/details.page.html then replace all HTML tags with this.

7. Ionic 4, Angular 7 and Cordova Tutorial: Edit and Update Data

We will use Angular 7 Reactive Forms for edit data. Open and edit src/app/edit/edit.module.ts then add/replace these imports.

Register the Reactive Form Module to the @NgModule import array.

Next, open and edit src/app/edit/edit.page.ts then add/replace these imports.

Add this constructor and inject the above modules.

Add the variables for hold current data, Form Group, and Reactive Form controls.

Add asynchronous function to get Product Detail.

Call that function inside Angular 7 init.

Add asynchronous function for handle form submit.

Add asynchronous function to display an alert that calls on the first function.

Next, open and edit src/app/edit/edit.page.html then replace all HTML tags with this.

8. Ionic 4, Angular 7 and Cordova Tutorial: Add Data

Almost the same with edit data, we will create a form to add new data. Open and edit src/app/add/add.module.ts then add/replace these imports.

Register the Reactive Form Module to the @NgModule import array.

Next, open and edit src/app/edit/edit.page.ts then add/replace these imports.

Add this constructor and inject the above modules.

Add the variables for hold current data, Form Group, and Reactive Form controls.

Add Angular 7 init.

Add asynchronous function for handle form submit.

Next, open and edit src/app/edit/edit.page.html then replace all HTML tags with this.

9. Ionic 4, Angular 7 and Cordova Tutorial: Run and Test The App

Before running the Ionic 4 and Angular 7 application, first, you have run the Node.js, Express.js and MongoDB RESTful API that previously downloaded. Type this commands in another terminal tab. We assume, you already running the MongoDB server.

Now, we have to run the whole Ionic 4 and Angular 7 application to the browser first by type this command.

You can navigate the whole application, so it will similar like this.

To run on the devices, type these commands.