Start a new topic

Toggle visibility of components

I have a question about toggle components on my home view (home.component). Depending on the state of my app I like to toggle the "hamburger" menu button on the RadSideDrawer on and off. I also like to do the same with the TabView. So when I am entering the home.component, depending on the app state I like to switch this on and off.


I don't see a way to get access to these components.


By the way, the project is created as a standard Kinvey Studio project.



//Thomas

1 Comment

Hello Thomas,


To toggle the visibility (or existence) of specific elements, you need to write custom code that interacts with already available services (like the Side Drawer service) or hides/shows view elements. Below you can find examples on how to remove the Side Drawer icon and disable its swipe gesture, and hide the Tabs navigation.


import { Inject, Injector } from '@angular/core';
import { HomeViewBaseComponent } from '@src/app/modules/system/home/home.base.component';
import { SideDrawerService } from '@src/app/core/services/side-drawer.service.tns';
import { isIOS } from 'tns-core-modules/platform';

export class HomeViewComponent extends HomeViewBaseComponent {
    constructor(@Inject(Injector) injector: Injector) {
        super(injector);

        // Disable SideDrawer (removes the Hamburger menu and disables the swipe gesture)
        const sideDrawerService = injector.get(SideDrawerService);
        (sideDrawerService as any).forceDisable = true;

        // Hide Tabs
        const sideDrawer = (sideDrawerService as any).sideDrawer;
        const hideTabs = (shouldHide) => {
            const frame = sideDrawer.mainContent.currentPage;
            if (!frame || !frame.firstChild || !frame.firstChild.firstChild) {
                setTimeout(() => hideTabs(shouldHide));
                return;
            }

            const proxyViewContainer = frame.firstChild;
            const tabView = proxyViewContainer.firstChild;
            if (isIOS) {
                tabView.viewController.tabBar.hidden = !!shouldHide;
            } else {
                tabView._tabLayout.setVisibility(shouldHide ? -1 : 0);
            }
        };

        hideTabs(true);
    }
}


I hope this is of any help.


Regards,

Garo

Login or Signup to post a comment