Angular routerlink from array not working

Issue

Here is the code.

headers: Header[] = [
// tslint:disable-next-line:max-line-length
{
  parentTitle: ['Settings'], childTitle: ['General Setup', 'PMS Setup', 'Crewing Setup', 'Purchase Setup', 'Safety Setup',
    // tslint:disable-next-line:max-line-length
    'RA Setup', 'RH Setup', 'Voyage Setup'], siblingTitleOne: ['Vessel', 'Port', 'Owner', 'Engine Type', 'Vessel Type'], siblingTitleTwo: [
      'Component Main', 'Component', 'Inventory Main', 'Inventory', 'Job category', 'Location Onboard'
    ],
  titleIcon: 'ft-settings', url: ['general-setup', 'pms-setup']
},
{ parentTitle: ['Data Sync'], childTitle: [], siblingTitleOne: [], siblingTitleTwo: [], titleIcon: 'ft-zap', url: [] },
{
  parentTitle: ['PMS'], childTitle: [], siblingTitleOne: [], siblingTitleTwo: [], titleIcon: 'ft-layers', url: []
},

On the header contains url[], seems to be not working with angular routerLink.

Let say this how i use.

<div *ngIf="header.parentTitle.length > 0" id="parentTitle" [ngbCollapse]="parentCollapsed" data-target="#siblingTitle" (click)="childCollapsed = !childCollapsed">
        <li *ngFor="let childTitle of header.childTitle">
          <a [routerLink] ="header.url">
            <span class="menu-childTitle">{{childTitle | uppercase}}</span>

The header.url not propagating with proper url which i gave it from the array.
It loads like this. localhost:4200/home/general-setup/pms-setup

const routes: Routes = [
 {
 path: 'home', component: HomeComponent,
  children: [
  {
    path: 'general-setup', component: GeneralSetupComponent,
    children: [
      {
        path: '', component: VesselDetailsComponent, outlet: 
'vesselDetails'
      },
      { path: '', component: AddVesselComponent, outlet: 'addVessel' 
},
      { path: '', component: AddPortComponent, outlet: 'addPort' },
      { path: '', component: AddOwnerComponent, outlet: 'addOwner' },
      { path: '', component: AddEngineTypeComponent, outlet: 
'addEngineType' },
      {
        path: '', component: AddVesselTypeComponent, outlet: 
'addVesselType'
      }
    ]
  } /* {
    path: 'general-setup',
    loadChildren: 'src/app/module/setup/general-setup/general- 
 setup.module#GeneralSetupModule'
  } */
  , {
    path: 'pms-setup', component: PmsSetupComponent,
    children: [
      {
        path: '', component: PmsComponentComponent, outlet: 
  'addPmsComponent'
      },
      { path: '', component: PmsComponentMainComponent, outlet: 
  'addPmsCompoentMain' },
      { path: '', component: PmsInventoryComponent, outlet: 
  'addPmsInventory' },
      { path: '', component: PmsInventoryMainComponent, outlet: 
  'addPmsInventoryMain' },
      { path: '', component: PmsJobCategoryComponent, outlet: 
  'addPmsJobCategory' },
      {
        path: '', component: PmsLocOnboardComponent, outlet: 
  'addPmsLocOnboard'
      }
    ]

     }
   ]
 }];

Main route

 `const signIn: Routes = [
    {
  path: '',
  redirectTo: '/welcome',
  pathMatch: 'full',
    },
  {
  path: 'welcome',
  component: WelcomeComponent
   }, {
  path: 'home',
  component: HomeComponent/* , canActivate: [AuthGuard] */
     }
   ];`

But the actual routing must be like this:
localhost:4200/home/general-setup

and localhost:4200/home/pms-setup

Solution

I’ve changed the Header interface to contain nested url. Like the below one.

export interface Header {
  parentTitles: string;
  childHeaders: ChildHeader[];
  icon: string;
  url: string;
}

export interface ChildHeader {
 childTitles: string;
 siblingHeaders: SiblingHeader[];
 icon: string;
 url: string;
}


export interface SiblingHeader {
 siblingTitles: string[];
 icon: string;
 url: string;
}

On the HTML page i’ve included something like the below one.

 <div class="main-menu-content" data-toggle="collapse" data-target="#parentTitle" (click)="parentCollapsed = !parentCollapsed"
    [attr.aria-expanded]="!parentCollapsed">
    <li *ngFor="let header of headers">
      <div>
        <a> <i class="header-icons" [ngClass]="[header.icon]"></i>
          <span class="menu-parentTitle">{{header.parentTitles | uppercase}}</span><span><i class="fa fa-angle-right"></i></span>
        </a>
      </div>
      <div *ngIf="header.childHeaders" id="parentTitle" [ngbCollapse]="parentCollapsed" data-target="#siblingTitle"
        (click)="childCollapsed = !childCollapsed">
        <li *ngFor="let childHeader of header.childHeaders">
          <a [routerLink]="[childHeader.url]">
            <span  *ngIf="childHeader.childTitles"  class="menu-childTitle">{{ childHeader.childTitles | uppercase}}</span>

So the Header interface would solve the problem of url routing.

<a href="some.url"></a> won’t loop individually, it’s hard to get the url if inside the <li> loop.

Answered By – EngineSense

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.