Display different values dynamically from an object within objects - Angular 9

Question

I have a static.config file with some data that needs to be displayed within a component on a single page application. The model for the data is consistent (the same keys but different values for each object), but depending on the URL slug, the values should change to display the data relevant for the current "page".

export const data = {
setOne: {
    industryId: 'set-one',
    industryName: 'Set One',
    firstPoint: 'lorum',
    secondPoint: ' Ipsum',
    thirdPoint: 'lorum',
    videoContent: ['https://www.youtube.com', 'https://www.youtube.com']
},
setTwo: {
    industryId: 'set-two',
    industryName: 'Set two',
    firstPoint: 'lorum',
    secondPoint: ' Ipsum',
    thirdPoint: 'lorum',
    videoContent: ['https://www.youtube.com', 'https://www.youtube.com']
},
setThree: {
    industryId: 'set-three',
    industryName: 'Set three',
    firstPoint: 'lorum',
    secondPoint: ' Ipsum',
    thirdPoint: 'lorum',
    videoContent: ['https://www.youtube.com', 'https://www.youtube.com']
},

};

So www.site.com/set-one should display the values in setOne etc..

Is there a way to trigger the display of different values in the HTML template when the URL slug changes?

I am new to Angular and still getting to grips with a JavaScript so apologies if I have missed any important information.

V.Tur · Accepted Answer · 2020-10-07 13:38:48Z

1

Use

import { data } from '../config';

constructor(
    private router: Router
  ) {}

ngOnInit() {
 this.router.events
    .subscribe(event =>{
      if(event instanceof NavigationEnd) {
        const path = event.url.split('/').pop();
        switch(path) {
           case 'set-one':
              console.log(data['setOne']);
            break;
        }
      }
    })
}

edited Oct 7, 2020 at 13:38

answered Oct 7, 2020 at 11:46

V.Tur

1,44715 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fuxi Over a year ago

It is the same component. As it is a single page application so the dataset needs to change depending on what the URL slug is. This method will only ever display setOne when it needs to show setOne if URL slug is also set one

Fuxi Over a year ago

Maybe I need change the data structure

V.Tur Over a year ago

If it's single component, need to listen router changes. I updated my answer

Collectives™ on Stack Overflow

Display different values dynamically from an object within objects - Angular 9

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related