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.