crds-ng2-content-block

NOTICE: This package is now using graphql to get content blocks. For new work it maybe easier to use graphql directly instead of content block service to get content blocks.

crds-ng2-content-block provides an easy mechanism for integrating dynamic content from Crossroads' CMS with your NG2 application.

Usage

Install the NPM package like so...

$ npm install crds-ng2-content-block --save

You may also need to install the following dependencies

    @apollo/client
    apollo-angular
    graphql

Update your app module by importing & adding the ContentBlockModule to your imports array...

import { ContentBlockModule } from 'crds-ng2-content-block';

@NgModule({
  imports: [
    ContentBlockModule.forRoot({
      endpoint: 'https://api-int.crossroads.net/graphql-gateway',
      categories: Array('main'), // optional
      options: {} // optional (not currently used)
    })
  ]
})
export class AppModule {}

The argument passed to forRoot() is an object that contains the following properties:

• endpoint: the API endpoint for graphql
• categories: the categories that will contain the needed content blocks
• options: an object containing other options. (This is not currently utilized as there are no other options to configure)

The type signature of the argument is described by IContentBlockConfig:

interface IContentBlockConfig {
  endpoint: string,
  categories?: Array<string>,
  options?: {
    [propNames: string]: any
  }
}

You only need to call forRoot() once; any child components of your application that need to invoke crds-content-block can just import ContentBlockModule which will prevent multiple XHR requests to the CMS.

Once you've imported the module, you can use the component in HTML, like so...

<crds-content-block id="ContentBlockTitle"></crds-content-block>

Events

contentLoaded (optional)

A callback is optionally fired once the content is loaded using the contentLoaded directive.

<crds-content-block id="ContentBlockTitle" (contentLoaded)="contentHasLoaded()"></crds-content-block>

And in your component:

export class MyComponent {

  public contentHasLoaded() {
    // This will run when content has been loaded.
  }
}

This will only be fired a single time, as soon as the content is rendered within the content block.

License

This project is licensed under the 3-Clause BSD License.