Refreshing the component data based on the route in Angular

user_5068770 0
Viewed 99

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

enter image description here

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?

angular8 angular router
3 Answers

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")
  })
}
user_25849240

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'];
    })
  }

}
user_125867620

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>
user_50687700
Related