Skip to content

Instantly share code, notes, and snippets.

@0x1ad2
Last active January 15, 2019 00:06
Show Gist options
  • Save 0x1ad2/e32859546b1bfeff5c55ceddf221e5b2 to your computer and use it in GitHub Desktop.
Save 0x1ad2/e32859546b1bfeff5c55ceddf221e5b2 to your computer and use it in GitHub Desktop.
A service to hide and show tabs in Ionic 2
import {Injectable} from '@angular/core';
// Declare TabsService as a provider in app.module.ts
// Inject TabsService in your class: constructor(public tabs: TabsService){}
// Use the this.tabs.hide() or this.tabs.show() methods wherever you want
@Injectable()
export class TabsService {
constructor() {}
public hide() {
let tabs = document.querySelectorAll('.tabbar');
let scrollContent = document.querySelectorAll('.scroll-content');
if (tabs !== null) {
Object.keys(tabs).map((key) => {
tabs[key].style.transform = 'translateY(56px)';
});
// fix for removing the margin if you got scorllable content
setTimeout(() =>{
Object.keys(scrollContent).map((key) => {
scrollContent[key].style.marginBottom = '0';
});
})
}
}
public show() {
let tabs = document.querySelectorAll('.tabbar');
if (tabs !== null) {
Object.keys(tabs).map((key) => {
tabs[key].style.transform = 'translateY(0px)';
});
}
}
}
@ronaiza-cardoso
Copy link

Great! it works like a charm. Thanks, you save my day

@souzace
Copy link

souzace commented Sep 18, 2017

Pretty nice, thanks!

@abitul
Copy link

abitul commented Dec 22, 2017

sorry, can u help me ? i get this error Uncaught TypeError: Cannot set property 'marginBottom' of undefined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment