npm package: @qoh/core-angular
Description: Provide the QueenofheartsService when bootstrapping the app. The QueenofheartsService can use the execQuery-API of a QueenOfHearts-Server and/or send http-requests to any backend. To select which component is used to render the data the components are i
Latest version: 1.0.0-rc.13

# @qoh/core-angular

## Setup

Provide the QueenofheartsService when bootstrapping the app.
The QueenofheartsService can use the execQuery-API of a QueenOfHearts-Server and/or send http-requests to any backend.
To select which component is used to render the data the components are identified using the field provided in componentIdentifier.

### Bootstrap

Provide the API Token as well as a backend which is initialized with the CMS Token:

```typescript
bootstrapApplication(AppComponent, {
  providers: [{ provide: 'apiToken', useValue: environment.APITOKEN }, { provide: 'backend', useValue: new DatoCMS(environment.CMSTOKEN) }, QueenofheartsService],
}).catch((err) => console.error(err));
```

### Load data

```typescript
import { QueenofheartsService, Filter } from '@qoh/core-angular';
const filter = [{ name: filtername, operator: Filter.eq, value: filtervalue }];
const introspectionDepth = 10;
let data = await this.qohService.query(queryName, {
  filter: filter,
  depth: introspectionDepth,
});
```

<br />

## Implement and register Components

Your components should implement the QueenofheartsTemplate.

### types

Starting development, all components may use the `AnyComponent` type. With larger backends, this may cause slow queries, so the requested data can be tailored by each component.

This is done by creating a class extending `QohComponentData` that includes the fields the component uses. For example. If the fields `title` and `subtitle` are the only used fields of a component, the data definition looks like this:

```
class TextData implements QohComponentData{
  __typename="TextRecord",
  title: string,
  subtitle: string
}
```

This way all the other properties that may be provided by the CMS are automatically stripped from the query.

Types can also be complex types, depending on the CMS. A field with an image for example might look like this:

```
class ImageData implements QohComponentData{
  __typename="ResponsiveImage",
  title: string,
  width: number,
  hieght: number,
  image: {src:string}
}
```

Complexity may also be several levels deep.

### eager loading:

Call

`registerComponent(Component, type, "IDENTIFIER")`

for each component to make it available for the QueenofheartsRenderComponent.

`IDENTIFIER` is the value that component has for the provided componentIdentifier.

### lazy loading:

Call

`registerLazyComponent(async () => import('COMPONENT-FILE').then(m => m.CLASSNAME), type "IDENTIFIER");`

so that the QueenofheartsRenderComponent can lazy-load it.

---

## Render Data

use the QueenofheartsRenderComponent and pass the json for a component to it as data

```html
<queenofhearts-renderer [data]="JSON-DATA"></queenofhearts-renderer>
```

---

## Debugger

the QueenOfHearts-Debugger is a Chrome-Extension which shows additional data and creates templates for unregistered Components.

To be able to list the available queries for a QueenOfHearts-backend the application has to be bootstrapped with the variables used for the execQuery-API