NgxPrismic

Installation

npm i @connectholland/ngx-prismic

Implementation

Make sure to add "preserveSymlinks": true to the angular.json otherwise this library doesn't work with ng serve.

angular.json

     "projects": {
       "my-project-name": {
         "architect": {
           "build": {
             "options": {
               "preserveSymlinks": true

app.module.ts

Add required imports

import { NgxPrismicModule, NgxPrismicConfiguration, NgxPrismicConfigurationParameters } from '@connectholland/ngx-prismic';
import { prismicConfig } from './prismic.conf';

Note: prismicConfig is defined in the next step, for now just create an empty prismic.conf file in your application.

Add the prismicConfigFactory

export function prismicConfigFactory(): NgxPrismicConfiguration {
  const params: NgxPrismicConfigurationParameters = {
    apiUrl: 'https://my-repo.prismic.io/api/v2',
    prismicConfig: prismicConfig,
    languagePrefixes: {
      'nl-nl': '',
      'en-gb': '/en'
    },
    unknownPageType: 'page-not-found'
  };

  return new NgxPrismicConfiguration(params);
}

| parameter | type | description | |:---------------- |:------------------------|:-------------| | apiUrl | string | The url to the prismic API v2. | prismicConfig | PrismicConfig[] | Imported entity configuration. | languagePrefixes | {[key: string]: string} | object with the prefix of the pages in a selected language. | unknownPageType | string | Single type item to be loaded from prismic if the requested page can not be found (404).

Note: languagePrefixes and unknownPageType will be moved to the prismic config in a future release.

and use it while importing the Module

imports: [
    NgxPrismicModule.forRoot(prismicConfigFactory)
]

Configuration

Module

The prismic.conf contains the configuration for entities in prismic

import { PrismicConfig } from '@connectholland/ngx-prismic';
import { ExampleComponent } from './pages/news/example.component';

export const prismicConfig: PrismicConfig[] = [
  {
    type: 'example',
    urlPrefix: {
      'nl-nl': 'voorbeeld'
      'en-gb': 'example'
    },
    component: ExampleComponent
  }
];

| parameter | type | description | |:-------------- |:------------------------|:-------------| | type | string | name of the type in the api of prismic. | urlPrefix | {[key: string]: string} | urlPrefix of the type where the object key is the required language. | fixedUrl | {[key: string]: string} | should only be used for single types like the homepage so you can redirect them to / or /en. | searchable | boolean | true if this entity should be included while using the search function. | filterable | boolean | if true returns this entity as one of the options to filter on in the search. | parentage | function | anonymous function that can be used to define parentage, this will be explained in more detail later. | component | Type<any> | The component to call if the page is found in prismic (this component must have an input variable called data to push in the content | requestOptions | {[key: string]: string} | Used for making additinal requests like extra fields for linked items if this item is requested by the module.

Router

Example how the router component can be added to sites navigation module, this is still up for improvement but seems to work for now.

import { PrismicRouterComponent } from '@connectholland/ngx-prismic';

const routes: Routes = [
  { path: 'en/:uid', component: PrismicRouterComponent, data: { lang: 'en-gb' }},
  { path: ':uid', component: PrismicRouterComponent, data: { lang: 'nl-nl' }},
  { path: 'en/:urlPrefix/:uid', component: PrismicRouterComponent, data: { lang: 'en-gb' }},
  { path: ':urlPrefix/:uid', component: PrismicRouterComponent, data: { lang: 'nl-nl' }}
]

Usage

The following is an example on how the service can be used to fetch multiple projects (there is a limit of 100 on the api)

  public projects: any;

  constructor(
    public prismicService: PrismicApiClientService,
  ) {}

  private fetchProjects(page: number = 1) {
    this.prismicService.getMultipleByType('project'}, this.filter).then(projects => {
      this.projects = result;
    });
  }

Methods

These still have to be ezplained

public getConfig(): PrismicConfig[]

public getDocument(type: string, uid: string, options?: any): Promise<any>

public getSingleByType(type: string): Promise<any>

public getMultipleByType(type: string | string[], options: any = {}, atFilters: {[key: string]: any} = {}, anyFilters: {[key: string]: any} = {}): Promise<any>

public getById(id: string, type?: any): Promise<any>

public findByUID(uid: string, page: number = 1): Promise<any>

public getDocumentByUid(uid: string): Promise<any>

public search(text: string, page: number = 1, filterType?: string): Promise<any>

public getSearchableTypes(): string[]

public getFilterableSearchTypes(): string[]

public getRequestOptions(type)

public toHtml(data): string

public toRaw(data): string

public getimage(image: any, size?: string)

public getTagsByType(type: string): string[]

public formatDate(date, options?: any): string

public getLanguage(): string

public setLanguage(lang: string)

public getLanguagePrefix(): string

public getParent(type: string)

public objectLinkResolver(doc: any): any

public linkResolver(doc): string

public setActiveType(type: string)

public getActiveType(): string

public getLanguageObserver(): Subject<string>