Routing angular 4/5 hiding components

new to routing with angular 4/5, I am following the angular tutorial on their website. I have an angular application which I want to be able to have two separate pages. Right now main page is localhost:8870/dr3-interface and I want a new page with new components on localhost:8870/dr3-interface/manage_cycles_instances

My issue is when I click on my link Manage cycles instances it shows all my app.component components and not only the components I decided to show on my /manage_cycles_instances. I tried to hide them using *ngIf but without results. Any ideas?

app.component.html :

<div style="text-align:left">
  <h1>{{ title }}</h1>
</div>

<nav>
  <a routerLink="/manage_cycles_instances" routerLinkActive="active"> Manage cycles instances</a>
</nav>
<router-outlet></router-outlet>

<div *ngIf="router = '/dr3-interface'">
  <h2><d-table></d-table></h2>
</div>
<br/>
<form-upload></form-upload>
<br/>
<list-upload></list-upload>

app-routing.module.ts :

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';

import { DataTableComponent }   from './datatable/data-table.component';


const appRoutes: Routes = [
  { path: 'manage_cycles_instances', component: DataTableComponent },
  /* TO DO : page error
  { path: '**', component: ... }
  */
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import {
 //all material modules
} from '@angular/material';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { DataTableComponent } from './datatable/data-table.component';
import { DetailsUploadComponent } from './upload/details-upload/details-upload.component';
import { FormUploadComponent } from './upload/form-upload/form-upload.component';
import { ListUploadComponent } from './upload/list-upload/list-upload.component';

@NgModule({

  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    //material modules
  ],
  declarations: [
    AppComponent,
    DataTableComponent,
    DetailsUploadComponent,
    FormUploadComponent,
    ListUploadComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Solution

Your routes should be this :

const appRoutes: Routes = [
  { path: 'dr3-interface', component: DrThreeComponent, children: [ // I don't know which component to use for this route
    { path: 'manage_cycles_instances', component: DataTableComponent },
  ]}, 
];

Because you want to have nested routes, you should make nested routes. Note that your DrThreeComponent should have a router-outlet, since it has children.

You won't need to use conditions in your code, because the router will handle the display of your components.

Explanation :

You start by having an index.html file. It only contains a tag in its body, usually app-root. This tag will be replaced by your bootstraped component, which is usually AppComponent.

If you want to route your application, you will need to use the router. Several steps are required :

1 - Put a router-outlet tag in the component that will route others (here, app component)

2 - Create your routes (you did it, and I corrected it in my answer).

3 - in case of child routes (routes seprated by slashes, like yours), put a router outlet tag in every parent component, and a children property into the corresponding routes.

In your case, if we were to make a tree, this would look like this :

index.html
  |
  |--app component (with router outlet)
       |
       |--DrThree component (with router outlet)
            |
            |--ManageCycles component

So basically, index will show app, then app will show DrThree, then DrThree will show ManageCycles.