Change set of Tabs on click


i have the following problem:
I have a Tabs page with 8 Tabs. 4 of them are enabled per *ngif=“variable” and the others disabled (per ="!variable").

What i want to do is toggle the visibility of the tabs per button click (hide the 4 active ones and show the 4 inactive ones).

I am using a button to change the variables value. When i do this, all 8 tabs appear in the tab bar and whenever i click on any of them i get the following error:

ERROR TypeError: Cannot read property 'length' of null
    at Tab.NavControllerBase.getActive (nav-controller-base.js:933)
    at (tabs.js:329)
    at Object.eval [as handleEvent] (Tabs.html:1)
    at handleEvent (core.js:13255)
    at callWithDebugContext (core.js:14740)
    at Object.debugHandleEvent [as handleEvent] (core.js:14327)
    at dispatchEvent (core.js:9704)
    at core.js:12028
    at SafeSubscriber.schedulerFn [as _next] (core.js:4235)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)

What might be the reason behind it? I cannot seem to understand.