npm package: @ibm-wch-sdk/ng-pzn
Description: Module to attach personalization functionality to an WCH based Angular application.
Author: Dr. Carsten Leue
Latest version: 6.0.524

<a name="_6413c217ac070f0cc888ef237e5f77bca091ed14c4a6b017e8102394c2fc842d"></a>
# ibm-wch-sdk-ng-pzn

Module to attach personalization functionality to an [WCH](https://www.npmjs.com/package/ibm-wch-sdk-ng) based [Angular](https://angular.io/) application. The library exposes the [WchNgPznModul](#_4f5f0d570547cc32a6c26a19831659ff187906f3e173dec4cc7caa8b01b03375) module.

## Changes

[CHANGELOG](#_20bdb6f8aeaf2e57d73cf0f8f7596ac3a05ab33429cf49a686e6738debcd4512)

## Class documentation

Refer to the [documentation](#_28a07594e891c43454fa39c2c573639385bbf768c0897d05c3db61d89570388b).

<a name="_4f5f0d570547cc32a6c26a19831659ff187906f3e173dec4cc7caa8b01b03375"></a>
# WchNgPznModule

## Concept

The `WchNgPznModule` module contains everything you need to render personalized content. It does not determine a user context or personalized content. However, it provides the interfaces and abstract classes to integrate with existing solutions.

The idea is the following:
1. Your client-side analytics service provides contextual data.
2. Based on that data, your backend abstraction communicates the user profile to your cloud marketing software. The backend abstraction can also receive offers for certain spots on the site, called "interactionpoints".
3. The interactionpoint component in this module asks the backend abstraction for offers for its "interactionpoint".
4. The reveiced offers are rendered by the `InteractionpointLayoutComponent` component.

## Prereqs

* [ibm-wch-sdk-ng](https://www.npmjs.com/package/ibm-wch-sdk-ng)
* Angular 4.0 or higher (including Angular 5)
* An analytics script extending `AbstractAnalyticsService`
* A backend abstraction for your marketing software, extending `AbstractBackendService`

----
## Usage

#### Install the module

Install the module via

```bash
npm install --save ibm-wch-sdk-ng-pzn
```

Add the module to your root application

```typescript
@NgModule({
  ...
  imports: [
    ...
    WchNgPznModule
  ],
  ...
})
export class AppModule { }
```
The module exposes:
- Components: `InteractionpointLayoutComponent`
- Interfaces: `PznOffer`, `PznContext`
- Abstract classes:  `AbstractAnalyticsService`, `AbstractBackendService`
- Injection tokens: `ANALYTICS_SERVICE_TOKEN`, `BACKEND_SERVICE_TOKEN`.

#### Integrate your clientside analytics:

Generate an Angular Service
```bash
ng generate service your-analytics-service
```
extend `AbstractAnalyticsService` and add your analytics logic.
```typescript
import { PznContext, AbstractAnalyticsService } from 'ibm-wch-sdk-ng-pzn';
...
@Injectable()
export class YourAnalyticsService extends AbstractAnalyticsService {

    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        /*
        Do some analytics here
        */
        let analyticsResult: Observable<PznContext>;

        // provide the context
        that.onPznContext = analyticsResult;
    }
}

```
Provide it via the `ANALYTICS_SERVICE_TOKEN` in your app.module.ts:
```typescript
...
import { ANALYTICS_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourAnalyticsService } from './services/your.analytics.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: ANALYTICS_SERVICE_TOKEN, useClass: YourAnalyticsService}
    ],
    ...
})
...
```
#### Add your backend abstraction:

Generate an Angular Service
```bash
ng generate service your-backend-service
```
Extend `AbstractBackendService`
```typescript
...
import { BehaviourSubject } from 'rxjs/BehaviourSubject';
import { PznContext, PznOffer, ANALYTICS_SERVICE_TOKEN, AbstractBackendService } from 'ibm-wch-sdk-ng-pzn';
...

@Injectable()
export class YourBackendService extends AbstractBackendService {
    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        // get the analytics service
        const analytics = aInjector.get(ANALYTICS_SERVICE_TOKEN);

        // implement the session observer, e.g. as BehaviourSubject
        const _session = new BehaviourSubject<PznContext>({});
        that.session = _session;

        // subscribe it to analytics
        analytics.onPznContext.subscribe(that.session);


        /*
        Talk to your marketing software
        */


        // Assign getOffers
        that.getOffers = (interactionpointId) => { /* do something with _session to return the offers*/ };
    }
    ...
}
```

Provide it via the `BACKEND_SERVICE_TOKEN` in module.ts:

```typescript
...
import { BACKEND_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourBackendService } from './services/your.backend.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: BACKEND_SERVICE_TOKEN, useClass: YourBackendService}
    ],
    ...
})
...
```

#### Add the content-type

The content-type, layout and layout-mapping for `interactionpoint` get pushed automatically by executing from your repo's root.

```bash
ibm-wch-sdk-cli run:wchtools push -tlm --aggregated
```
You need to have `ibm-wch-sdk-cli` installed and `ibm-wch-sdk-ng-pzn` required in your `package.json`.

## WchNgPznModule classes and interfaces

#### InteractionpointLayoutComponent component

Implements a Layout for the content-type 'Interactionpoint'.
Renders a [wch-content-query](https://www.npmjs.com/package/ibm-wch-sdk-ng#_7133c4798b9f48c4213e1ce998fc4f8be545674c19e52c3e4a884082c7d908ce). As query it loads the `onQuery` output from `TypeInteractionpointComponent` asynchronously.

#### TypeInteractionpointComponent component

Gets the interactionpoint id from the content types field `name` via the WCH Angular SDK. Calls the backend service's `getOffers` method with the id.
Recieves a `PznOffer`, generates a query from it and provides it via the `onQuery` output as Observable of type `Query` from the WCH Angular SDK.

#### AbstractAnalyticsService abstract class

Your clientside analytics should provide a service extending this class. The service should expose an Observable `onPznContext`. The injection token to provide it should be the `ANALYTICS_SERVICE_TOKEN` from this module.

```typescript
    onPznContext: Observable<PznContext>;
```

#### AbstractBackendService abstract class
Your backend abstraction should provide a service extending this class. The service should expose a function `getOffers`, an Observer `session` and an Observer `refresh`, that triggers a reload of all offers on the page. The injection token to provide it should be the `BACKEND_SERVICE_TOKEN` from this module.

```typescript
    session: Observer<PznContext>;

    refresh: Observer<any>;

    getOffers: (id: string) => Observable<PznOffer>;
```

#### Interface PznContext
An interface for structuring contextual information
```typescript
export interface PznContext {
    [key: string]: string;
}
```
#### Interface PznOffer
Use this interface to create valid offers
```typescript
export type PznOffer = {
    'sortOrder': string;
    'display': boolean;
    'rows': string;
    [key: string]: string | boolean;
};
```

## Sample implementation

#### Demo implementation of `AbstractAnalyticsService`:

`ibm-wch-sdk-ng-demo-analytics` on npm

#### Demo implementation of `AbstractBackendService`:

`ibm-wch-sdk-ng-demo-backend-abstraction` on npm

<a name="_20bdb6f8aeaf2e57d73cf0f8f7596ac3a05ab33429cf49a686e6738debcd4512"></a>
# Changelog

## Current

### Added

* Initial version
<a name="_28a07594e891c43454fa39c2c573639385bbf768c0897d05c3db61d89570388b"></a>

WchNgPznModule
==============

Concept
-------

The `WchNgPznModule` module contains everything you need to render personalized content. It does not determine a user context or personalized content. However, it provides the interfaces and abstract classes to integrate with existing solutions.

The idea is the following:

1.  Your client-side analytics service provides contextual data.
2.  Based on that data, your backend abstraction communicates the user profile to your cloud marketing software. The backend abstraction can also receive offers for certain spots on the site, called "interactionpoints".
3.  The interactionpoint component in this module asks the backend abstraction for offers for its "interactionpoint".
4.  The reveiced offers are rendered by the `InteractionpointLayoutComponent` component.

Prereqs
-------

*   [ibm-wch-sdk-ng](https://www.npmjs.com/package/ibm-wch-sdk-ng)
*   Angular 4.0 or higher (including Angular 5)
*   An analytics script extending `AbstractAnalyticsService`
*   A backend abstraction for your marketing software, extending `AbstractBackendService`

* * *

Usage
-----

#### Install the module

Install the module via

```bash
npm install --save ibm-wch-sdk-ng-pzn
```

Add the module to your root application

```typescript
@NgModule({
  ...
  imports: [
    ...
    WchNgPznModule
  ],
  ...
})
export class AppModule { }
```

The module exposes:

*   Components: `InteractionpointLayoutComponent`
*   Interfaces: `PznOffer`, `PznContext`
*   Abstract classes: `AbstractAnalyticsService`, `AbstractBackendService`
*   Injection tokens: `ANALYTICS_SERVICE_TOKEN`, `BACKEND_SERVICE_TOKEN`.

#### Integrate your clientside analytics:

Generate an Angular Service

```bash
ng generate service your-analytics-service
```

extend `AbstractAnalyticsService` and add your analytics logic.

```typescript
import { PznContext, AbstractAnalyticsService } from 'ibm-wch-sdk-ng-pzn';
...
@Injectable()
export class YourAnalyticsService extends AbstractAnalyticsService {

    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        /*
        Do some analytics here
        */
        let analyticsResult: Observable<PznContext>;

        // provide the context
        that.onPznContext = analyticsResult;
    }
}

```

Provide it via the `ANALYTICS_SERVICE_TOKEN` in your app.module.ts:

```typescript
...
import { ANALYTICS_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourAnalyticsService } from './services/your.analytics.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: ANALYTICS_SERVICE_TOKEN, useClass: YourAnalyticsService}
    ],
    ...
})
...
```

#### Add your backend abstraction:

Generate an Angular Service

```bash
ng generate service your-backend-service
```

Extend `AbstractBackendService`

```typescript
...
import { BehaviourSubject } from 'rxjs/BehaviourSubject';
import { PznContext, PznOffer, ANALYTICS_SERVICE_TOKEN, AbstractBackendService } from 'ibm-wch-sdk-ng-pzn';
...

@Injectable()
export class YourBackendService extends AbstractBackendService {
    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        // get the analytics service
        const analytics = aInjector.get(ANALYTICS_SERVICE_TOKEN);

        // implement the session observer, e.g. as BehaviourSubject
        const _session = new BehaviourSubject<PznContext>({});
        that.session = _session;

        // subscribe it to analytics
        analytics.onPznContext.subscribe(that.session);

        /*
        Talk to your marketing software
        */

        // Assign getOffers
        that.getOffers = (interactionpointId) => { /* do something with _session to return the offers*/ };
    }
    ...
}
```

Provide it via the `BACKEND_SERVICE_TOKEN` in module.ts:

```typescript
...
import { BACKEND_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourBackendService } from './services/your.backend.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: BACKEND_SERVICE_TOKEN, useClass: YourBackendService}
    ],
    ...
})
...
```

#### Add the content-type

The content-type, layout and layout-mapping for `interactionpoint` get pushed automatically by executing from your repo's root.

```bash
ibm-wch-sdk-cli run:wchtools push -tlm --aggregated
```

You need to have `ibm-wch-sdk-cli` installed and `ibm-wch-sdk-ng-pzn` required in your `package.json`.

WchNgPznModule classes and interfaces
-------------------------------------

#### InteractionpointLayoutComponent component

Implements a Layout for the content-type 'Interactionpoint'. Renders a [wch-content-query](https://www.npmjs.com/package/ibm-wch-sdk-ng#_7133c4798b9f48c4213e1ce998fc4f8be545674c19e52c3e4a884082c7d908ce). As query it loads the `onQuery` output from `TypeInteractionpointComponent` asynchronously.

#### TypeInteractionpointComponent component

Gets the interactionpoint id from the content types field `name` via the WCH Angular SDK. Calls the backend service's `getOffers` method with the id. Recieves a `PznOffer`, generates a query from it and provides it via the `onQuery` output as Observable of type `Query` from the WCH Angular SDK.

#### AbstractAnalyticsService abstract class

Your clientside analytics should provide a service extending this class. The service should expose an Observable `onPznContext`. The injection token to provide it should be the `ANALYTICS_SERVICE_TOKEN` from this module.

```typescript
    onPznContext: Observable<PznContext>;
```

#### AbstractBackendService abstract class

Your backend abstraction should provide a service extending this class. The service should expose a function `getOffers`, an Observer `session` and an Observer `refresh`, that triggers a reload of all offers on the page. The injection token to provide it should be the `BACKEND_SERVICE_TOKEN` from this module.

```typescript
    session: Observer<PznContext>;

    refresh: Observer<any>;

    getOffers: (id: string) => Observable<PznOffer>;
```

#### Interface PznContext

An interface for structuring contextual information

```typescript
export interface PznContext {
    [key: string]: string;
}
```

#### Interface PznOffer

Use this interface to create valid offers

```typescript
export type PznOffer = {
    'sortOrder': string;
    'display': boolean;
    'rows': string;
    [key: string]: string \| boolean;
};
```

Sample implementation
---------------------

#### Demo implementation of `AbstractAnalyticsService`:

`ibm-wch-sdk-ng-demo-analytics` on npm

#### Demo implementation of `AbstractBackendService`:

`ibm-wch-sdk-ng-demo-backend-abstraction` on npm

## Index

### External modules

* ["components/interactionpoint/abstractInteractionpointComponent"](#_8013e6ac95e2fd04a81614dfa59a1cfa5db1987e8b7c1ff7d553ba9cf4ec2609)
* ["components/interactionpoint/typeInteractionpointComponent"](#_43fbe6fb2b0f45d8059066cd80f84ea36b8f75f201a00f0078b9061766c6aa69)
* ["index"](#_d53838c3180bb9a0e5494e993ceb8942c9866e807f2cfe89645b7e36005a0cf8)
* ["interfaces/pzn.context"](#_c1b0b69445be2b9f4528086824e07535b0f828387e826c1608fe2ccf1467948e)
* ["layouts/interactionpoint/interactionpointLayout"](#_6e7e0d54fa1c74a45143c4721e060073bbb759720c1230dc130b66f7022b4839)
* ["module"](#_1e2adf2f10b7c6d3f1400cef07b9d1abad4253d5b94cfa77442f7094d1ed888d)
* ["services/pzn/analytics.service"](#_569fad258786ae84e48dffdaca809b02000ac347a5ed60801313e3c369c763df)
* ["services/pzn/backend.service"](#_b69ddbbdb813b2aef3a838f3c3f438c2c53443cde1d2cb90445cb35787482ae2)

---


<a name="_8013e6ac95e2fd04a81614dfa59a1cfa5db1987e8b7c1ff7d553ba9cf4ec2609"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/interactionpoint/abstractInteractionpointComponent"](#_8013e6ac95e2fd04a81614dfa59a1cfa5db1987e8b7c1ff7d553ba9cf4ec2609)

# External module: "components/interactionpoint/abstractInteractionpointComponent"

## Index

### Classes

* [AbstractInteractionpointComponent](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)

---


<a name="_43fbe6fb2b0f45d8059066cd80f84ea36b8f75f201a00f0078b9061766c6aa69"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/interactionpoint/typeInteractionpointComponent"](#_43fbe6fb2b0f45d8059066cd80f84ea36b8f75f201a00f0078b9061766c6aa69)

# External module: "components/interactionpoint/typeInteractionpointComponent"

## Index

### Classes

* [TypeInteractionpointComponent](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)

### Variables

* [LOGGER](#_43fbe6fb2b0f45d8059066cd80f84ea36b8f75f201a00f0078b9061766c6aa69)

---

## Variables

<a id="logger"></a>

### `<Const>` LOGGER

**● LOGGER**: *"TypeInteractionpointComponent"* = "TypeInteractionpointComponent"

*Defined in components/interactionpoint/typeInteractionpointComponent.ts:14*

___


<a name="_d53838c3180bb9a0e5494e993ceb8942c9866e807f2cfe89645b7e36005a0cf8"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["index"](#_d53838c3180bb9a0e5494e993ceb8942c9866e807f2cfe89645b7e36005a0cf8)

# External module: "index"

## Index

---


<a name="_c1b0b69445be2b9f4528086824e07535b0f828387e826c1608fe2ccf1467948e"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["interfaces/pzn.context"](#_c1b0b69445be2b9f4528086824e07535b0f828387e826c1608fe2ccf1467948e)

# External module: "interfaces/pzn.context"

## Index

### Interfaces

* [PznContext](#_545b3dc516acc99737c00c782a0879f01ce0b44a004c8d4e262834407f044841)

### Type aliases

* [PznOffer](#_c1b0b69445be2b9f4528086824e07535b0f828387e826c1608fe2ccf1467948e)

---

## Type aliases

<a id="pznoffer"></a>

###  PznOffer

**Ƭ PznOffer**: *`object`*

*Defined in interfaces/pzn.context.ts:7*

#### Type declaration

[key: `string`]: `string` \| `boolean`

 display: `boolean`

 rows: `string`

 sortOrder: `string`

___


<a name="_6e7e0d54fa1c74a45143c4721e060073bbb759720c1230dc130b66f7022b4839"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["layouts/interactionpoint/interactionpointLayout"](#_6e7e0d54fa1c74a45143c4721e060073bbb759720c1230dc130b66f7022b4839)

# External module: "layouts/interactionpoint/interactionpointLayout"

## Index

### Classes

* [InteractionpointLayoutComponent](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)

---


<a name="_1e2adf2f10b7c6d3f1400cef07b9d1abad4253d5b94cfa77442f7094d1ed888d"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["module"](#_1e2adf2f10b7c6d3f1400cef07b9d1abad4253d5b94cfa77442f7094d1ed888d)

# External module: "module"

## Index

### Classes

* [WchNgPznModule](#_6adf3653fc938767ca1ddb858d5d99f9703d21e969b59d5851e1c64f3e2f1730)

---


<a name="_569fad258786ae84e48dffdaca809b02000ac347a5ed60801313e3c369c763df"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["services/pzn/analytics.service"](#_569fad258786ae84e48dffdaca809b02000ac347a5ed60801313e3c369c763df)

# External module: "services/pzn/analytics.service"

## Index

### Classes

* [AbstractAnalyticsService](#_8387fd9e005208baa42c2962e3ef860aa640e5a48a7cb11eb6be9b4c77f3e71d)

### Variables

* [ANALYTICS_SERVICE_TOKEN](#_569fad258786ae84e48dffdaca809b02000ac347a5ed60801313e3c369c763df)

---

## Variables

<a id="analytics_service_token"></a>

### `<Const>` ANALYTICS_SERVICE_TOKEN

**● ANALYTICS_SERVICE_TOKEN**: *`InjectionToken`<[AbstractAnalyticsService](#_8387fd9e005208baa42c2962e3ef860aa640e5a48a7cb11eb6be9b4c77f3e71d)>* =  new InjectionToken<AbstractAnalyticsService>('AnalyticsService')

*Defined in services/pzn/analytics.service.ts:8*

___


<a name="_b69ddbbdb813b2aef3a838f3c3f438c2c53443cde1d2cb90445cb35787482ae2"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["services/pzn/backend.service"](#_b69ddbbdb813b2aef3a838f3c3f438c2c53443cde1d2cb90445cb35787482ae2)

# External module: "services/pzn/backend.service"

## Index

### Classes

* [AbstractBackendService](#_d1ff4cd8f7562319a2c3d249da0f9c2bced2de9ec93872cc3d0c83474060f39d)

### Variables

* [BACKEND_SERVICE_TOKEN](#_b69ddbbdb813b2aef3a838f3c3f438c2c53443cde1d2cb90445cb35787482ae2)

---

## Variables

<a id="backend_service_token"></a>

### `<Const>` BACKEND_SERVICE_TOKEN

**● BACKEND_SERVICE_TOKEN**: *`InjectionToken`<[AbstractBackendService](#_d1ff4cd8f7562319a2c3d249da0f9c2bced2de9ec93872cc3d0c83474060f39d)>* =  new InjectionToken<AbstractBackendService>('BackendService')

*Defined in services/pzn/backend.service.ts:8*

___


<a name="_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0"></a>

WchNgPznModule
==============

Concept
-------

The `WchNgPznModule` module contains everything you need to render personalized content. It does not determine a user context or personalized content. However, it provides the interfaces and abstract classes to integrate with existing solutions.

The idea is the following:

1.  Your client-side analytics service provides contextual data.
2.  Based on that data, your backend abstraction communicates the user profile to your cloud marketing software. The backend abstraction can also receive offers for certain spots on the site, called "interactionpoints".
3.  The interactionpoint component in this module asks the backend abstraction for offers for its "interactionpoint".
4.  The reveiced offers are rendered by the `InteractionpointLayoutComponent` component.

Prereqs
-------

*   [ibm-wch-sdk-ng](https://www.npmjs.com/package/ibm-wch-sdk-ng)
*   Angular 4.0 or higher (including Angular 5)
*   An analytics script extending `AbstractAnalyticsService`
*   A backend abstraction for your marketing software, extending `AbstractBackendService`

* * *

Usage
-----

#### Install the module

Install the module via

```bash
npm install --save ibm-wch-sdk-ng-pzn
```

Add the module to your root application

```typescript
@NgModule({
  ...
  imports: [
    ...
    WchNgPznModule
  ],
  ...
})
export class AppModule { }
```

The module exposes:

*   Components: `InteractionpointLayoutComponent`
*   Interfaces: `PznOffer`, `PznContext`
*   Abstract classes: `AbstractAnalyticsService`, `AbstractBackendService`
*   Injection tokens: `ANALYTICS_SERVICE_TOKEN`, `BACKEND_SERVICE_TOKEN`.

#### Integrate your clientside analytics:

Generate an Angular Service

```bash
ng generate service your-analytics-service
```

extend `AbstractAnalyticsService` and add your analytics logic.

```typescript
import { PznContext, AbstractAnalyticsService } from 'ibm-wch-sdk-ng-pzn';
...
@Injectable()
export class YourAnalyticsService extends AbstractAnalyticsService {

    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        /*
        Do some analytics here
        */
        let analyticsResult: Observable<PznContext>;

        // provide the context
        that.onPznContext = analyticsResult;
    }
}

```

Provide it via the `ANALYTICS_SERVICE_TOKEN` in your app.module.ts:

```typescript
...
import { ANALYTICS_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourAnalyticsService } from './services/your.analytics.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: ANALYTICS_SERVICE_TOKEN, useClass: YourAnalyticsService}
    ],
    ...
})
...
```

#### Add your backend abstraction:

Generate an Angular Service

```bash
ng generate service your-backend-service
```

Extend `AbstractBackendService`

```typescript
...
import { BehaviourSubject } from 'rxjs/BehaviourSubject';
import { PznContext, PznOffer, ANALYTICS_SERVICE_TOKEN, AbstractBackendService } from 'ibm-wch-sdk-ng-pzn';
...

@Injectable()
export class YourBackendService extends AbstractBackendService {
    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        // get the analytics service
        const analytics = aInjector.get(ANALYTICS_SERVICE_TOKEN);

        // implement the session observer, e.g. as BehaviourSubject
        const _session = new BehaviourSubject<PznContext>({});
        that.session = _session;

        // subscribe it to analytics
        analytics.onPznContext.subscribe(that.session);

        /*
        Talk to your marketing software
        */

        // Assign getOffers
        that.getOffers = (interactionpointId) => { /* do something with _session to return the offers*/ };
    }
    ...
}
```

Provide it via the `BACKEND_SERVICE_TOKEN` in module.ts:

```typescript
...
import { BACKEND_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourBackendService } from './services/your.backend.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: BACKEND_SERVICE_TOKEN, useClass: YourBackendService}
    ],
    ...
})
...
```

#### Add the content-type

The content-type, layout and layout-mapping for `interactionpoint` get pushed automatically by executing from your repo's root.

```bash
ibm-wch-sdk-cli run:wchtools push -tlm --aggregated
```

You need to have `ibm-wch-sdk-cli` installed and `ibm-wch-sdk-ng-pzn` required in your `package.json`.

WchNgPznModule classes and interfaces
-------------------------------------

#### InteractionpointLayoutComponent component

Implements a Layout for the content-type 'Interactionpoint'. Renders a [wch-content-query](https://www.npmjs.com/package/ibm-wch-sdk-ng#_7133c4798b9f48c4213e1ce998fc4f8be545674c19e52c3e4a884082c7d908ce). As query it loads the `onQuery` output from `TypeInteractionpointComponent` asynchronously.

#### TypeInteractionpointComponent component

Gets the interactionpoint id from the content types field `name` via the WCH Angular SDK. Calls the backend service's `getOffers` method with the id. Recieves a `PznOffer`, generates a query from it and provides it via the `onQuery` output as Observable of type `Query` from the WCH Angular SDK.

#### AbstractAnalyticsService abstract class

Your clientside analytics should provide a service extending this class. The service should expose an Observable `onPznContext`. The injection token to provide it should be the `ANALYTICS_SERVICE_TOKEN` from this module.

```typescript
    onPznContext: Observable<PznContext>;
```

#### AbstractBackendService abstract class

Your backend abstraction should provide a service extending this class. The service should expose a function `getOffers`, an Observer `session` and an Observer `refresh`, that triggers a reload of all offers on the page. The injection token to provide it should be the `BACKEND_SERVICE_TOKEN` from this module.

```typescript
    session: Observer<PznContext>;

    refresh: Observer<any>;

    getOffers: (id: string) => Observable<PznOffer>;
```

#### Interface PznContext

An interface for structuring contextual information

```typescript
export interface PznContext {
    [key: string]: string;
}
```

#### Interface PznOffer

Use this interface to create valid offers

```typescript
export type PznOffer = {
    'sortOrder': string;
    'display': boolean;
    'rows': string;
    [key: string]: string \| boolean;
};
```

Sample implementation
---------------------

#### Demo implementation of `AbstractAnalyticsService`:

`ibm-wch-sdk-ng-demo-analytics` on npm

#### Demo implementation of `AbstractBackendService`:

`ibm-wch-sdk-ng-demo-backend-abstraction` on npm

## Index

### External modules

* ["components/interactionpoint/abstractInteractionpointComponent"](#_8013e6ac95e2fd04a81614dfa59a1cfa5db1987e8b7c1ff7d553ba9cf4ec2609)
* ["components/interactionpoint/typeInteractionpointComponent"](#_43fbe6fb2b0f45d8059066cd80f84ea36b8f75f201a00f0078b9061766c6aa69)
* ["index"](#_d53838c3180bb9a0e5494e993ceb8942c9866e807f2cfe89645b7e36005a0cf8)
* ["interfaces/pzn.context"](#_c1b0b69445be2b9f4528086824e07535b0f828387e826c1608fe2ccf1467948e)
* ["layouts/interactionpoint/interactionpointLayout"](#_6e7e0d54fa1c74a45143c4721e060073bbb759720c1230dc130b66f7022b4839)
* ["module"](#_1e2adf2f10b7c6d3f1400cef07b9d1abad4253d5b94cfa77442f7094d1ed888d)
* ["services/pzn/analytics.service"](#_569fad258786ae84e48dffdaca809b02000ac347a5ed60801313e3c369c763df)
* ["services/pzn/backend.service"](#_b69ddbbdb813b2aef3a838f3c3f438c2c53443cde1d2cb90445cb35787482ae2)

---


<a name="_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/interactionpoint/abstractInteractionpointComponent"](#_8013e6ac95e2fd04a81614dfa59a1cfa5db1987e8b7c1ff7d553ba9cf4ec2609) > [AbstractInteractionpointComponent](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)

# Class: AbstractInteractionpointComponent

## Hierarchy

 `AbstractRenderingComponent`

**↳ AbstractInteractionpointComponent**

↳  [TypeInteractionpointComponent](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)

## Implements

* `OnInit`
* `OnDestroy`
* `OnChanges`
* `DoCheck`
* `AfterContentInit`
* `AfterContentChecked`
* `AfterViewInit`
* `AfterViewChecked`
* `OnDestroy`
* `RenderingContextProvider`

## Index

### Constructors

* [constructor](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)

### Properties

* [_id](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [context](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [layoutMode](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [name](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onAfterContentChecked](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onAfterContentInit](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onAfterViewChecked](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onAfterViewInit](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onDoCheck](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onLayoutMode](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onName](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onOnChanges](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onOnDestroy](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onOnInit](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [onRenderingContext](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [renderingContext](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)

### Methods

* [describeSetter](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [ngAfterContentChecked](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [ngAfterContentInit](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [ngAfterViewChecked](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [ngAfterViewInit](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [ngDoCheck](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [ngOnChanges](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [ngOnDestroy](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [ngOnInit](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [safeSubscribe](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [trackByComponentId](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)
* [unsubscribeOnDestroy](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)

---

## Constructors

<a id="constructor"></a>

### `<Protected>` constructor

⊕ **new AbstractInteractionpointComponent**(): [AbstractInteractionpointComponent](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)

*Overrides AbstractRenderingComponent.__constructor*

*Defined in components/interactionpoint/abstractInteractionpointComponent.ts:34*

**Returns:** [AbstractInteractionpointComponent](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)

___

## Properties

<a id="_id"></a>

### `<Protected>` _id

**● _id**: *`string`*

*Inherited from AbstractRenderingComponent._id*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:7*

___
<a id="context"></a>

### `<Protected>` context

**● context**: *`Observable`<`RenderingContext`>*

*Inherited from AbstractRenderingComponent.context*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:19*

___
<a id="layoutmode"></a>

###  layoutMode

**● layoutMode**: *`string`*

*Inherited from AbstractRenderingComponent.layoutMode*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:17*

The current layout mode for convenience

___
<a id="name"></a>

###  name

**● name**: *`string`*

*Defined in components/interactionpoint/abstractInteractionpointComponent.ts:34*

___
<a id="onaftercontentchecked"></a>

### `<Protected>` onAfterContentChecked

**● onAfterContentChecked**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onAfterContentChecked*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:75*

*__see__*: AfterContentChecked

*__returns__*: the observable representation of this callback

___
<a id="onaftercontentinit"></a>

### `<Protected>` onAfterContentInit

**● onAfterContentInit**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onAfterContentInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:80*

*__see__*: AfterContentInit

*__returns__*: the observable representation of this callback

___
<a id="onafterviewchecked"></a>

### `<Protected>` onAfterViewChecked

**● onAfterViewChecked**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onAfterViewChecked*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:65*

*__see__*: AfterViewChecked

*__returns__*: the observable representation of this callback

___
<a id="onafterviewinit"></a>

### `<Protected>` onAfterViewInit

**● onAfterViewInit**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onAfterViewInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:70*

*__see__*: AfterViewInit

*__returns__*: the observable representation of this callback

___
<a id="ondocheck"></a>

### `<Protected>` onDoCheck

**● onDoCheck**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onDoCheck*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:85*

*__see__*: DoCheck

*__returns__*: the observable representation of this callback

___
<a id="onlayoutmode"></a>

###  onLayoutMode

**● onLayoutMode**: *`Observable`<`string`>*

*Inherited from AbstractRenderingComponent.onLayoutMode*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:9*

___
<a id="onname"></a>

###  onName

**● onName**: *`Observable`<`string`>*

*Defined in components/interactionpoint/abstractInteractionpointComponent.ts:28*

___
<a id="ononchanges"></a>

### `<Protected>` onOnChanges

**● onOnChanges**: *`Observable`<`SimpleChanges`>*

*Inherited from AbstractLifeCycleComponent.onOnChanges*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:90*

*__see__*: OnChanges

*__returns__*: the observable representation of this callback

___
<a id="onondestroy"></a>

### `<Protected>` onOnDestroy

**● onOnDestroy**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onOnDestroy*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:100*

*__see__*: OnDestroy

*__returns__*: the observable representation of this callback

___
<a id="ononinit"></a>

### `<Protected>` onOnInit

**● onOnInit**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onOnInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:95*

*__see__*: OnInit

*__returns__*: the observable representation of this callback

___
<a id="onrenderingcontext"></a>

###  onRenderingContext

**● onRenderingContext**: *`Observable`<`RenderingContext`>*

*Inherited from AbstractRenderingComponent.onRenderingContext*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:8*

___
<a id="renderingcontext"></a>

###  renderingContext

**● renderingContext**: *`RenderingContext`*

*Inherited from AbstractRenderingComponent.renderingContext*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:13*

The current rendering context for convenience

___

## Methods

<a id="describesetter"></a>

### `<Protected>` describeSetter

▸ **describeSetter**<`T`>(aSubject: *`Subject`<`T`>*): `PropertyDescriptor`

*Inherited from AbstractLifeCycleComponent.describeSetter*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:121*

Returns a property descriptor for a setter that dispatches to the given subject. The subject will automatically be completed and unsubscribed on the onDestroy method. The resulting descriptor may be used to define input properties in the closure of the constructor of a component.

*__deprecated__*: use createSetter instead

**Type parameters:**

#### T 
**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aSubject | `Subject`<`T`> |  the subject |

**Returns:** `PropertyDescriptor`
the property descriptor

___
<a id="ngaftercontentchecked"></a>

###  ngAfterContentChecked

▸ **ngAfterContentChecked**(): `void`

*Inherited from AbstractLifeCycleComponent.ngAfterContentChecked*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:35*

*__see__*: AfterContentChecked

*__override__*: 

**Returns:** `void`

___
<a id="ngaftercontentinit"></a>

###  ngAfterContentInit

▸ **ngAfterContentInit**(): `void`

*Inherited from AbstractLifeCycleComponent.ngAfterContentInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:40*

*__see__*: AfterContentInit

*__override__*: 

**Returns:** `void`

___
<a id="ngafterviewchecked"></a>

###  ngAfterViewChecked

▸ **ngAfterViewChecked**(): `void`

*Inherited from AbstractLifeCycleComponent.ngAfterViewChecked*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:25*

*__see__*: AfterViewChecked

*__override__*: 

**Returns:** `void`

___
<a id="ngafterviewinit"></a>

###  ngAfterViewInit

▸ **ngAfterViewInit**(): `void`

*Inherited from AbstractLifeCycleComponent.ngAfterViewInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:30*

*__see__*: AfterViewInit

*__override__*: 

**Returns:** `void`

___
<a id="ngdocheck"></a>

###  ngDoCheck

▸ **ngDoCheck**(): `void`

*Inherited from AbstractLifeCycleComponent.ngDoCheck*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:45*

*__see__*: DoCheck

*__override__*: 

**Returns:** `void`

___
<a id="ngonchanges"></a>

###  ngOnChanges

▸ **ngOnChanges**(changes: *`SimpleChanges`*): `void`

*Inherited from AbstractLifeCycleComponent.ngOnChanges*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:50*

*__see__*: OnChanges

*__override__*: 

**Parameters:**

| Name | Type |
| ------ | ------ |
| changes | `SimpleChanges` |

**Returns:** `void`

___
<a id="ngondestroy"></a>

###  ngOnDestroy

▸ **ngOnDestroy**(): `void`

*Inherited from AbstractRenderingComponent.ngOnDestroy*

*Overrides AbstractLifeCycleComponent.ngOnDestroy*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:21*

**Returns:** `void`

___
<a id="ngoninit"></a>

###  ngOnInit

▸ **ngOnInit**(): `void`

*Inherited from AbstractLifeCycleComponent.ngOnInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:55*

*__see__*: OnInit

*__override__*: 

**Returns:** `void`

___
<a id="safesubscribe"></a>

###  safeSubscribe

▸ **safeSubscribe**<`T`>(aObservable: *`Subscribable`<`T`>*, aObserver?: *`PartialObserver`<`T`> \| `function` \| `string`*, error?: *`function`*, complete?: *`function`*): `void`

*Inherited from AbstractLifeCycleComponent.safeSubscribe*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:134*

Subscribes to an observable and makes sure to clean the subscription in ngOnDestroy to avoid memory leaks.

*__deprecated__*: use `takeUntil(onOnDestroy)` instead

**Type parameters:**

#### T 
**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aObservable | `Subscribable`<`T`> |  the observable to subscribe to |
| `Optional` aObserver | `PartialObserver`<`T`> \| `function` \| `string` |  the handler. If this value is a 'string', then the subscription will automatically update the respective property on the instance. |
| `Optional` error | `function` |  optional error handler |
| `Optional` complete | `function` |  optional completion handler |

**Returns:** `void`

___
<a id="trackbycomponentid"></a>

###  trackByComponentId

▸ **trackByComponentId**(aIndex: *`number`*, aRenderingContext: *`RenderingContext`*): `string`

*Inherited from AbstractRenderingComponent.trackByComponentId*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:20*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aIndex | `number` |
| aRenderingContext | `RenderingContext` |

**Returns:** `string`

___
<a id="unsubscribeondestroy"></a>

### `<Protected>` unsubscribeOnDestroy

▸ **unsubscribeOnDestroy**(aSubscription: *`Subscription`*): `void`

*Inherited from AbstractLifeCycleComponent.unsubscribeOnDestroy*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:109*

Unsubscribes the given subscription in the ngOnDestroy method. This method exists for convenience only, consider to use the {@link #safeSubscribe} method instead.

*__deprecated__*: use `takeUntil(onOnDestroy)` instead

**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aSubscription | `Subscription` |  the subscription to unsubscribe on |

**Returns:** `void`

___


<a name="_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/interactionpoint/typeInteractionpointComponent"](#_43fbe6fb2b0f45d8059066cd80f84ea36b8f75f201a00f0078b9061766c6aa69) > [TypeInteractionpointComponent](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)

# Class: TypeInteractionpointComponent

## Hierarchy

↳  [AbstractInteractionpointComponent](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)

**↳ TypeInteractionpointComponent**

↳  [InteractionpointLayoutComponent](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)

## Implements

* `OnInit`
* `OnDestroy`
* `OnChanges`
* `DoCheck`
* `AfterContentInit`
* `AfterContentChecked`
* `AfterViewInit`
* `AfterViewChecked`
* `OnDestroy`
* `RenderingContextProvider`

## Index

### Constructors

* [constructor](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)

### Properties

* [_id](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [context](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [layoutMode](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [name](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onAfterContentChecked](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onAfterContentInit](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onAfterViewChecked](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onAfterViewInit](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onDisplay](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onDoCheck](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onLayoutMode](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onName](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onOnChanges](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onOnDestroy](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onOnInit](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onQuery](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [onRenderingContext](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [renderingContext](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)

### Methods

* [describeSetter](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [ngAfterContentChecked](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [ngAfterContentInit](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [ngAfterViewChecked](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [ngAfterViewInit](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [ngDoCheck](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [ngOnChanges](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [ngOnDestroy](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [ngOnInit](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [safeSubscribe](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [trackByComponentId](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)
* [unsubscribeOnDestroy](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)

---

## Constructors

<a id="constructor"></a>

###  constructor

⊕ **new TypeInteractionpointComponent**(aInjector: *`Injector`*): [TypeInteractionpointComponent](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)

*Overrides [AbstractInteractionpointComponent](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de).[constructor](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)*

*Defined in components/interactionpoint/typeInteractionpointComponent.ts:34*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aInjector | `Injector` |

**Returns:** [TypeInteractionpointComponent](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)

___

## Properties

<a id="_id"></a>

### `<Protected>` _id

**● _id**: *`string`*

*Inherited from AbstractRenderingComponent._id*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:7*

___
<a id="context"></a>

### `<Protected>` context

**● context**: *`Observable`<`RenderingContext`>*

*Inherited from AbstractRenderingComponent.context*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:19*

___
<a id="layoutmode"></a>

###  layoutMode

**● layoutMode**: *`string`*

*Inherited from AbstractRenderingComponent.layoutMode*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:17*

The current layout mode for convenience

___
<a id="name"></a>

###  name

**● name**: *`string`*

*Inherited from [AbstractInteractionpointComponent](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de).[name](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)*

*Defined in components/interactionpoint/abstractInteractionpointComponent.ts:34*

___
<a id="onaftercontentchecked"></a>

### `<Protected>` onAfterContentChecked

**● onAfterContentChecked**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onAfterContentChecked*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:75*

*__see__*: AfterContentChecked

*__returns__*: the observable representation of this callback

___
<a id="onaftercontentinit"></a>

### `<Protected>` onAfterContentInit

**● onAfterContentInit**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onAfterContentInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:80*

*__see__*: AfterContentInit

*__returns__*: the observable representation of this callback

___
<a id="onafterviewchecked"></a>

### `<Protected>` onAfterViewChecked

**● onAfterViewChecked**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onAfterViewChecked*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:65*

*__see__*: AfterViewChecked

*__returns__*: the observable representation of this callback

___
<a id="onafterviewinit"></a>

### `<Protected>` onAfterViewInit

**● onAfterViewInit**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onAfterViewInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:70*

*__see__*: AfterViewInit

*__returns__*: the observable representation of this callback

___
<a id="ondisplay"></a>

###  onDisplay

**● onDisplay**: *`Observable`<`boolean`>*

*Defined in components/interactionpoint/typeInteractionpointComponent.ts:34*

___
<a id="ondocheck"></a>

### `<Protected>` onDoCheck

**● onDoCheck**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onDoCheck*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:85*

*__see__*: DoCheck

*__returns__*: the observable representation of this callback

___
<a id="onlayoutmode"></a>

###  onLayoutMode

**● onLayoutMode**: *`Observable`<`string`>*

*Inherited from AbstractRenderingComponent.onLayoutMode*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:9*

___
<a id="onname"></a>

###  onName

**● onName**: *`Observable`<`string`>*

*Inherited from [AbstractInteractionpointComponent](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de).[onName](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)*

*Defined in components/interactionpoint/abstractInteractionpointComponent.ts:28*

___
<a id="ononchanges"></a>

### `<Protected>` onOnChanges

**● onOnChanges**: *`Observable`<`SimpleChanges`>*

*Inherited from AbstractLifeCycleComponent.onOnChanges*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:90*

*__see__*: OnChanges

*__returns__*: the observable representation of this callback

___
<a id="onondestroy"></a>

### `<Protected>` onOnDestroy

**● onOnDestroy**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onOnDestroy*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:100*

*__see__*: OnDestroy

*__returns__*: the observable representation of this callback

___
<a id="ononinit"></a>

### `<Protected>` onOnInit

**● onOnInit**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onOnInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:95*

*__see__*: OnInit

*__returns__*: the observable representation of this callback

___
<a id="onquery"></a>

###  onQuery

**● onQuery**: *`Observable`<`Query`>*

*Defined in components/interactionpoint/typeInteractionpointComponent.ts:31*

___
<a id="onrenderingcontext"></a>

###  onRenderingContext

**● onRenderingContext**: *`Observable`<`RenderingContext`>*

*Inherited from AbstractRenderingComponent.onRenderingContext*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:8*

___
<a id="renderingcontext"></a>

###  renderingContext

**● renderingContext**: *`RenderingContext`*

*Inherited from AbstractRenderingComponent.renderingContext*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:13*

The current rendering context for convenience

___

## Methods

<a id="describesetter"></a>

### `<Protected>` describeSetter

▸ **describeSetter**<`T`>(aSubject: *`Subject`<`T`>*): `PropertyDescriptor`

*Inherited from AbstractLifeCycleComponent.describeSetter*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:121*

Returns a property descriptor for a setter that dispatches to the given subject. The subject will automatically be completed and unsubscribed on the onDestroy method. The resulting descriptor may be used to define input properties in the closure of the constructor of a component.

*__deprecated__*: use createSetter instead

**Type parameters:**

#### T 
**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aSubject | `Subject`<`T`> |  the subject |

**Returns:** `PropertyDescriptor`
the property descriptor

___
<a id="ngaftercontentchecked"></a>

###  ngAfterContentChecked

▸ **ngAfterContentChecked**(): `void`

*Inherited from AbstractLifeCycleComponent.ngAfterContentChecked*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:35*

*__see__*: AfterContentChecked

*__override__*: 

**Returns:** `void`

___
<a id="ngaftercontentinit"></a>

###  ngAfterContentInit

▸ **ngAfterContentInit**(): `void`

*Inherited from AbstractLifeCycleComponent.ngAfterContentInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:40*

*__see__*: AfterContentInit

*__override__*: 

**Returns:** `void`

___
<a id="ngafterviewchecked"></a>

###  ngAfterViewChecked

▸ **ngAfterViewChecked**(): `void`

*Inherited from AbstractLifeCycleComponent.ngAfterViewChecked*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:25*

*__see__*: AfterViewChecked

*__override__*: 

**Returns:** `void`

___
<a id="ngafterviewinit"></a>

###  ngAfterViewInit

▸ **ngAfterViewInit**(): `void`

*Inherited from AbstractLifeCycleComponent.ngAfterViewInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:30*

*__see__*: AfterViewInit

*__override__*: 

**Returns:** `void`

___
<a id="ngdocheck"></a>

###  ngDoCheck

▸ **ngDoCheck**(): `void`

*Inherited from AbstractLifeCycleComponent.ngDoCheck*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:45*

*__see__*: DoCheck

*__override__*: 

**Returns:** `void`

___
<a id="ngonchanges"></a>

###  ngOnChanges

▸ **ngOnChanges**(changes: *`SimpleChanges`*): `void`

*Inherited from AbstractLifeCycleComponent.ngOnChanges*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:50*

*__see__*: OnChanges

*__override__*: 

**Parameters:**

| Name | Type |
| ------ | ------ |
| changes | `SimpleChanges` |

**Returns:** `void`

___
<a id="ngondestroy"></a>

###  ngOnDestroy

▸ **ngOnDestroy**(): `void`

*Inherited from AbstractRenderingComponent.ngOnDestroy*

*Overrides AbstractLifeCycleComponent.ngOnDestroy*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:21*

**Returns:** `void`

___
<a id="ngoninit"></a>

###  ngOnInit

▸ **ngOnInit**(): `void`

*Inherited from AbstractLifeCycleComponent.ngOnInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:55*

*__see__*: OnInit

*__override__*: 

**Returns:** `void`

___
<a id="safesubscribe"></a>

###  safeSubscribe

▸ **safeSubscribe**<`T`>(aObservable: *`Subscribable`<`T`>*, aObserver?: *`PartialObserver`<`T`> \| `function` \| `string`*, error?: *`function`*, complete?: *`function`*): `void`

*Inherited from AbstractLifeCycleComponent.safeSubscribe*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:134*

Subscribes to an observable and makes sure to clean the subscription in ngOnDestroy to avoid memory leaks.

*__deprecated__*: use `takeUntil(onOnDestroy)` instead

**Type parameters:**

#### T 
**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aObservable | `Subscribable`<`T`> |  the observable to subscribe to |
| `Optional` aObserver | `PartialObserver`<`T`> \| `function` \| `string` |  the handler. If this value is a 'string', then the subscription will automatically update the respective property on the instance. |
| `Optional` error | `function` |  optional error handler |
| `Optional` complete | `function` |  optional completion handler |

**Returns:** `void`

___
<a id="trackbycomponentid"></a>

###  trackByComponentId

▸ **trackByComponentId**(aIndex: *`number`*, aRenderingContext: *`RenderingContext`*): `string`

*Inherited from AbstractRenderingComponent.trackByComponentId*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:20*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aIndex | `number` |
| aRenderingContext | `RenderingContext` |

**Returns:** `string`

___
<a id="unsubscribeondestroy"></a>

### `<Protected>` unsubscribeOnDestroy

▸ **unsubscribeOnDestroy**(aSubscription: *`Subscription`*): `void`

*Inherited from AbstractLifeCycleComponent.unsubscribeOnDestroy*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:109*

Unsubscribes the given subscription in the ngOnDestroy method. This method exists for convenience only, consider to use the {@link #safeSubscribe} method instead.

*__deprecated__*: use `takeUntil(onOnDestroy)` instead

**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aSubscription | `Subscription` |  the subscription to unsubscribe on |

**Returns:** `void`

___


<a name="_545b3dc516acc99737c00c782a0879f01ce0b44a004c8d4e262834407f044841"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["interfaces/pzn.context"](#_c1b0b69445be2b9f4528086824e07535b0f828387e826c1608fe2ccf1467948e) > [PznContext](#_545b3dc516acc99737c00c782a0879f01ce0b44a004c8d4e262834407f044841)

# Interface: PznContext

## Hierarchy

**PznContext**

## Indexable

\[key: `string`\]:&nbsp;`string`
## Index

---


<a name="_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601"></a>
[@ibm-wch-sdk/ng-pzn](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["layouts/interactionpoint/interactionpointLayout"](#_6e7e0d54fa1c74a45143c4721e060073bbb759720c1230dc130b66f7022b4839) > [InteractionpointLayoutComponent](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)

# Class: InteractionpointLayoutComponent

## Hierarchy

↳  [TypeInteractionpointComponent](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)

**↳ InteractionpointLayoutComponent**

## Implements

* `OnInit`
* `OnDestroy`
* `OnChanges`
* `DoCheck`
* `AfterContentInit`
* `AfterContentChecked`
* `AfterViewInit`
* `AfterViewChecked`
* `OnDestroy`
* `RenderingContextProvider`

## Index

### Constructors

* [constructor](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)

### Properties

* [_id](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [context](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [layoutMode](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [name](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onAfterContentChecked](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onAfterContentInit](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onAfterViewChecked](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onAfterViewInit](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onDisplay](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onDoCheck](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onLayoutMode](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onName](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onOnChanges](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onOnDestroy](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onOnInit](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onQuery](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [onRenderingContext](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [renderingContext](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)

### Methods

* [describeSetter](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [ngAfterContentChecked](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [ngAfterContentInit](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [ngAfterViewChecked](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [ngAfterViewInit](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [ngDoCheck](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [ngOnChanges](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [ngOnDestroy](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [ngOnInit](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [safeSubscribe](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [trackByComponentId](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)
* [unsubscribeOnDestroy](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)

---

## Constructors

<a id="constructor"></a>

###  constructor

⊕ **new InteractionpointLayoutComponent**(aInjector: *`Injector`*): [InteractionpointLayoutComponent](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)

*Overrides [TypeInteractionpointComponent](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786).[constructor](#_534904eae30c6888b6c2cd3e228ead1157b61fa450593e315b4b839658951786)*

*Defined in layouts/interactionpoint/interactionpointLayout.ts:21*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aInjector | `Injector` |

**Returns:** [InteractionpointLayoutComponent](#_befdce4c32dd4c73ae45f3870194b50c30ce8b2a4f156dac54ca151cd4f18601)

___

## Properties

<a id="_id"></a>

### `<Protected>` _id

**● _id**: *`string`*

*Inherited from AbstractRenderingComponent._id*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:7*

___
<a id="context"></a>

### `<Protected>` context

**● context**: *`Observable`<`RenderingContext`>*

*Inherited from AbstractRenderingComponent.context*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:19*

___
<a id="layoutmode"></a>

###  layoutMode

**● layoutMode**: *`string`*

*Inherited from AbstractRenderingComponent.layoutMode*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract-rendering.component.d.ts:17*

The current layout mode for convenience

___
<a id="name"></a>

###  name

**● name**: *`string`*

*Inherited from [AbstractInteractionpointComponent](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de).[name](#_1d5317cbe65b4e873b98ff882adeb5cfdc5916f7ea44270effb10c63d70c88de)*

*Defined in components/interactionpoint/abstractInteractionpointComponent.ts:34*

___
<a id="onaftercontentchecked"></a>

### `<Protected>` onAfterContentChecked

**● onAfterContentChecked**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onAfterContentChecked*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:75*

*__see__*: AfterContentChecked

*__returns__*: the observable representation of this callback

___
<a id="onaftercontentinit"></a>

### `<Protected>` onAfterContentInit

**● onAfterContentInit**: *`Observable`<`void`>*

*Inherited from AbstractLifeCycleComponent.onAfterContentInit*

*Defined in /usr/build/node_modules/@ibm-wch-sdk/ng/src/components/rendering/abstract.lifecycle.component.d.ts:80*

*__see__*: Aft