Angular use module with routing inside another component

I’m facing a big problem and It’s taking me forever to figure out what can be the problem.

Actually I have a module called let’s say form.module.ts that contain 4 components, form.component that shows the other 3 components which are the 3 steps of my form.

Here is the form.component.html :

<div class="form">
  <div class="validation" *ngIf="!isConseiller">
    <button type="button" class="btn btn-default" (click)="doSomething()">Abandonner</button>
    <button type="button" class="btn btn-primary" (click)="doSomethingElse()">
      Valider et envoyer

And here is what my routing config for this module looks form-routing.module.ts :

const formRoutes: Routes = [
  { path: 'donnees-administratives', component: DonneesAdministrativesComponent},
  { path: 'devis', component: DevisComponent},
  { path: 'validation', component: ValidationComponent}

  imports: [RouterModule.forChild(formRoutes)],
  exports: [RouterModule]
export class FormRoutingModule { }

And here is my form.module.ts :

  imports: [
  declarations: [
  exports: [
export class FormModule { }

After importing my module in my app.module.ts I tried to use my FormComponent inside another component employer.component.html like so :

  <form [someInput]="data"></form>

The problem is that when I try to access /employer I can see <button> and everthing else declared in my component but I can’t see the content of the rooter-outlet.

And if I try to access /donnees-administratives I get all the content of that component but without the employer data.

I hope I was clear in my explanation, and wondering what I’m doign wrong ?! Thank in advance.

Source: Angular

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.