Ionic 3 TabHiddenDirective to programmatically hide tabs using [tab-hidden]="true"; it is adaptive and also works fine on view changes

tab-hidden.directive.ts

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({ selector: '[tab-hidden]' })
export class TabHiddenDirective {

    @Input('tab-hidden')
    tabHidden: boolean;

    private _tabElCache: Map<string, Element> = new Map();

    constructor(private _el: ElementRef) {}

    ngAfterViewChecked() {

        let tabId = this._el.nativeElement.id.split('-');

        tabId.shift();
        tabId.unshift('tab');
        tabId = tabId.join('-');

        let tabEl: HTMLAnchorElement;

        if (!this._tabElCache.has(tabId)) {
            tabEl = <HTMLAnchorElement> document.querySelector('#' + tabId);
            this._tabElCache.set(tabId, tabEl);
        } else {
            tabEl = <HTMLAnchorElement> this._tabElCache.get(tabId);
        }

        if (tabEl) {

            if (this.tabHidden) {
                tabEl.style.display = 'none';
            } else {
                tabEl.style.display = 'flex';
            }
        }
    }
}

Many thanks, it works perfectly for me ;-)

thanks a lot 👍

..but do you know why the hidden directive mentioned here does not work? Did it only worked before ionic 3?

Many thanks, Perfect and clear.

Thanks for creating this awesome directive.
I used this directive. it is perfect when I create apk using "ionic cordova run android" but when I run "ionic cordova run android --prod",
I face the following error:
Can't bind to 'tab-hidden' since it isn't a known property of 'ion-tab'. 1. If 'ion-tab' is an Angular
component and it has 'tab-hidden' input, then verify that it is part of this module. 2. If 'ion-tab' is a
Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress
this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
(" <ion-tab [ERROR ->][tab-hidden]="false" tabTitle="Main" [root]="deliveryTabsMainPage"
[rootParams]="navParams.data"></io")

How can I solve it?
Please help.