Ionic2 two-way binding Problem with import class


Hi everyone i have this problem for a couple of hours now and i dont know what is happening. (im pretty new to Ionic2) so here it is:

I have a adding.ts :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Transaction } from '../../database';

  selector: 'page-adding',
  templateUrl: 'adding.html'
export class AddingPage {

  model : Transaction;

  constructor(public navCtrl: NavController) {

  ionViewDidLoad() {
  	this.model = new Transaction(null, "");



There, you can see model : Transaction that is a class im importing from another .ts file and have this structure:

export class Transaction implements ITransaction{
	id?: number;
	amount: number;
	lat: number;
	lng: number;
	title: string;
	imageUrl: string;

	constructor(amount:number, title:string, lat?:number, lng?:number, id?:number, imageUrl?:string){
		this.amount = amount;
		this.title = title;
		if(lat) = lat;
		if(lng) this.lng = lng;
		if(imageUrl) this.imageUrl = imageUrl;
		if(id) = id;

but when i try to use ngModel in my adding.html i keep getting Cannot read property ‘title’ of undefined

here is my adding.html:


    <ion-title>Agregar Movimiento</ion-title>


<ion-content padding>
	<ion-label floating>Descripción</ion-label>
	<ion-input type="text" [(ngModel)]="model.title" name="title"></ion-input>
	<ion-label floating>Monto</ion-label>
	<ion-input type="number" name="amount"></ion-input>
<div class="actions">
	<button ion-button>Agregar</button>

Please help me out :smiley:


You are initializing model after the template tries to access it. You have two options: either initialize model earlier (such as in the constructor) or bulletproof the template with conditional operators so that it can handle the case where model is not yet defined.


that makes a lot of sense. in terms of best practices what do you think should be the right way ? as of now im initializing it in the constructor.
Thanks for your anwser man :smile: