How To Fetch Additional Data in Page Modules

When using Page Modules, the fields of the module are passed down to the .component.ts file as props. However, you may run into a scenario where you want to fetch additional data into your Page Modules, such as information from a Content List or Item in Agility.

An example can be seen here on the Post Listing Page Module in the agilitycms-angular-starter.

What We'll Cover:

1. Fetching the Data

2. Using the Data in your Page Module

Fetching the Data

Import AgilityService into your Page Modules .component.ts file

import { AgilityService } from '../../agility/agility.service';

Use the methods provided by AgilityService to fetch data from Content Lists, Content Items, Sitemaps, and Pages. In this example, we use the getContentList method to fetch our Content List of Posts:

import { Component, Input, OnInit } from '@angular/core';
import { IAgilityModuleComponent } from 'src/agility/agility.module.icomponent';
import { AgilityService } from '../../agility/agility.service';
import { htmlDecode } from 'js-htmlencode';

@Component({
  selector: 'app-module-posts-listing',
  templateUrl: './module-posts-listing.component.html',
})
export class ModulePostsListingComponent implements IAgilityModuleComponent {
  @Input() data: any;

  public posts: any[] = null;
  public moduleData: any = null;

  constructor(private agilityService: AgilityService) {}

  async ngOnInit(): Promise<void> {
    const postsRes = await this.agilityService.getContentList('posts');

    this.moduleData = this.data.item.fields;

    this.posts = postsRes.items.map((p) => {
      return {
        title: p.fields.title,
        slug: p.fields.slug,
        date: new Date(p.fields.date).toLocaleDateString(),
        image: p.fields.image,
        content: p.fields.content,
        category: p.fields.category.fields.title || 'Uncategorized',
      };
    });
  }
}

Using the Data in your Page Module

To use the Data in your Page Module:

<ng-template [ngIf]="posts !== null && moduleData !== null">
  <div class="relative px-8 mb-12">
    <div class="max-w-screen-xl mx-auto">
      <div class="sm:grid sm:gap-8 sm:grid-cols-2 lg:grid-cols-3">
        <div *ngFor="let post of posts">
          <a href="blog/{{ post.slug }}">
            <div class="flex-col group mb-8 md:mb-0">
              <div class="relative h-64">
                <img
                  src="{{ post.image.url }}"
                  alt="{{ post.image.label }}"
                  class="object-cover object-center rounded-t-lg"
                  style="width: 100%; height: 100%"
                />
              </div>
              <div class="bg-gray-100 p-8 border-2 border-t-0 rounded-b-lg">
                <div
                  class="
                    uppercase
                    text-primary-500 text-xs
                    font-bold
                    tracking-widest
                    leading-loose
                  "
                >
                  {{ post.category }}
                </div>
                <div class="border-b-2 border-primary-500 w-8"></div>
                <div
                  class="
                    mt-4
                    uppercase
                    text-gray-600
                    italic
                    font-semibold
                    text-xs
                  "
                >
                  {{ post.date }}
                </div>
                <h2
                  class="
                    text-secondary-500
                    mt-1
                    font-black
                    text-2xl
                    group-hover:text-primary-500
                    transition
                    duration-300
                  "
                >
                  {{ post.title }}
                </h2>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</ng-template>
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.