Multiple pages in signle view

I have to pages right now: Chat and Chat-details. Chat details is children of Chat. So My question is how I can show chat details page over chat. If you do not understand my question look in to image. This is what I want to accomplish

if it is for tab and desktop then it can be done with parent component routing
Routing:

const routes: Routes = [
    {
      path: 'chat',
      component: ChatPage,
      children: [
          {
              path: 'chat-details/:id',
              component: ChatDetailPage
          }
      ]
    }
  ];

html of chat.html

 <ion-header>...
  <ion-content> 
      <ion-row *ngFor="...">
         <ion-col size="5">Foo</ion-col>
         <ion-col size="7"><ion-router-outlet></ion-router-outlet></ion-col>
     </ion-row>
  </ion-content>

chat details will render inside <ion-router-outlet><ion-router-outlet>

So This is what I have for chats-rounting.module.ts file. Chat-details didn’t render

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ChatsPage } from './chats.page';

const routes: Routes = [
  {
    path: '',
    component: ChatsPage,
    children: [
      {
        path: 'hat-details/:id',
        loadChildren: () => import('./chat-details/chat-details.module').then( m => m.ChatDetailsPageModule)
      }
    ]
  },

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class ChatsPageRoutingModule {}

in chat page did you add ion-router-outlet as i suggested above

yes, sir. I added ion-router-outlet

What you are trying to implement deals with child routes… when some routes may only be accessible and viewed within other routes it may be appropriate to create them as child routes.
Read more here …https://angular-2-training-book.rangle.io/routing/child_routes