I'm uncertain if this scenario is feasible, but I have a page that fetches a list of items from an external API. There are currently 5 elements on the page, each acting as a link to its individual dynamically generated page through query strings. For example,
[routerLink]="['page', item.fields.id]"Here's how my setup looks...
contentful.service.ts
This file handles my API calls:
// Retrieve all program items
getProgramItems(query?: object): Promise<Entry<any>[]> {
return this.cdaClient.getEntries(Object.assign({
content_type: CONFIG.contentTypeIds.programItems
}, query))
.then(res => res.items);
}
// Fetch only program items with a specific week
getWeekItems(week: number): Promise<Entry<any>[]> {
return this.getProgramItems({'fields.week': week});
}
// Obtain program with a certain ID
getAsset(id: string): Promise<Entry<any>[]> {
return this.getProgramItems({'sys.id': id});
}
week-1.component.ts
This section involves fetching data and displaying the list of items:
export class Week1Component implements OnInit {
private programItems: Entry<any>[] = [];
private week1Items: Entry<any>[] = [];
constructor(
private contentfulService: ContentfulService
) { }
ngOnInit() {
this.contentfulService.getWeekItems(1)
.then((week1Items) => {
// Set week1Items and order them by sequenceOrder
this.week1Items = _.orderBy(week1Items, ['fields.sequenceOrder'], ['asc']);
})
.then(() => {
console.log(this.week1Items);
});
}
week-1.component.html
This area displays the list items and includes the routerLink for dynamic page creation:
<div class="program_card" *ngFor='let item of week1Items'>
...
asset-page.component.ts
export class AssetPageComponent implements OnInit {
asset: Entry<any>[];
constructor(
private contentfulService: ContentfulService,
private route: ActivatedRoute
) { }
ngOnInit() {
this.route.paramMap
.switchMap((params: ParamMap) => this.contentfulService.getAsset(params.get('id')))
.subscribe(asset => {
this.asset = asset;
console.log(this.asset);
});
}
}
In essence, what I am trying to accomplish is to have a next button on the dynamically created asset page that directs to the following dynamically generated asset page from the list on the week-1 page. Any assistance or suggestions would be greatly appreciated! Feel free to request additional information if needed.
Thank you!