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

Question

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?

Answer 1

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>