17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

Home (/) > Programming Blog (/post-category/595f867edbd39e7571e183dc/programming-blog) > Ionic Framework (/post-sub-
category/5845691a80aca7763489d872/ionic-framework)

Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD

Mobile Apps
by Didin J. on nov. 09, 2018

A comprehensive step by step tutorial on building CRUD (Create, Read, Update, Delete)
Hybrid Mobile Apps using Ionic 4, Angular 7 and Cordova

A comprehensive step by step tutorial on building CRUD (Create, Read, Update, Delete) Hybrid Mobile Apps using Ionic 4, Angular
7 and Cordova. The Angular 7 just released a few weeks ago and Ionic 4 still in beta version. So, we are an experiment using both
frameworks as a hybrid Mobile Apps. For the backend, we are using our existing Node, Express.js, and MongoDB RESTful API. There
are little new features in Angular 7, but we just take a bit for this tutorial.

Ultra-low-latency Live
Video
Adaptive bitrate, frame-rate and resolution live
streaming.

Bambuser OPEN

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 1/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

Table of Contents:
Ionic 4, Angular 7 and Cordova Tutorial: Create a New Application
Ionic 4, Angular 7 and Cordova Tutorial: Install Material and CDK
Ionic 4, Angular 7 and Cordova Tutorial: Create RESTful API Service
Ionic 4, Angular 7 and Cordova Tutorial: Modify Tabs Page
Ionic 4, Angular 7 and Cordova Tutorial: View List of Data and Delete
Ionic 4, Angular 7 and Cordova Tutorial: Display Data Details
Ionic 4, Angular 7 and Cordova Tutorial: Edit and Update Data
Ionic 4, Angular 7 and Cordova Tutorial: Add Data
Ionic 4, Angular 7 and Cordova Tutorial: Run and Test The App

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

Node.js (https://nodejs.org/) (Recommended version)

Ionic 4 beta (https://beta.ionicframework.com/docs/)
Angular 7 (https://angular.io/)
Express and MongoDB API (https://github.com/didinj/NodeRestApi.git)
Terminal or Node command line
IDE or Text Editor

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.

sudo npm install -g ionic

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

ionic --version
4.3.1

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.

ionic start ionic4-angular7-crud tabs --type=angular

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

Integrate your new app with Cordova to target native iOS and Android? (y/N) N

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

Install the free Ionic Pro SDK and connect your app? (Y/n) N

Next, go to the newly created app folder.

cd ./ionic4-angular7-crud

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

"dependencies": {
"@angular/common": "~6.1.1",
"@angular/core": "~6.1.1",
"@angular/forms": "~6.1.1",
"@angular/http": "~6.1.1",
"@angular/platform-browser": "~6.1.1",
"@angular/platform-browser-dynamic": "~6.1.1",
"@angular/router": "~6.1.1",
"@ionic-native/core": "5.0.0-beta.21",
"@ionic-native/splash-screen": "5.0.0-beta.21",
"@ionic-native/status-bar": "5.0.0-beta.21",
"@ionic/angular": "4.0.0-beta.15",
"core-js": "^2.5.3",
"rxjs": "6.2.2",
"zone.js": "^0.8.26"
},

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

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 2/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

"dependencies": {
"@angular/common": "^7.0.3",
"@angular/core": "^7.0.3",
"@angular/forms": "^7.0.3",
"@angular/http": "^7.0.3",
"@angular/platform-browser": "^7.0.3",
"@angular/platform-browser-dynamic": "^7.0.3",
"@angular/router": "^7.0.3",
"@ionic-native/core": "5.0.0-beta.21",
"@ionic-native/splash-screen": "5.0.0-beta.21",
"@ionic-native/status-bar": "5.0.0-beta.21",
"@ionic/angular": "4.0.0-beta.15",
"core-js": "^2.5.3",
"rxjs": "6.2.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/architect": "^0.10.4",
"@angular-devkit/build-angular": "^0.10.4",
"@angular-devkit/core": "^7.0.4",
"@angular-devkit/schematics": "^7.0.4",
"@angular/cli": "^7.0.4",
"@angular/compiler": "^7.0.3",
"@angular/compiler-cli": "^7.0.3",
"@angular/language-service": "^7.0.3",
"@ionic/angular-toolkit": "^1.0.0",
"@ionic/lab": "^1.0.13",
"@types/jasmine": "^2.8.11",
"@types/jasminewd2": "^2.0.6",
"@types/node": "^10.12.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "^3.1.6"
},

Then run this commands.

rm -rf node_modules
npm install

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`.

npm install --save-dev @ionic/lab

ionic serve -l

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.

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 3/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

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

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

ng add @angular/material

Type enter or yes for every question that showed up.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink

[ Preview: https://material.angular.io?theme=indigo-pink (https://material.angular.io?theme=indigo-pink) ]
? Set up HammerJS for gesture recognition? Yes
? Set up browser animations for Angular Material? Yes

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

import {
MatInputModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatSortModule,
MatTableModule,
MatIconModule,
MatButtonModule,
MatCardModule,
MatFormFieldModule } from "@angular/material";
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ScrollingModule } from '@angular/cdk/scrolling';

Register the above modules to `@NgModule` imports.

imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
BrowserAnimationsModule,
DragDropModule,
ScrollingModule,
MatInputModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatSortModule,
MatTableModule,
MatIconModule,
MatButtonModule,
MatCardModule,
MatFormFieldModule
],

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.

import { FormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

Add it to `@NgModule` imports after `BrowserModule`.

imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AppRoutingModule
],

We will use 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.

export class Product {

id: number;
prod_name: string;
prod_desc: string;
prod_price: number;
updated_at: Date;
}

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

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 4/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

ng g service api

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

import { Observable, of, throwError } from 'rxjs';

import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { catchError, tap, map } from 'rxjs/operators';
import { Product } from './product';

Add these constants before the `@Injectable`.

const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
const apiUrl = "/api/v1/products";

Inject `HttpClient` module to the constructor.

constructor(private http: HttpClient) { }

Add the error handler function.

private handleError<T> (operation = 'operation', result?: T) {

return (error: any): Observable<T> => {

// TODO: send the error to remote logging infrastructure

console.error(error); // log to console instead

// Let the app keep running by returning an empty result.

return of(result as T);
};
}

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

getProduct(id): Observable<Product> {
const url = `${apiUrl}/${id}`;
return this.http.get<Product>(url).pipe(
tap(_ => console.log(`fetched product id=${id}`)),
catchError(this.handleError<Product>(`getProduct id=${id}`))
);
}

addProduct (product): Observable<Product> {

return this.http.post<Product>(apiUrl, product, httpOptions).pipe(
tap((product: Product) => console.log(`added product w/ id=${product._id}`)),
catchError(this.handleError<Product>('addProduct'))
);
}

updateProduct (id, product): Observable<any> {

const url = `${apiUrl}/${id}`;
return this.http.put(url, product, httpOptions).pipe(
tap(_ => console.log(`updated product id=${id}`)),
catchError(this.handleError<any>('updateProduct'))
);
}

deleteProduct (id): Observable<Product> {

const url = `${apiUrl}/${id}`;

return this.http.delete<Product>(url, httpOptions).pipe(

tap(_ => console.log(`deleted product id=${id}`)),
catchError(this.handleError<Product>('deleteProduct'))
);
}

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 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.

ionic g page details

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

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 5/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

import { HomePage } from '../home/home.page';

import { AddPage } from '../add/add.page';
import { EditPage } from '../edit/edit.page';
import { DetailsPage } from '../details/details.page';

Change the route constant as below.

const routes: Routes = [

{
path: 'tabs',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full',
},
{
path: 'home',
outlet: 'home',
component: HomePage
},
{
path: 'add',
outlet: 'add',
component: AddPage
},
{
path: ':id',
outlet: 'edit',
component: EditPage
},
{
path: ':id',
outlet: 'details',
component: DetailsPage
}
]
},
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full'
}
];

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

import { AddPageModule } from '../add/add.module';

import { EditPageModule } from '../edit/edit.module';
import { HomePageModule } from '../home/home.module';
import { DetailsPageModule } from '../details/details.module';

Add those imported modules to the `@NgModule` imports array.

imports: [
IonicModule,
CommonModule,
FormsModule,
TabsPageRoutingModule,
HomePageModule,
AddPageModule,
EditPageModule,
DetailsPageModule
],

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

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 6/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

<ion-tabs>

<ion-tab tab="home">
<ion-router-outlet name="home"></ion-router-outlet>
</ion-tab>
<ion-tab tab="details">
<ion-router-outlet name="details"></ion-router-outlet>
</ion-tab>
<ion-tab tab="add">
<ion-router-outlet name="add"></ion-router-outlet>
</ion-tab>
<ion-tab tab="edit">
<ion-router-outlet name="edit"></ion-router-outlet>
</ion-tab>

<ion-tab-bar slot="bottom">

<ion-tab-button tab="home" href="/tabs/(home:home)">

<ion-icon name="home"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>

<ion-tab-button tab="details" href="/tabs/(details:null)">

<ion-icon name="eye"></ion-icon>
<ion-label>Details</ion-label>
</ion-tab-button>

<ion-tab-button tab="add" href="/tabs/(add:add)">

<ion-icon name="add"></ion-icon>
<ion-label>Add</ion-label>
</ion-tab-button>

<ion-tab-button tab="edit" href="/tabs/(edit:null)">

<ion-icon name="create"></ion-icon>
<ion-label>Edit</ion-label>
</ion-tab-button>

</ion-tab-bar>

</ion-tabs>

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.

import { Component, OnInit } from '@angular/core';

import { LoadingController } from '@ionic/angular';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiService } from '../api.service';
import { Product } from '../product';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

Build app ios The But you - know to upload the

App Store

VISIT SITE
Ad

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

constructor(public api: ApiService,

public loadingController: LoadingController,
public router: Router,
public route: ActivatedRoute) { }

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.

products: Product[] = [];

Add function for getting Product list from API.

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 7/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

async getProducts() {
const loading = await this.loadingController.create({
message: 'Loading...'
});
await loading.present();
await this.api.getProducts()
.subscribe(res => {
this.products = res;
console.log(this.products);
loading.dismiss();
}, err => {
console.log(err);
loading.dismiss();
});
}

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

ngOnInit() {
this.getProducts();
}

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

drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.products, event.previousIndex, event.currentIndex);
}

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 this imports.

import { ScrollingModule } from '@angular/cdk/scrolling';

import { DragDropModule } from '@angular/cdk/drag-drop';

Register to `@NgModule` imports array.

imports: [
IonicModule,
CommonModule,
FormsModule,
ScrollingModule,
DragDropModule,
RouterModule.forChild([{ path: '', component: HomePage }])
],

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

<ion-header>
<ion-toolbar>
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<cdk-virtual-scroll-viewport cdkDropList itemSize="20" class="example-viewport" (cdkDropListDropped)="drop($event)">
<ion-item *cdkVirtualFor="let p of products" class="example-item" href="/tabs/(details:{{p._id}})" cdkDrag>
<ion-icon name="desktop" slot="start"></ion-icon>
{{p.prod_name}}
<div class="item-note" slot="end">
{{p.prod_price | currency}}
</div>
</ion-item>
</cdk-virtual-scroll-viewport>
</ion-content>

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 redirect to Details tab including the ID of the selected data. Open
and edit `src/app/details/` then add/replace this imports.

import { Component, OnInit } from '@angular/core';

import { LoadingController, AlertController } from '@ionic/angular';
import { ApiService } from '../api.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Product } from '../product';

Inject above modules to the constructor.

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 8/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

constructor(public api: ApiService,

public loadingController: LoadingController,
public alertController: AlertController,
public route: ActivatedRoute,
public router: Router) {}

Add a variable before the constructor for hold Product data.

product:Product = { _id: null, prod_name: '', prod_desc: '', prod_price: null, updated_at: null };

Add an asynchronous function to getting Product detail from API.

async getProduct() {
if(this.route.snapshot.paramMap.get('id') == 'null') {
this.presentAlertConfirm('You are not choosing an item from the list');
} else {
const loading = await this.loadingController.create({
message: 'Loading...'
});
await loading.present();
await this.api.getProduct(this.route.snapshot.paramMap.get('id'))
.subscribe(res => {
console.log(res);
this.product = res;
loading.dismiss();
}, err => {
console.log(err);
loading.dismiss();
});
}
}

Add an asynchronous function for display an alert.

async presentAlertConfirm(msg: string) {

const alert = await this.alertController.create({
header: 'Warning!',
message: msg,
buttons: [
{
text: 'Okay',
handler: () => {
this.router.navigate(['']);
}
}
]
});

await alert.present();
}

Call get product function from Angular 7 init function.

ngOnInit() {
this.getProduct();
}

Add the functions to delete the data.

async delete(id) {
const loading = await this.loadingController.create({
message: 'Loading...'
});
await loading.present();
await this.api.deleteProduct(id)
.subscribe(res => {
loading.dismiss();
this.router.navigate([ '/tabs', { outlets: { home: 'home' } } ]);
}, err => {
console.log(err);
loading.dismiss();
});
}

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

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 9/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

<ion-header>
<ion-toolbar>
<ion-title>Details</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-card>
<ion-card-header>
<ion-card-title>{{product.prod_name}}</ion-card-title>
</ion-card-header>

<ion-card-content>
<ion-item>
<p>Price:</p>
<p>{{product.prod_price | currency}}</p>
</ion-item>
<ion-item>
<p>Description:</p>
<p>{{product.prod_desc}}</p>
</ion-item>
<ion-button type="button" shape="round" color="primary" expand="block" href="/tabs/(edit:{{product._id}})">Edit</ion-button>
<ion-button type="button" shape="round" color="danger" expand="block" (click)="delete(product._id)">Delete</ion-button>
</ion-card-content>
</ion-card>
</ion-content>

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 this imports.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Register the Reactive Form Module to the `@NgModule` imports array.

imports: [
IonicModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forChild([{ path: '', component: EditPage }])
],

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

import { Component, OnInit } from '@angular/core';

import { LoadingController, AlertController } from '@ionic/angular';
import { ApiService } from '../api.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { Product } from '../product';

Add this constructor and inject above modules.

constructor(public api: ApiService,

public loadingController: LoadingController,
public alertController: AlertController,
public route: ActivatedRoute,
public router: Router,
private formBuilder: FormBuilder) {
}

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

productForm: FormGroup;
_id:any='';
prod_name:string='';
prod_desc:string='';
prod_price:number=null;

Add asynchronous function to get Product Detail.

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 10/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

async getProduct(id) {
if(this.route.snapshot.paramMap.get('id') == 'null') {
this.presentAlertConfirm('You are not choosing an item from the list');
} else {
const loading = await this.loadingController.create({
message: 'Loading...'
});
await loading.present();
await this.api.getProduct(id)
.subscribe(data => {
this._id = data._id;
this.productForm.setValue({
prod_name: data.prod_name,
prod_desc: data.prod_desc,
prod_price: data.prod_price
});
loading.dismiss();
}, err => {
console.log(err);
loading.dismiss();
});
}
}

Call that function inside Angular 7 init.

ngOnInit() {
this.getProduct(this.route.snapshot.params['id']);
this.productForm = this.formBuilder.group({
'prod_name' : [null, Validators.required],
'prod_desc' : [null, Validators.required],
'prod_price' : [null, Validators.required]
});
}

Add asynchronous function for handle form submit.

async onFormSubmit(form:NgForm) {
await this.api.updateProduct(this._id, form)
.subscribe(res => {
let id = res['_id'];
this.router.navigate([ '/tabs', { outlets: { details: id }} ]);
}, (err) => {
console.log(err);
}
);
}

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

async presentAlertConfirm(msg: string) {

const alert = await this.alertController.create({
header: 'Warning!',
message: msg,
buttons: [
{
text: 'Okay',
handler: () => {
this.router.navigate(['']);
}
}
]
});

await alert.present();
}

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

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 11/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

<ion-header>
<ion-toolbar>
<ion-title>Edit</ion-title>
</ion-toolbar>
</ion-header>

<ion-content padding>
<form [formGroup]="productForm" (ngSubmit)="onFormSubmit(productForm.value)">
<ion-item>
<ion-label position="floating">Product Name</ion-label>
<ion-input type="text" formControlName="prod_name"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Product Price</ion-label>
<ion-input type="number" formControlName="prod_price"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Product Description</ion-label>
<ion-textarea formControlName="prod_desc"></ion-textarea>
</ion-item>
<ion-button type="submit" shape="round" color="primary" expand="block" [disabled]="!productForm.valid">Submit</ion-button>
</form>
</ion-content>

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

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Register the Reactive Form Module to the `@NgModule` imports array.

imports: [
IonicModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forChild([{ path: '', component: AddPage }])
],

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

import { Component, OnInit } from '@angular/core';

import { LoadingController, AlertController } from '@ionic/angular';
import { ApiService } from '../api.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { Product } from '../product';

Ultra-low-latency
Live Video
Adaptive bitrate, frame-rate and
resolution live streaming.

Bambuser OPEN

Add this constructor and inject above modules.

constructor(public api: ApiService,

public loadingController: LoadingController,
public alertController: AlertController,
public route: ActivatedRoute,
public router: Router,
private formBuilder: FormBuilder) {
}

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

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 12/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

productForm: FormGroup;
prod_name:string='';
prod_desc:string='';
prod_price:number=null;

Add Angular 7 init.

ngOnInit() {
this.productForm = this.formBuilder.group({
'prod_name' : [null, Validators.required],
'prod_desc' : [null, Validators.required],
'prod_price' : [null, Validators.required]
});
}

Add asynchronous function for handle form submit.

async onFormSubmit(form:NgForm) {
const loading = await this.loadingController.create({
message: 'Loading...'
});
await loading.present();
await this.api.addProduct(form)
.subscribe(res => {
let id = res['_id'];
loading.dismiss();
console.log(this.router);
this.router.navigate([ { outlets: { details: id } } ], { relativeTo: this.route.parent });
}, (err) => {
console.log(err);
loading.dismiss();
});
}

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

<ion-header>
<ion-toolbar>
<ion-title>
Add Product
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content padding>
<form [formGroup]="productForm" (ngSubmit)="onFormSubmit(productForm.value)">
<ion-item>
<ion-label position="floating">Product Name</ion-label>
<ion-input type="text" formControlName="prod_name"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Product Price</ion-label>
<ion-input type="number" formControlName="prod_price"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Product Description</ion-label>
<ion-textarea formControlName="prod_desc"></ion-textarea>
</ion-item>
<ion-button type="submit" shape="round" color="primary" expand="block" [disabled]="!productForm.valid">Submit</ion-button>
</form>
</ion-content>

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.

npm install
npm start

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

ionic serve -l

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

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 13/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

To run on the devices, type this commands.

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 14/18
17/01/2019 Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

ionic cordova platform rm android

ionic cordova platform add android
ionic cordova run android
ionic cordova platform rm ios
ionic cordova platform add ios
ionic cordova run ios

That it's, the results of our experiment of using Angular 7 with Ionic 4 beta. To get the full working source code, you can get from
our GitHub (https://github.com/didinj/ionic4-angular7-example.git).

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check
Ion2FullApp ELITE - The Complete Ionic 3 Starter App (https://ionicthemes.com/product/ion2fullapp-full-ionic2-app-template-
elite-version?ref=djamware) and save development and design time.

That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can find the following books:

Pro Typescript, Application-Scale Javascript Development (http://www.anrdoezrs.net/click-8263647-12752005?

url=https%3A%2F%2Fwww.apress.com%2Fgb%2Fbook%2F9781484232484%3Futm_medium%3Daffiliate%26utm_source%3Dcom
Learn Ionic 2, Develop Multi-platform Mobile Apps (http://www.tkqlhce.com/click-8263647-12169838?
url=https%3A%2F%2Fwww.apress.com%2Fus%2Fbook%2F9781484226162%3Futm_medium%3Daffiliate%26utm_source%3Dcomm
(Still compatible with Ionic 3)
Angular 4 Projects, Learn to Build Single Page Web Applications Using 70+ Projects (http://www.anrdoezrs.net/click-8263647-
12169838?
url=https%3A%2F%2Fwww.apress.com%2Fus%2Fbook%2F9781484232781%3Futm_medium%3Daffiliate%26utm_source%3Dcomm

Or take the following course:

Learn Ionic 3 From Scratch (https://click.linksynergy.com/link?

id=6nYo96*QrJE&offerid=358574.1168848&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Flearn-ionic-3-from-
scratch%2F)
Master Ionic 3 with Ionic Native and Cordova Integrations (https://click.linksynergy.com/link?
id=6nYo96*QrJE&offerid=358574.1206948&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fmaster-ionic-3-with-ionic-
native-and-cordova-integrations%2F)
Ionic 3: Build A Complete Mobile Weather App From Scratch (https://click.linksynergy.com/link?
id=6nYo96*QrJE&offerid=358574.1528822&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fionic-3-build-a-complete-
mobile-weather-app-from-scratch%2F)
Thanks!

The following resources might be useful for you:

Master essential business skills to advance your career or grow your business. (https://shareasale.com/r.cfm?
b=1095021&u=1451683&m=74412&urllink=&afftrack=)
DATA SCIENTIST: THE SEXIEST JOB OF THE 21ST CENTURY (https://shareasale.com/r.cfm?
b=1067437&u=1451683&m=74412&urllink=excelwithbusiness%2Ecom%2Fproduct%2Fintroduction%2Dto%2Ddata%2Dscience%2F&

Ultra-low-latency Live
Video
Adaptive bitrate, frame-rate and resolution live
streaming.

Bambuser OPEN

(https://www.ezoic.com/what-is-ezoic/) report this ad

 Previous Article
Ionic 4, Angular 6 and Cordova: Export and View PDF File

(/post/5bb6009580aca74669894418/ionic-4-angular-6-and-cordova-export-and-view-pdf-file)

Related Articles

https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps 15/18