CODEWITHSUNDEEP
javascriptangulartypescriptangular-routing
Imad El Hitti
Imad El Hitti

Reputation: 937

Angular 4 Children router not loading

In my application I had three components that I used to show with router.

export const routing = RouterModule.forRoot([
   { path: '', component: HomeListComponent },
   { path: 'badge', component: BadgeListComponent},
   { path: 'badge-form', component: BadgeFormComponent },
   { path: 'badge-form/:id', component: BadgeFormComponent }
]);

Because I wanted to have something like this /badge/badge-form in url instead of /badge-form when I go to the form I changed my routing config to :

{ path: '', component: HomeListComponent },
{
    path: 'badge',
    component: BadgeListComponent,
    children: [
        { path: 'badge-form', component: BadgeFormComponent },
        { path: 'badge-form/:id', component: BadgeFormComponent }
    ]
}

Unfortunately it's not working and I can't manage to find why, it's always loading the BadgeListComponent even if I go to the /badge/badge-form url.

HTML code for BadgeListComponent :

<div class="material-card-wide mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--border">
    <h2 class="mdl-card__title-text">{{ title }}</h2>
  </div>
  <div class="list-card-body">
    <table class="data-table-format">
      <thead>
        <tr>
          <th>badgeNumber</th>
          <th>authorizationLevel</th>
          <th>endOfValidity</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let badge of pagedItems" (click)="editBadge(badge.badge_badgeNumber)">
          <th>{{ badge.badge_badgeNumber }}</th>
          <th>{{ badge.badge_authorizationLevel }}</th>
          <th>{{ badge.badge_endOfValidity }}</th>
          <td width="5%" (click)="deleteConfirmation(badge.badge_badgeNumber); $event.stopPropagation();">
            <i class="material-icons delete-data-icon">delete_forever</i>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- pager -->
  <div class="mdl-paging" *ngIf="pager.pages && pager.pages.length">
    <button [disabled]="pager.currentPage === 1"
      class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
      (click)="setPage(pager.currentPage - 1)">
      <i class="material-icons">keyboard_arrow_left</i>
    </button>
    <a *ngFor="let page of pager.pages" 
      [class.selected]="pager.currentPage === page"
      class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
      (click)="setPage(page)">
      {{ page }}
    </a>
    <button [disabled]="pager.currentPage === pager.totalPages" 
      class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
      (click)="setPage(pager.currentPage + 1)">
      <i class="material-icons">keyboard_arrow_right</i>
    </button>
    <br />
    <span class="paginationStats">Pages {{ pager.startPage }}-{{ this.pager.endPage }} of {{ pager.totalPages }}</span>
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <div class="buttonHolder">
      <button routerLink="../badge-form" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary" *ngIf="!editing">
        Add
      </button>
    </div>
  </div>
</div>

enter image description here

Upvotes: 0

Views: 992

Answers (2)

DarthJDG
DarthJDG

Reputation: 16591

When you navigate to /badge/badge-form, your current configuration tells Angular Router to render the BadgeListComponent by matching /badge, then render BadgeFormComponent within BadgeListComponent's <router-outlet>.

You need a componentless route to only render the children.

{ path: '', component: HomeListComponent },
{
    path: 'badge',
    children: [
        { path: '', component: BadgeListComponent },
        { path: 'badge-form', component: BadgeFormComponent },
        { path: 'badge-form/:id', component: BadgeFormComponent }
    ]
}

Upvotes: 6

Maxime
Maxime

Reputation: 2234

Is there any errors in your BadgeFormComponent? It may be blocking the transition between components and let you stick in the parent component BadgeListComponent.

By the way, I suggest you to switch the children routes like this:

...
children: [
    { path: 'badge-form/:id', component: BadgeFormComponent },
    { path: 'badge-form', component: BadgeFormComponent }
]
...

Because Angular Router takes the first route that matches one of the paths. Since you have paths with and without parameter, I guess parameter is optional.

Let me know if you have some issues in your BadgeFormComponent.

Upvotes: 0

Related Questions