Refreshing the component data based on the route in Angular

Question

I'm having a secondary navigation and the data in it needs to be changed based on the route. Please find the below image.

All the data which needs to be displayed on the component is stored as below.

export const Items: SecondaryNavItems[] = [
    {
        icon: 'far fa-copy', title: 'Newly Added Processes'
    },
    {
        icon: 'far fa-copy', title: 'Terminated Processes'
    },
    {
        icon: 'far fa-copy', title: 'Test Processes'
    },
    {
        icon: 'far fa-copy', title: 'Test Processes'
    }
];

This is the component.ts file.

export class SecondaryNavigationComponent implements OnInit {

  public navItems: any[];

  constructor() { }

  ngOnInit() {
    this.navItems = Items.filter(navItem => navItem);
  }

}

Could someone tell me the optimal way to achieve this?

Answer 1

In order for this to work when it's within the same component, you could use a subscription, in order to fire whenever the route changes, like so:

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.animal = params.get("animal")
  })
}

Answer 2

The best way to pass static data to Route is using the data property in Routes configuration

const appRoutes: Routes = [
  {path: 'process', component: SomeComponent , data:{navItems: Items}},
  {path: '**', redirectTo: 'not-found'}  
]

And it can be accessed inside your component using ActivatedRoute

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'some-component',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.css']
})
export class SomeComponent implements OnInit {
  navItems;
  constructor(private router: ActivatedRoute) { }

  ngOnInit() {
    //this.navItems= this.router.snapshot.data['navItems'];
    this.router.data.subscribe((data)=>{
      this.navItems= data['navItems'];
    })
  }

}

Answer 3

I think I found a better way to implement this.

My Config file:

import { SecondaryList } from '../../models/secondary-nav';

export const Items: SecondaryList[] = [
    {
        type: 'bot',
        list: [
            {
                icon: 'far fa-copy', title: 'Test Processes 1'
            },
            {
                icon: 'far fa-copy', title: 'Test Processes 2'
            }
            ,{
                icon: 'far fa-copy', title: 'Test Processes 3'
            }
        ]
    },
    {
        type: 'process',
        list: [
            {
                icon: 'far fa-copy', title: 'Test Processes 4'
            },
            {
                icon: 'far fa-copy', title: 'Test Processes 5'
            }
            ,{
                icon: 'far fa-copy', title: 'Test Processes 6'
            }
        ]
    }
];

component.ts

ngOnInit() {
    this.navItems = Items.filter(navItem => {
      return navItem.type === 'bot'
    });
  }

component.html

<div class = "row">
    <ng-container *ngFor ="let navItem of navItems">
        <div class = "col-md-3 axi-tile axi-tile--primary" *ngFor="let list of navItem.list">
                <div class = "axi-tile__icon">
                    <i [class]="list.icon"></i>
                </div>
                <div class = "axi-tile__text">{{list.title}}</div>
            
            </div>
    </ng-container>
</div>