Angular:Redirect From Component to Component

Question

In my attempt to learn angular Routing and Navigation, i have struck at this navigation part.

My Angular Component Structure:

AppComponent
    -LandingPage
    -WhatEver1
     -Home
     -Price
     -Sales
    -WhatEver2
     -Blog
     -ContactUs

My Routes:

const appRoutes: Routes = [
  {path: '', component: LandingPageComponent},
  {path: 'whatever-1', component: WhateverComponent},
  {path: 'whatever-2', component: Whatever2Component}
];

i tried having two buttons on landing page, so that each button can navigate to one of the component.

Html Part of Landing Page:

<div class="row">
    <button class="btn btn-primary" (click)="redirectToTravelLife()">Travel Life</button>
    <button class="btn btn-warning" (click)="redirectToSoftwareLife()">Software Life</button>
  </div>

  <div class="row">
    <router-outlet></router-outlet>
  </div>

TypeScript Code:

constructor(private router: Router) {}

  redirectToSoftwareLife() {
      this.router.navigateByUrl('/whatever-1');
  }
  redirectToTravelLife() {
      this.router.navigateByUrl('/whatever-2');
  }

The Navigation is happening, but the buttons are still there. how to do proper navigation so that to whatever component i am redirect, only that component and its children components appear.

Answer 1

Problem is with with your Landing page html component. You have buttons which are static part of that page and router-outlet which is dynamic. Router-outlet serves as a joker which means in your case that your buttons will always be visible when you click on one of the buttons, and only the router-outlet part of component will change dynamically.

You need to have separated component with buttons (let's call it LandingPageComponent) and 2 separate components (Whathever1Component and Whatever2Component).

Your router module should have routes that look something like this:

const routes: Routes = [
    {path: 'landingpage', component: LandingPageComponent},
    {path: 'whatever-1', component: Whatever1Component},
    {path: 'whatever-2', component: Whatever2Component}
];

Now you will have landing page without router-outlet so when you click on the button you will be redirected to WhateverComponent or Whatever2Component, and without buttons rendered of course!

Hope this helps!

EDIT:

Regarding your comment ("Where should i keep my app-landing-page"), this is what you need to have: your app-component should have router-outlet. Inside that router-outlet will be rendered other parts of your application (landing page, whatever1, whatever2,...) and you will need to have routes structure that i already wrote. You don't need to put app-landing-page anywhere, you already included it via routes. So when you go to your route /landingpage that component will be rendered. Example:

app.component.html:

<div>
    <router-outlet></router-outlet>
</div>

app-routing.module.ts:

...
const routes: Routes = [
    {path: '', redirectTo: 'landingpage', pathMatch: 'full'},
    {path: 'landingpage', component: LandingPageComponent},
    {path: 'whatever-1', component: Whatever1Component,
    children: [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent},
        { path: 'price', component: PriceComponent },
        { path: 'sales', component: SalesComponent }
    ]},
    {path: 'whatever-2', component: Whatever2Component,
    children: [
        { path: '', redirectTo: 'blog', pathMatch: 'full' },
        { path: 'blog', component: BlogComponent},
        { path: 'contactus', component: ContactComponent }
    ]}
   ];
...