title: Ionic 4 - Keep tabs visible in my whole application
body: <p>I have an application with 3 tabs (Home, About, Contact).
  I have a menu that contains an item link to "News", this page displays a list of news. The Home page displays the list of news also.</p>
  
  <p>I want the tabs to be visible in the News and News Details section.</p>
  
  <p>If I navigate to news detail from the home page, the Home tabs stay selected, which is a normal behavior I guess.</p>
  
  <p>When I open the news page from the menu, the home tabs stay selected also coz im using the outlet:home. Is it possible to keep the tabs visible in the news using another method? and even, how <strong>not</strong> to keep the home tabs selected if I go to news detail from the news page.</p>
  
  <p><strong>tabs.page.html</strong></p>
  
  <pre><code>&lt;ion-tabs&gt;
    &lt;ion-tab label="Home" icon="home" href="/tabs/(home:home)"&gt;
      &lt;ion-router-outlet name="home"&gt;&lt;/ion-router-outlet&gt;
    &lt;/ion-tab&gt;
    &lt;ion-tab label="About" icon="information-circle" href="/tabs/(about:about)"&gt;
      &lt;ion-router-outlet name="about"&gt;&lt;/ion-router-outlet&gt;
    &lt;/ion-tab&gt;
    &lt;ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)"&gt;
      &lt;ion-router-outlet name="contact"&gt;&lt;/ion-router-outlet&gt;
    &lt;/ion-tab&gt;
  &lt;/ion-tabs&gt;
  </code></pre>
  
  <p><strong>tabs.router.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { TabsPage } from './tabs.page';
  import { HomePage } from '../home/home.page';
  import { AboutPage } from '../about/about.page';
  import { ContactPage } from '../contact/contact.page';
  import { NewsPage } from '../news/news.page';
  import { NewsDetailsPage } from '../news/news-details/news-details.page';
  
  const routes: Routes = [
    {
      path: 'tabs',
      component: TabsPage,
      children: [
        {
          path: 'home',
          outlet: 'home',
          component: HomePage
        },
        {
          path: 'news',
          outlet: 'home',
          component: NewsPage
        },
        {
          path: 'news/news-details/:id',
          outlet: 'home',
          component: NewsDetailsPage
        },
        {
          path: 'about',
          outlet: 'about',
          component: AboutPage
        },
        {
          path: 'contact',
          outlet: 'contact',
          component: ContactPage
        }
      ]
    },
    {
      path: '',
      redirectTo: '/tabs/(home:home)',
      pathMatch: 'full'
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class TabsPageRoutingModule { }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;ion-app&gt;
    &lt;ion-menu type="overlay"&gt;
      &lt;ion-header&gt;
        &lt;ion-toolbar&gt;
          &lt;ion-title&gt;Menu&lt;/ion-title&gt;
        &lt;/ion-toolbar&gt;
      &lt;/ion-header&gt;
  
      &lt;ion-content padding&gt;
        &lt;ion-list&gt;
          &lt;ion-menu-toggle auto-hide="false"&gt;
            &lt;ion-item href="/tabs/(home:news)"&gt;
              &lt;ion-icon slot="start"&gt;&lt;/ion-icon&gt;
              &lt;ion-label&gt;
                News
              &lt;/ion-label&gt;
            &lt;/ion-item&gt;
          &lt;/ion-menu-toggle&gt;
        &lt;/ion-list&gt;
      &lt;/ion-content&gt;
    &lt;/ion-menu&gt;
    &lt;ion-router-outlet main&gt;&lt;/ion-router-outlet&gt;
  &lt;/ion-app&gt;
  </code></pre>
  
  <p><strong>home.page.html</strong></p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-buttons slot="start"&gt;
        &lt;ion-menu-button&gt;&lt;/ion-menu-button&gt;
      &lt;/ion-buttons&gt;
      &lt;ion-title&gt;
        Home
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding&gt;
    &lt;ion-list&gt;
      &lt;ion-item *ngFor="let n of news" href="tabs/(home:news/news-details/{{n.id}})" detail="true"&gt;
        &lt;ion-label&gt;{{n.name}}&lt;/ion-label&gt;
      &lt;/ion-item&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>news.page.html</strong></p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-buttons slot="start"&gt;
        &lt;ion-menu-button&gt;&lt;/ion-menu-button&gt;
      &lt;/ion-buttons&gt;
      &lt;ion-title&gt;
        News
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding&gt;
    &lt;ion-list&gt;
      &lt;ion-item *ngFor="let n of news" href="tabs/(home:news/news-details/{{n.id}})" detail="true"&gt;
        &lt;ion-label&gt;{{event.name}}&lt;/ion-label&gt;
      &lt;/ion-item&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>