Issues in routing to another component

Question

I have components called demo and home.I have placed demo component in app.component.html file. The demo component looks like this:

As shown in the image, The demo component is having button (HOME). For this button i have given an router link to navigate to homecomponent. Now it is navigating to home component fine but both demo and home are displaying on the same page. I want to route it in seperate page.

Stackblitz DEMO

Answer 1

If you want to show Demo component by default but remove it when route changes then update your route config like:

const routes: Routes = [
    { path: '', component: DemoComponent },   // this will route to demo component by default;
    { path: 'home', component: HomeComponent },
];

And just have <router-outlet></router-outlet> in your app.component.html.

In your example you have demo component added statically to the app component so this will mean it will always be there(unless you add some if conditions)

https://stackblitz.com/edit/angular-material2-issue-fkwdrm?file=app%2Fapp-routing.module.ts