How to hide tab, but keep content of tab displayed in angular material in angular2?

Question

I am using the Tab layout here using Angular2/4:

https://material.angular.io/components/tabs/overview

How do I hide the md-tab as if it didn't exist, while keeping the content (and the programmatic existance of the tab displayed? Note that I only want to hide the first tab (Tab One) and keep all the other tabs showing.

I want:

1. On page load, display only Tab Two. (even though there are two tabs, with the first tab [Tab One] being hidden, though content for that tab is displayed and in the backend its considered active)
2. By default the content being shown is the content from "Tab One", even though the physical tab is not displayed.
3. User can click on "Tab Two" to switch to 2nd tab.
4. User can click on a completely separate button outside of the tab view to switch the content of the tabview display area to that of "Tab One" (even though the physical tab for Tab One is not displayed)

Pseudocode of what I want to accomplish, if there was an option to "hideTabButKeepContent" was available that I could set to true. If there is an alternate way of doing this if such an option is not available, I am open to that too:

<mat-tab-group>
  <mat-tab label="One" hideTabButKeepContent="true">
    <h1>Some tab content</h1>
    <p>...</p>
  </mat-tab>
  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

If this is flat out impossible with css or other options, if there is some other library for angular 2/4 that would work with this, it would be good to know. Or id this is flat out impossible...

Answer 1

You can just output all your data's from your tab in the separate block wich you'll show when u hide a tab. See this pseudocode:

<mat-tab-group>
  <mat-tab label="One" *ngIf="hideTabButKeepContent(someChangingParameterOrEvent)"> 
    <h1>Some tab content</h1>
    <p>...</p>
  </mat-tab>
  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

hideTabButKeepContent(param){
  displayTab:boolean=true;
  if(param){
    outputDataToSepareteBlockAndDisplayIt(data)
    displayTab=false;
  }
  return displayTab;
}