External link

[spalenzuela]

Is it possible to open an external link for subitem in the device's default browser? For example: http://www.google.com

[Sebastián Ferreras]

Yes, that's posible @spalenzuela. Between today and tomorrow I'll update the component and the demo to show you how that can be done. Thanks :)

[spalenzuela]

Thanks to you, @sebaferreras

[Sebastián Ferreras]

@spalenzuela please get the latest version of the component (and also please take a look at the readme.md file to see the overall changes). The MenuOptionModel interface has been changed to include a custom property, where you can set whatever you need.

// MenuOptionModel interface
export interface MenuOptionModel {

    // If the option has sub items and the iconName is null,
    // the default icon will be 'ios-arrow-down'.
    iconName?: string;

    // The name to display in the menu
    displayName: string;

    // Target component (or null if it's a "special option" like login/logout)
    component?: any;

    // Here you can pass whatever you need, and will be returned if this
    // option is selected. That way you can handle login/logout options,
    // changing the language, and son on...
    custom?: any;

    // Set if this option is selected by default
    selected?: boolean;

    // List of sub items if any
    subItems?: Array<MenuOptionModel>;
}

So in your scenario, you could initialize one option to be the one that should open the external link

private initializeOptions(): void {
    this.options = new Array<MenuOptionModel>();

    // Load simple menu options
    // ------------------------------------------
    this.options.push({
        iconName: 'home',
        displayName: 'Home',
        component: HomePage,
        
        // This option is already selected
        selected: true
    });

    this.options.push({
        iconName: 'analytics',
        displayName: 'Option 1',
        component: DetailsPage
    });

    // Load options with nested items (with icons)
    // -----------------------------------------------
    this.options.push({
        displayName: 'Sub options with icons',
        subItems: [
            {
                iconName: 'basket',
                displayName: 'Sub Option 1',
                component: DetailsPage
            },
            {
                iconName: 'bookmark',
                displayName: 'Sub Option 2',
                component: DetailsPage
            }
        ]
    });

    // Load special options
    // -----------------------------------------------
    this.options.push({
        displayName: 'Special options',
        subItems: [
            {
                iconName: 'log-in',
                displayName: 'Login',
                custom: {
                    isLogin: true
                }
            },
            {
                iconName: 'log-out',
                displayName: 'Logout',
                custom: {
                    isLogout: true
                }
            },
            {
                iconName: 'globe',                           // <------- This one!
                displayName: 'Open Google',
                custom: {
                    isExternalLink: true,
                    externalUrl: 'http://www.google.com'
                }
            }
        ]
    });
}

And then handle that when selecting that option:

public selectOption(option: MenuOptionModel): void {
    this.menuCtrl.close().then(() => {

        // Collapse all the options
        this.sideMenu.collapseAllOptions();

        if (option.custom && option.custom.isLogin) {
            // Handle the login...
        } else if (option.custom && option.custom.isLogout) {
            // Handle the logout
        } else if(option.custom && option.custom.isExternalLink) { // <-- Here!
            let url = option.custom.externalUrl;
            window.open(url, '_blank');
        } else {
            // ...
        }
    });
}

I'll close this issue but feel free to re-open it if you need support. Thanks :)