This tutorial will show you how to implement a data model in an application with Ionic 3 and show you how to pass data from one class to another class using an interface.
Example
REQUIREMENTS:
Ionic version >= 3
Cordova 8.0.0
Angular 3.9 || 4
A programming model is a very generic concept, and you may have found it with common patterns such as Model-View-Controller (MVC) or Model-View-Presenter (MVP) Depending on the context, the exact definition of a model can vary many things, but in general it is used to store or represent data in your solution.
Creating a data model in Ionic 3
First let's create a new project. Again, if you still do not have Ionic 3 configured on your machine, you should follow the installation of ionic framework.
Create a new file at src/models/HomeModel.ts and add the following
import {Injectable} from "@angular/core";
/**
* HomeModel is the model what distribute the data in you own name.
* @author Santiago Vasquez Olarte.
* @copyright (c) 2018 Snippet Developer.
*/
@Injectable()
export class HomeModel {
id: string = null;
userId: string = null;
title: string = null;
body: string = null;
constructor(data) {
this.id = data.id;
this.userId = data.userId;
this.title = data.title;
this.body = data.body;
}
}
The class has a constructor that runs every time it is used to create an instance of an object, and we are using it to configure some data like the id userId and the past elements.
Create a new file at src/helpers/HomeHelper.ts and add the following
import { HomeModel } from ".././models/HomeModel";
import { Injectable} from '@angular/core';
import { Observable} from "rxjs";
import 'rxjs/add/operator/map';
import { Http } from "@angular/http";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
/**
* HomeModelHelperDelegate helpers fill the variable 'homeArray' with the dates of service.
* @author Santiago Vasquez Olarte.
* @copyright (c) 2018 Snippet Developer.
*/
export interface HomeModelHelperDelegate {
dataSourceUpdated(any);
}
@Injectable()
export class HomeHelper {
private url = 'https://jsonplaceholder.typicode.com/posts';
homeArray : Array = new Array();
homeDelegate : HomeModelHelperDelegate;
constructor(public _http: Http) {
}
getHomeData() {
this.getHomeDataFromAPI().subscribe(data => {
console.log("Data ", data);
for (let index in data) {
this.homeArray.push(new HomeModel(data[index]));
}
this.homeDelegate.dataSourceUpdated(this.homeArray);
console.log("Data Array", this.homeArray);
}, error => {
console.log("Error ", error);
});
}
getHomeDataFromAPI():Observable {
return this._http.get(this.url)
.map(res => res.json())
.catch(err => {
return Observable.throw(err || "Server error");
})
}
}
The class has an array, which is filled every time we call the service data jsonplaceholder
Create a new file at src/pages/home/home.ts and add the following
import { Component} from "@angular/core";
import { NavController} from "ionic-angular";
import { HomeHelper, HomeModelHelperDelegate } from "../../helpers/HomeHelper";
/**
* HomePage is the controller what call the date and paint in the view.
* @author Santiago Vasquez Olarte.
* @copyright (c) 2018 Snippet Developer.
*/
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [HomeHelper]
})
export class HomePage implements HomeModelHelperDelegate {
static postsDataArray: Array = new Array();
constructor(public navCtrl: NavController, public homeHelper: HomeHelper) {
this.homeHelper.homeDelegate = this;
this.homeHelper.getHomeData();
}
dataSourceUpdated(data) {
HomePage.postsDataArray = data;
}
get staticPostsDataArray() {
return HomePage.postsDataArray;
}
}
The class has an array, which is filled every time we call the service data jsonplaceholder
file src/pages/home/home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Welcome to Ionic!</h1>
<strong>Entity Model With Ionic</strong>
<ion-list no-lines>
<p *ngFor="let data of staticPostsDataArray">
<strong>Id :</strong> {{data.id}}<br>
<strong>User Id :</strong> {{data.userId}}<br>
<strong>Title :</strong> {{data.title}}<br>
<strong>Body :</strong> {{data.body}}<br>
</p>
</ion-list>
</ion-content>
this is the way is how the data is painted to make the preview of the data.
