Ionic 4 - Keep tabs visible in my whole application - ionic-framework

Question

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.
I want the tabs to be visible in the News and News Details section.
If I navigate to news detail from the home page, the Home tabs stay selected, which is a normal behavior I guess.
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 not to keep the home tabs selected if I go to news detail from the news page.
tabs.page.html
<ion-tabs>
<ion-tab label="Home" icon="home" href="/tabs/(home:home)">
<ion-router-outlet name="home"></ion-router-outlet>
</ion-tab>
<ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>
<ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
<ion-router-outlet name="contact"></ion-router-outlet>
</ion-tab>
</ion-tabs>
tabs.router.module.ts
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 { }
app.component.html
<ion-app>
<ion-menu type="overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item href="/tabs/(home:news)">
<ion-icon slot="start"></ion-icon>
<ion-label>
News
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
home.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let n of news" href="tabs/(home:news/news-details/{{n.id}})" detail="true">
<ion-label>{{n.name}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
news.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
News
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let n of news" href="tabs/(home:news/news-details/{{n.id}})" detail="true">
<ion-label>{{event.name}}</ion-label>
</ion-item>
</ion-list>
</ion-content>