# 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...

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

You may also need to install the following dependencies


```bash
    @apollo/client
    apollo-angular
    graphql
```

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

```ts
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`:
```ts
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...

```html
<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.

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

And in your component:

```ts
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](https://opensource.org/licenses/BSD-3-Clause).