Have you ever thought of where and how to use TypeScript inheritance feature while developing with Ionic 2? Well, I haven’t 
until I needed it in my project.
I’m not going to describe a real scenario from my project as it might complicate things. Instead, I’ll just come up with an imaginary example.
Let’s say that we have an app to sell some products. Users of our app can make orders either as a guest or as a registered user. So we want to show two different pages for a guest and a registered user. We guess from the start that these two pages will have some common data and methods. So what should we do?
Well, before using inheritance let’s look at some possible approaches.
First, we can just duplicate methods in each page, which is probably not a good idea as it’s quite error-prone.
Second, we can introduce a common service which we can use in both pages. This is a good approach and I use it a lot, however, it’s not always possible to use a service, and that’s where inheritance might help us!
So, our aim is to create two forms for the user to make an order. One form is for a guest user and another one for registered user. Those forms are supposed to have different templates and different TS files. Though, they will have some properties and methods in common, such as order property and makeOrder() method.
Ok, let’s declare a simple class for our orders first.
export class Order {
userId: number;
constructor() { ... }
}
We are also going to use a service to create orders.
export class OrderService {
public makeOrder(order: Order): Observable<any> { ... }
}
We need a page to redirect the user to in case of a successful order.
@Component({ ... })
export class SuccessPage { ... }
Finally, let’s implement a base page for our orders.
import { LoadingController, NavController } from 'ionic-angular';
import { Order } from './order';
import { OrderService } from './order-service';
import { SuccessPage } from './success-page';
export class OrderPage {
loadingController: LoadingController;
navController: NavController;
orderService: OrderService;
order: Order;
constructor(loadingController: LoadingController, navController: NavController, orderService: OrderService) {
this.loadingController = loadingController;
this.navController = navController;
this.orderService = orderService;
// Create an empty order here, so we don't need to do that on child pages.
this.order = new Order();
}
makeOrder() {
// Show a loader while an order is being submitted.
let loader = this.loadingController.create({
content: "Loading..."
});
loader.present();
orderService.makeOrder(this.order).subscribe(() => {
// Hide the loader and go to Success page.
loader.dismiss().then(() => {
this.navController.push(SuccessPage);
});
}, error => {
// Hide the loader and show an error.
loader.dismiss().then(() => {
// Show the error here...
});
});
}
}
Next, a page to show to a registered user.
import { LoadingController, NavController } from 'ionic-angular';
import { OrderService } from './order-service';
@Component({ ... })
export class UserOrderPage extends OrderPage {
constructor(loadingController: LoadingController, navController: NavController, orderService: OrderService) {
// Invoke the constructor of our base page first.
super(loadingController, navController, orderService);
}
makeOrder() {
// Do something specific with the order. Let's say save the id of the authenticated user.
this.order.userId = CurrentUser.id;
// And then make a call to base makeOrder method.
super.makeOrder();
}
}
And then a page to show to an anonymous user.
import { LoadingController, NavController } from 'ionic-angular';
import { OrderService } from './order-service';
@Component({ ... })
export class GuestOrderPage extends OrderPage {
constructor(loadingController: LoadingController, navController: NavController, orderService: OrderService) {
// Invoke the constructor of our base page first.
super(loadingController, navController, orderService);
}
makeOrder() {
// Do something specific for anonymous user here...
// And then make a call to base makeOrder method.
super.makeOrder();
}
}
That’s it! Hope it will be helpful