Typescript and multiple classes

Question

I have a component class as EventSchedulePage.It extends HandleStorageService abstract class as shown below.You can see that there is

Answer 1

You could create a BasePage, and put there all the shared code.

import { Component, Injector } from '@angular/core';
import { AlertController, ...} from 'ionic-angular';

@Component({ selector: '', template: '<span></span>' })
export class BasePage {

    private _alertCtrl: AlertController;
    private _toastCtrl: ToastController;

    constructor(public injector: Injector) { }

    // Get methods used to obtain instances from the injector just once
    // ----------------------------------------------------------------

    // AlertController
    public get alertCtrl(): AlertController {
        if (!this._alertCtrl) {
            this._alertCtrl = this.injector.get(AlertController);
        }
        return this._alertCtrl;
    }

    // ToastController
    public get toastCtrl(): ToastController {
        if (!this._toastCtrl) {
            this._toastCtrl = this.injector.get(ToastController);
        }
        return this._toastCtrl;
    }

    // ...

    // Helper methods
    // ----------------------------------------------------------------

    public showAlertMessage(message: string): void {
        let alert = this.alertCtrl.create({ ... });
        alert.present();
    }

    public showToastMessage(message: string): void {
        let toast = this.toastCtrl.create({ ... });
        toast.onDidDismiss(() => {
            console.log('Dismissed toast');
        });
        toast.present();
    }

}

The key is that the BasePage receives an instance of the injector from the subclass, so you could obtain any instance that you need from it (like the AlertController instance that you need to show an alert message). By using the get methods, each instance will be obtained from the injector just once.

And then in all the pages from your app:

import { Component, Injector } from '@angular/core';
import { BasePage } from '../path/to/base';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage extends BasePage {

    constructor(public injector: Injector) {
        super(injector);
    }

    public someMethod(): void {
        // You can use the methods from the BasePage!
        this.showAlertMessage('Your message...');
    }

    public someOtherMethod(): void {
        this.showToastMessage('Another message');
    }

}

This way is super easy to add some more helper methods.

Answer 2

You can create a separate provider class with the showInvalidTokenAlert() function

@Injectable()   
export class AlertProvider{
  constructor(){}

  showInvalidTokenAlert(){
  //...
  }
}

Set it in app.module.ts as provider in case you require as singleton

 @ngModule({
   //...
   providers:[
      AlertProvider,
   //..
   ]
 })

Inject in any component you require.

export class EventSchedulePage extends HandleStorageService {

   constructor(private alertProvider:AlertProvider) {
       super();
      }
  //call this.alertProvider.showInvalidTokenAlert()
}

Answer 3

hmm.. It seems anti-pattern no? I mean using service layer to handle UI related things? That is why I tried to get the solution based on TS.What is your thoughts about this? – Sampath

It is definitely more MVCS-like (Model-View-Controller-Service) to handle that in the controller. But that is a widely taken approach.

If you want to go for it, @suraj's answer is my personal recommendation.

Handling alerts on the controller is certainly possible. Keep reading.

event-schedule-page.service.ts

export class EventSchedulePage extends HandleStorageService {
  // ...
  foo() {
    if (!bar) {
      throw new Error('Something went wrong.');
    }
    // ...
  }
}

home.controller.ts

export class HomeController {
  // ...
  foo() {
    try {
      eventSchedulePageService.foo();
    } catch (error) {
      window.alert(error); // Handle and UI display the error on the controller.
    }
  }
}

To follow up, you can use custom error classes or separate functions to throw / handle your errors.