How to replace entire page in router outlet angular 4 routing?

I want to replace entire page content on image click in angular 4. I have 2 HTML components, want to redirect from one component to other. Both the components are having different header and content.

Please find the SS of both the layouts: Home Component Result Layout:

Details Component Result Layout:

I want to redirect from home to details on click on home link. As a result, on click of Home component link, details component should appear and home component should hidden.

Please find my routing of app.module.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth/auth.guard';
import { AdminComponent }      from './admin/admin.component';
import { DashboardComponent } from './dashboard/Dashboard.component';
import { HomeComponent } from './home/home.component';
import { AppComponent } from './shell/app.component';
import { AppDetailsComponent } from './app-details/app.details.component';

const appRoutes: Routes = [
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'details',
        component: AppDetailsComponent
    },
    {
        path: '',
        pathMatch: 'full',
        redirectTo:'/home'
    },
    {
        path: '**',
        component: HomeComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

App.component.html code

<app-home></app-home>
<router-outlet></router-outlet>

Home component anchor link to navigate from home to details

<div class="mapContainer" id="MapContainer">
    <div class="CustomMapSize">
        <a routerLink="/details"><img src="../../../local-npm-packages/assets/images/WorldMap.png" /></a>
    </div>
</div>

On click on a[routerLink="/details"], new details page is opening as expected but parent home layout is not getting hidden.

Can anyone suggest if any issue in my routing?

Perhaps the the parent home layout is coming from <app-home> component which you have given above <router-outlet>,

To replace the entire page, in your app.component.html use only the following element:

<router-outlet></router-outlet>