Angular 2 Inheritance to enable disable Ionic Menu Swipe

Question

My problem:

My application contains a menu which is swipe enabled. On login screen if I swipe I can see the menu which is not right. I want to disab

Answer 1

Even though what @trichetriche says is true, there's a better way to handle this in Ionic! The answer is Custom decorators.

Github repo with working demo.

---

First, you'll need to go to the app.module.ts file and replace this line

export class AppModule { }

by this:

export class AppModule {

    static injector: Injector;

    constructor(injector: Injector) {    
        // Make the injector to be available in the entire module
        AppModule.injector = injector;    
    }
}

Doing that will help us to inject the instance of the MenuController in our custom decorator.

We're now able to write our custom decorator. I've created a folder named CustomDecorators and a file inside, disable-side-menu.decorator.ts with this content (I think the code is pretty self-explanatory):

// Angular
import { AppModule } from "../path/to.../app.module";

// Ionic
import { MenuController } from "ionic-angular";

export function DisableSideMenu() {

    return function (constructor) {
        const originalDidEnter = constructor.prototype.ionViewDidEnter;
        const originalWillLeave = constructor.prototype.ionViewWillLeave;            

        constructor.prototype.ionViewDidEnter = function () {

            // Get the MenuController instance
            const menuCtrl = AppModule.injector.get(MenuController);

            // Disable the side menu when entering in the page
            menuCtrl.enable(false);

            console.log('Disabling side menu...');

            // Call the ionViewDidEnter event defined in the page
            originalDidEnter && typeof originalDidEnter === 'function' && originalDidEnter.apply(this, arguments);
        };

        constructor.prototype.ionViewWillLeave = function () {

            // Get the MenuController instance
            const menuCtrl = AppModule.injector.get(MenuController);

            // Enable the side menu when leaving the page
            menuCtrl.enable(true);

            console.log('Enabling side menu...');

            // Call the ionViewWillLeave event defined in the page
            originalWillLeave && typeof originalWillLeave === 'function' && originalWillLeave.apply(this, arguments);
        };
    }

}

That's it! If you want to disable the side menu in a particular page, you'd need to add our custom decorator like this:

import { DisableSideMenu } from '../the/path/to../custom-decorators/disable-side-menu.decorator';

@DisableSideMenu()
@Component({
    selector: 'page-demo-page',
    templateUrl: 'demo-page.html'
})
...

So you don't need to extend any BaseClass nor inject anything else, making this extremely easy to be reused.