Angular 4 switch with different components - html

Question

I'm trying to make my menu load according to the click on the "Cadastros" action but I believe the problem is the "workspaceSelected" property that is not visible to all components.
I believe the correct location for this case would be the property "workspaceSelected" being in the component sidenav, but I do not know how to handle this type of situation.
I would like to click on the action "Cadastros" and she make the switch to load the correct html component.
principal component class:
export class PrincipalComponent implements OnInit {
workspaceSelecionada: string;
constructor() { }
ngOnInit() {
}
}
Principal component:
<header>
<app-navbar></app-navbar>
<app-sidenav></app-sidenav>
</header>
<div class="container" [ngSwitch]="workspaceSelecionada">
<app-cadastros *ngSwitchCase="'cadastros'"></app-cadastros>
<app-movimentacoes *ngSwitchCase="'movimentacoes'"></app-movimentacoes>
<app-administracao *ngSwitchCase="'administracao'"></app-administracao>
<app-relatorios *ngSwitchCase="'relatorios'"></app-relatorios>
<app-configuracoes *ngSwitchCase="'configuracoes'"></app-configuracoes>
<app-dashboard *ngSwitchDefault></app-dashboard>
</div>
app-sidenav:
<!--SideNav-->
<ul id="slide-out" class="side-nav grey darken-2">
<li>
<div class="userView">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div>
</li>
<li>
<a (click)="workspaceSelecionada = 'cadastros'" class="btn-large waves-effect waves-light indigo darken-3">CADASTROS</a>
</li>
<li>
<a class="btn-large waves-effect waves-light purple darken-3">MOVIMENTAÇÕES</a>
</li>
<li>
<a class="btn-large waves-effect waves-light orange darken-3">ADMINISTRAÇÃO</a>
</li>
<li>
<a class="btn-large waves-effect waves-light yellow darken-3">RELATÓRIOS</a>
</li>
<li>
<a class="btn-large waves-effect waves-light light-green darken-3">CONFIGURAÇÕES</a>
</li>
</ul>
<a data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

Answer 1

As suggested above in the comment, define a routing module for the application:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import {CadastrosComponent} from './...component';
....
const appRoutes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'cadastros', component: CadastrosComponent}
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Then import the routing module in your app module:
imports: [AppRoutingModule]
Then instead of switch case statement in your principal component, define the router outlet as below:
<router-outlet></router-outlet>
Then in the anchor tag in your side nav component template, define the router link as below:
<a routerLink="/cadastros">CADASTROS</a>
Hope this helps! Do let me know if you face any challenges implementing it.