@connectholland/ngx-prismic v1.3.0

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

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

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>