2

I am working with Angular Web Components like shown in example here.

All web components are displayed fine in the parent app (e.g. http://localhost:8080/dashboard) but my current problem is that I have a button in my web component and I need go to the web component profile (e.g. http://localhost:8080/dashboard/profile).

I have tried several examples but none worked.

Could someone guide me please? Thank you in advance.

Jovana
  • 557
  • 1
  • 5
  • 20
beanic
  • 539
  • 6
  • 22

2 Answers2

0

A little of your code would be useful to see what you currently have and what might be wrong with it.

In your dashboard.component.html file you would want to have a button or link element () which links to your router:

<a routerLink="/dashboard/profile">Login</a>

Your app-routing.module.ts should have something along the lines of:

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

// importing your component to route to 
import { DashboardProfileComponent } from './dashboardprofile/dashboardprofile.component';

// your route
const routes: Routes = [
  {path: 'dashboard/profile', component: DashboardProfileComponent},
];

// standard
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Don't forget to import your routing module in your app.module.ts. app.module.ts

import { AppRoutingModule } from './app-routing.module';
cwelsh4
  • 91
  • 9
0

@beanic I found a workaround by using Inputs and Outputs with the web-component Output you will emit your target path and wrap your inside your web-component tags like :

    <navigation><router-outlet></router-outlet></navigation>

and also add

<ng-content></ng-content>

in web-component where you want your view to be loaded.

Alaa Shaban
  • 21
  • 4