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

4
votes

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: enter image description here

Details Component Result Layout: enter image description here

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?

4
angularangular4-router
did you get any solution? - Mehul Parmar

4 Answers

9
votes

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>
5
votes

This is happening because you made parent-children relationship. If you want to replace the entire page make it as siblings relationship.

const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'details', component: AppDetailsComponent } ] And in app.component.html,no need to inject <app-home></app-home>. Simply we have to write <router-outlet></router-outlet>

1
votes

you have to add { path: '', component: HomeComponent } at the start of your app-routing.module rather than 'home', the empty string directs the app straight to homeComponent on load

0
votes

I'll like to use the following example to explain. Let's say I have 3 main components:

  • App component
  • Home component
  • Details component

The Home component(no header and footer) contains an item(name) with a "view details" button. Upon clicking on the button, we'll be taken to the Details component which contains details about the item(image, price, colors).

The template of my app component would contain only ""

My routes will look as such:

{
    path: 'home',
    component: HomeComponent
},
{
    path: 'details',
    component: DetailsComponent
},
{
    path: '',
    pathMatch: 'full',
    redirectTo:'/home'
},
{
    path: '**',
    component: HomeComponent
}

With this in place, upon running the application, the Home component(containing the name of the item and the button) is rendered or displayed. Then, clicking the button(after setting the route on it) will take us to the Details component(on its own view or page)