npm package: @ibm-wch-sdk/ng
Description: Software development kit to simplify the development of Angular based single page applications against Watson Content Hub.
Latest version: 6.0.524

<a name="_6413c217ac070f0cc888ef237e5f77bca091ed14c4a6b017e8102394c2fc842d"></a>
# IBM Angular SDK for Watson Content Hub

[![NPM version](https://badge.fury.io/js/@ibm-wch-sdk/ng.svg)](https://npmjs.org/package/@ibm-wch-sdk/ng)

This module represents a [software development kit](https://en.wikipedia.org/wiki/Software_development_kit) (SDK) that can be used by [Angular 4](https://angular.io/docs/ts/latest/) based applications to build [single page applications](https://en.wikipedia.org/wiki/Single-page_application) (SPA) against [Watson Content Hub](https://www.ibm.com/bs-en/marketplace/cloud-cms-solution) (WCH) managed pages.

## Changes

[CHANGELOG](#_20bdb6f8aeaf2e57d73cf0f8f7596ac3a05ab33429cf49a686e6738debcd4512)

## Usage

```bash
npm install --save @ibm-wch-sdk/ng
```

## Class documentation

Refer to the [documentation](#_28a07594e891c43454fa39c2c573639385bbf768c0897d05c3db61d89570388b).

## Components

The SDK defines one top level [module](#_4f5f0d570547cc32a6c26a19831659ff187906f3e173dec4cc7caa8b01b03375) module for use in the application component.

```typescript
imports: [
    ...
    WchNgModule.forRoot({ apiUrl: new URL(apiUrl), deliveryUrl: new URL(deliveryUrl) })
    ...
]
```

# First steps

Building an application for WCH involves a client side and a server side step. During the server side step you create your content in WCH. During the client side step you build your Angular 4 application that consumers the content.

## Prerequisites

- Install a [node environment](https://docs.npmjs.com/getting-started/installing-node) with [Node >= 4](https://nodejs.org/en/) and [NPM >= 3](https://www.npmjs.com/).
- Make sure you have a text editor installed. For editing [Typescript](https://www.typescriptlang.org/) we recommend [Visual Studio Code](https://code.visualstudio.com/), consider installing also these [extensions](https://medium.com/frontend-coach/7-must-have-visual-studio-code-extensions-for-angular-af9c476147fd).

## Server Side

Please refer to the [Server Side Setup](https://github.ibm.com/DX/prod-delivery-render/wiki/How-To-setup-a-tenant-for-client-side-rendering) instructions.

## Client Side

First install [angular-cli](https://github.com/angular/angular-cli) using

```bash
npm install -g @angular/cli
```

Bootstrap your angular application

```bash
ng new PROJECT-NAME
cd PROJECT-NAME
```

Install the WCH SDK and its peer dependencies:

```bash
npm install --save @ibm-wch-sdk/ng
```

Create [angular components](https://angular.io/api/core/Component) for the layouts defined during the server setup.

```bash
ng g component layouts/MY_COMPONENT
```

Add a [layout selector](#_79e64e744e1a60fe26344df9abd530ef32849774b9c22887da485e3d35a9e9d6) to your component. The selector creates the connection between the layout identifier and the angular component. In addition it is convenient (but not required) to subclass your new component from [AbstractRenderingComponent](#_c67a54fbe639545fc8ecc33a206087da27aab36585eca9f5671d52da5484a234). Make the following changes to the `MY_COMPONENT.ts` file created in the step before:

```typescript
import { LayoutComponent, AbstractRenderingComponent } from '@ibm-wch-sdk/ng';

@LayoutComponent({
  selector: ['MY_COMPONENT_SELECTOR']
})
@Component({
    ...
})
export class MyComponent extends AbstractRenderingComponent {

    constructor() {
        super();
    }
}
```

Make sure to add your new layout to the set of entry components of the main module, because the component will be instantiated dynamically:

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

You will typically run your application in local development mode, first. Configure it to use the WCH server and tenant of your choice as the backend service. Do this by adding the configured [WchModule](#_4f5f0d570547cc32a6c26a19831659ff187906f3e173dec4cc7caa8b01b03375) to the main application module. A convenient way to configure this module is via the `environment` config file. The CLI will automatically select the correct file depending on your development environment (e.g. `dev` vs. `production`).

```typescript
import { WchModule } from '@ibm-wch-sdk/ng';
import { environment } from '../environments/environment';
...
@NgModule({
...
  imports: [
    ...
    WchNgModule.forRoot(environment)
    ...
  ]
})
export class AppModule {
}
```

The content of the environment file for local development might look like this:

```typescript
const HOSTNAME = 'dch-dxcloud.rtp.raleigh.ibm.com';
const TENANT_ID = '7576818c-ca11-4b86-b03d-333313c4f0ad';
export const apiUrl = `http://${HOSTNAME}/api/${TENANT_ID}`;

export const environment = {
  production: false,
  apiUrl
};
```

In a last step you'll add [routing](#_cd96c202ef926a9a7797f271485fb9854430c1b72b0204252b468c1959ffadc7) to the application. The easiest way is to configure all routes to be served by [WCH pages](#_cd96c202ef926a9a7797f271485fb9854430c1b72b0204252b468c1959ffadc7). For this create the following router config and add it to your main application module:

```typescript
import { PageComponent } from '@ibm-wch-sdk/ng';
...
import { RouterModule, Routes } from '@angular/router';
...

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: '**',
    component: PageComponent
  }
];

@NgModule({
    ...
  imports: [
    RouterModule.forRoot(appRoutes),
    ...
  ]
})
export class AppModule {
}
```

Start your local development server and enjoy:

```bash
ng serve
```

## Note

### Using the development version of the NPM registry

Add the file `.npmrc` to your application folder:

```text
registry = http://wats-repob.devlab.ibm.com
@request:registry=https://registry.npmjs.org/
@types:registry=https://registry.npmjs.org/
@angular:registry=https://registry.npmjs.org/
@ngtools:registry=https://registry.npmjs.org/
```

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

## Current

## Added

- support for registering a layout per layout mode

## Changes

- the life cycle observables `onOnInit` and `onOnDestroy` have replay semantics, i.e. they fire for each consumer that attaches to the hooks.

## Breaking Changes

- Removed the `ComponentOutput` events. Use the component events and subscribe to the component instance, instead.

## 6.0.69

## Breaking Changes

- Migrated to `rxjs 6.x`, all rx related code has to use the new imports
- Changes the SDK coordinates to use the `@ibm-wch-sdk/` namespace
- Removed `InjectorService` since dependency injection should NOT be done via `Injector` classes, directly

### Changes

- Layout components are now created synchronously, instead of asynchronously to prevent flickering

### Added

- Support for tree-shakeable services
- New `ContentResolver` service to support manual resolution of lazy loaded content
- Support for lazy loading using the `Router` component
- Support for dynamic pages
- Support for `group` elements
- Support for Angular 6

## 5.0.107 - 2018-02-28

## Breaking Changes

- Renamed `ContentWithLayout` to `ContentItemWithLayout`.

### Changes

- Split the module into the API module `ibm-wch-sdk-api` and the implementation module `ibm-wch-sdk-ng`. No breaking change expected, since the API is re-exported by the implementation module. I recommend however to reference the exports from the API module rather than those from the implementation module.

## 1.0.830 - 2018-01-16

### Added

- New `SearchService`
- New `luceneEscapeTerm` and `luceneEscapeKeyValue` methods to simplify the generation of search queries
- Support for `optionselection` elements

### Changed

- Updated HTTP transport layer from deprecated [Http](https://angular.io/api/http/Http) to [HttpClient](https://angular.io/api/common/http/HttpClient). Requires minimum angular dependency of `4.3.0`.

## 1.0.771 - 2018-01-16

### Added

- New `WchLoggerService`
- New `WchInfoService`
- Adding `describeSetter` in 'AbstractLifeCycleComponent'
- Basic support for new `[wchEditable]` directive
- Support for `levels` parameter in `wch-contentref`

### Fixed

- Compatibility to Angular 5

<a name="_28a07594e891c43454fa39c2c573639385bbf768c0897d05c3db61d89570388b"></a>

#  @ibm-wch-sdk/ng

## Index

### External modules

* ["components/content/content.component"](#_47a4e4e6301d50fbcfa72c9789a371bf69f93da3df6d3436dc42d4ddb74e8511)
* ["components/contentquery/contentquery.component"](#_93f6b97f4607102d6f3bbacce22cf2e0ca8662d6aa4406b243bb7e0706019732)
* ["components/contentref/contentref.component"](#_d4bdb3fb4a00ecb7412c6cd2ee6c8884166d1f5097dbf0917fec6e8434383323)
* ["components/default/default.component"](#_e1325aefe2a16738536ab4b0fa51dda3f14d71c94d451451370c84435a5906d6)
* ["components/page/page.component"](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)
* ["components/pageref/pageref.component"](#_b38a9c2426d197e2101c4f28ad6dc39d55c5ac9d09517fb2ba622d44ca90d71c)
* ["components/path/content.path.component"](#_64905140e71b82e994572a474691f29febfc8f676415ede01c6aff91ebb6d74e)
* ["components/rendering/abstract-base.component"](#_d2f8cc6d2576983326e6074110c719555b34559b370fa672500b867df69dc64d)
* ["components/rendering/abstract-rendering.component"](#_ac54ba022492debe11f810df44e5b6c94152d29d7ffc2722cff7fd2cf20c3162)
* ["components/rendering/abstract.lifecycle.component"](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* ["components/site/site.component"](#_8565e40ce385f5912f89e5943ebb8c8e326f762be872a9bf2ec4b2c24c78bc0c)
* ["decorators/bootstrap/rendering.context.bootstrap.decorator"](#_65c7127c8aae3506ec1132d7e6432461fc1f7a5ec628b13d79920e3858d53c2a)
* ["decorators/bootstrap/rendering.context.bootstrap.directive"](#_8948ea36b56ab123d94936b1386f6ac14f94d1e28ee9def5efec035d20119e2b)
* ["decorators/bootstrap/site.bootstrap.decorator"](#_12ecb09806f876fdba17138f8515bb663c9939183381bb584fb6ec70d1a26954)
* ["decorators/bootstrap/site.bootstrap.directive"](#_a73ed924f1b42311d81cbb058ae092a396b2aeb2bbca001e2bb504ab145db021)
* ["decorators/layout/layout.decorator"](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* ["decorators/layout/layout.directive"](#_3e9ea7e177735653a8e716f7a5c2185aae65630cad40022153736ff0b97c5287)
* ["directives/contentref.directive"](#_39707403633e6a0f8128553bcb7f90d9abdfcb93b6c12c8ea94e9b9ee59efc65)
* ["guards/root.page.guard"](#_bbe84b3cad7aca99fa17b914395d43d48b721e61c840dc93911b93fd4588c84f)
* ["index"](#_d53838c3180bb9a0e5494e993ceb8942c9866e807f2cfe89645b7e36005a0cf8)
* ["interfaces"](#_319992bd9642dee656c59d094557eacc8b390a49ab7f3a8c44a9ffb3e5a12015)
* ["interfaces/hub-context"](#_ba19199f9baea72e5d4361f38c1803c8df9fb16c0971bae9fbbb3dc0b816e094)
* ["internal/assert"](#_24b4760f65ef4efe01431182a8ea9c82b8c577f3a6caae785a085d108e38a974)
* ["module"](#_1e2adf2f10b7c6d3f1400cef07b9d1abad4253d5b94cfa77442f7094d1ed888d)
* ["modules/components.module"](#_ac395f8820e08b5a7b39bcf985084d84c19fe9e5a08bfaafcbc3a839960ddbbe)
* ["modules/services.module"](#_592bc31cea7e41c9a14b09ed740079f56fee2ee83bc91d3b963d6df2758cc23b)
* ["routing/default.routes"](#_41adc5704a54b446a326fb3718a6c4058987fc7ecb099e7ab319dd642a76c692)
* ["services/bootstrap/bootstrap.service"](#_238690f5b301836e922f4faffb225e6c2ba94c7a0bbe6e26a538d1844bee357a)
* ["services/components/components.service"](#_e8bdc4538796d3775639f2510f3c21bd6cc5959a90a7720c4204b0e12537b4fc)
* ["services/config/application.config"](#_a1f893f8f56b1cae17b5309c8f5601c11ecf0596382288255a336380c542f9c6)
* ["services/config/application.config.service"](#_477099d10fa76939ef984a7bef2a78677e3493a0f37f36694f63522553dac823)
* ["services/config/empty.application.config"](#_ef62cb61115b348c62d6dac898b969dd81c5dec64a8d9eebeecfab6dc3bba578)
* ["services/dependency/dependency.service"](#_67b62b5e3d9425c72d2712811b308d96ad30aaee92118beae53b51ecacd4b4c0)
* ["services/dependency/message"](#_85b5ae34a181e1ad4894e1e8dad42151b0c5d5d85b79f69b494b79af45172eb5)
* ["services/dependency/message/sdk.navigate.by.path.message"](#_4fd37deef1369440981c5bea10be009c10ed3c1af8bdfcaa9a6ba7f2ca527510)
* ["services/dependency/message/sdk.refresh.message"](#_d7de4cae77840961d9b97b0d122cca3903b74ad708939a072cc0b49e8b45f0f3)
* ["services/dependency/message/sdk.set.mode.message"](#_bc66f3d00a388469ee53e6da7216c2f2e660edfbda4a4f7be4e01993954e8fc3)
* ["services/dependency/message/sdk.subscribe.active.route.message"](#_67ac5f1008dc1cfd24df6db181b04afb58fb521497d59b8a624c2569f8ce0298)
* ["services/dependency/message/sdk.subscribe.message"](#_ed32045b8a1335725100c8f3211cce009cf23cd15c0d8bb97f32e798c9b3ac5a)
* ["services/dependency/message/sdk.subscribe.mode.message"](#_7605dc7b94d2d1ba7a21306eb6f45513c1d90ba160b198b28305345a9fd6038e)
* ["services/dependency/message/sdk.subscribe.route.message"](#_2990dd0a23614c98f0573d749d8eb1dcf18fe37a52122b3035eba1b71dcfc94e)
* ["services/dependency/sdk/jsonp/jsonp"](#_e73b51b57bbb52f83d7b90aa9e81ec225fd1a869ba72c15312772340e6ee394c)
* ["services/dependency/sdk/router/router"](#_ea2216930bca9af40708550f041b7546580a5f4f39fa2f17931fc2203a7b908b)
* ["services/dependency/sdk/sdk"](#_d4d321cd2871f00f5abcece77da82e20ecdd4740e78ff32b0fece4614e8067e3)
* ["services/dependency/sdk/search/search"](#_ab06c130522fcf9e96396d805d12068c1b5eb0ee4ff6c16dd5570e350b477eeb)
* ["services/dependency/sdk/version"](#_05f06bb3482059fcddd8ddb706c4fa907d649be0b4277b119e5ba14dcf163b5c)
* ["services/http/http.service"](#_b76be65ae3d6fd4e3de5dc14af9402d197c151df703edbd4fa1828380df48646)
* ["services/http/http.service.on.http.client"](#_bbf1a72512c3958c1ae1905b6b699afd6151de703126d3d655476f6b39dfa2ec)
* ["services/http/http.service.on.jsonp"](#_3ae0484b92fc276435e155eb1c95de47f60a2f6a1f729dd7c1866c5f58276d7c)
* ["services/hub-info/hub-info.service"](#_4042b0bc8caf4a014ac88375fd96996307a597ee34f5cd62c173b11d574470a2)
* ["services/hub-info/tokens"](#_9af0494a7b2e78ad7ca10896a46539612c019a725a9730f908041f9633024407)
* ["services/info/wch.info.service"](#_f2b93867d42dd81767ca63a2055cff0a2f8509b7557d37d4b582ccd053787032)
* ["services/logger/logger.service"](#_e45ed2d6c95f8032e24cf8a4af93c976c8fc0b27b8093f199b2e91676da8def6)
* ["services/logger/wch.logger.service"](#_988dd73902ec42cfc20af57b8f7e9191cef045d01d9226877d3e695a706547ae)
* ["services/mappings/mappings.service"](#_b499d6b246c9ac9c8b034a7d2ca08578f3592f3aae0ed0007365e7b5da2452d0)
* ["services/markup/markup.service"](#_85605ad3a49926c081a6af5d46471a7e826466ff15f37f709b3f81077cdc705a)
* ["services/page/active.page.service"](#_a4ea53f2c7b65b21b7e2184221f2b3862d8139ba9cc65562680b10b9685722a1)
* ["services/refresh/refresh.service"](#_2e92a7ed3b599e9a511bdde18efeaefbcfb4b67844625ca60124819e59a4c59b)
* ["services/resolver/content.resolver.service"](#_e18f458b7bd5da7c281de34f0a232c48f4f82b76b9b8aa0af88a8139d2c52473)
* ["services/search/search.service"](#_96f064481d6c8e3eee7e3b82e585d2928eed2ebbfaaf7aacaf7a3688df50583b)
* ["services/storage/storage.service"](#_8aa0e9fe6b6a8ebc3a606d4a650780769b65514b31fbc880342b606b0d885d4d)
* ["services/url/urls.service"](#_605c29efa87fd68948f00fce0e27c4e291723e61a88461e23c1c53f3bd4796b7)
* ["services/wch.service"](#_8a5df0e5082f7062b705290fa98e3b6a3ecfe304b81b1160f9157df57406dfa9)
* ["services/zone/zone.service"](#_e8355839cf5efcaa6787da7312ec826f5b593d08ace85004c634a7948269742e)
* ["utils/bootstrap.utils"](#_5f95ebfffe0d65359233860a67d6167214fc00cc7d75bd744dbd419f6620694a)
* ["utils/component.mapping.utils"](#_ffbc636367ef06e0ee569bfaae0c33da1c48b98408a90d156ec6414832579fc2)
* ["utils/component.utils"](#_ee0c175fd93f9b17f9cac13b3376c02cc62605a04b07d0038d64309bd85df344)
* ["utils/http.service"](#_fe1be40f7fb2503f05ea3ecfe8cca09d306aa65f541366620c18f6e7ff8793bf)
* ["utils/http.service.on.http"](#_e7f491cc047baffff178366380246d21aa1c50b6bf8cd504d62c25fb7ecce81f)
* ["utils/http.service.on.http.client"](#_ad90d4ca4c4f319fd22e1ba3241a2fc926d5586c7264e4f924a9ba4029e7ddf7)
* ["utils/http.service.on.jsonp"](#_411ae4dd6223b9b280967e0cd95aca3a894d409fc2736c5e6f7bbdaa9d6fbed2)
* ["utils/js.utils"](#_310034c1948afec413bfbc08d6fb77b0202e48f62b7eecc41f25f5988bea8604)
* ["utils/lazy.injector"](#_74dc82b9997334b36b3fcc2828a1e99df54a0d23f23ceb4d1fb2085892a31e2b)
* ["utils/markup.utils"](#_62b54450771258adbfd2e6a81f7b2d32eb5e7642cba11acbb1b2f02286107644)
* ["utils/page.utils"](#_7aaa94bc0f440d073c072f3dfff9c1942169556caab6d27d6180d82368459e56)
* ["utils/rx.utils"](#_36c9e0384fff01c522414ade6f0a22b0f3f59bb9dbfee8a306f9c7bd2ec263db)
* ["utils/site.utils"](#_f5c457d2581533c611d6f7a6ce1d921671e24c22316118e2022fd6ea1499dbe3)
* ["utils/symbol"](#_42cf5e1d3292b1a518d2263861df4b0888a67177c0759555bfe58d171da7108c)
* ["utils/url.utils"](#_964689b9f979ecd61600392e64d4965329b594c0c1dd8b6aee491352e21c82fc)
* ["utils/url.utils.ifaces"](#_3dee3d8866f017db816e01d3a699733075b65ebf9c836167f53c45b9d8b8ef71)
* ["utils/urls"](#_3d432b835af5234b55aebc3269d5e171c762fdb13cd8c5662f2a84ccf439015a)
* ["utils/wch.utils"](#_a7c3de10ef8144878b0277b8658c675b4cc8f8036ae0cb778fdc3e3b58d9a125)
* ["version"](#_99dec4bde79405c04fb886c872bdc6dafdcd0ba313ac8208f7d4e803dac28909)

---


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

The main SDK module exposes the [components](#_fa2f90834dc7bcb7615fc33319f9ed6a63f8c69fa277bfa7f08386c0beb5fb31) and [services](#_a4fb5ccb8be0067409dbd71e1f1701b0d371666d4e24d7ac516fa948efe2baa4) to be used by the application. Have a look at [development stories](#_df2af39a9ce6ae60564b5d3bf4a712b0f99fb73d05d18e7406d16cc900ddfa1f) for an explanation of usecases.

## Usage

```typescript
imports: [
    ...
    WchNgModule.forRoot({ apiUrl: new URL(apiUrl), deliveryUrl: new URL(deliveryUrl) })
    ...
]
```

Add the module to your main application module using the `forRoot` accessor method. The context passed to the accessor defines the [entry URLs](#_1ce319327f59a61dde8cdc287b1bee80a76b7aca861d7015641c6e96d9783027) into WCH.

## Tipps

For your convenience you can also keep the URLs as part of the `environment` properties. In this case pass the environment directly to the `forRoot` method and declare the urls as part of the environment object, e.g.

```typescript
import { environment } from '../environments/environment';
...
  imports: [
    ...
    WchNgModule.forRoot(environment)
  ],
```

with an environment properties file like this:

```typescript
export const environment = {
  production: false,
  apiUrl: new URL(apiUrl),
  deliveryUrl: new URL(deliveryUrl)
};
```

## Developing modules based on the SDK

When developing modules that use the SDK, make sure to import the [WchNgComponentsModule](#_575fbdac6e637d569d4bfacce517e04a7e73bf62dfb055457e96d0899919b8e3) to have access to the components and directives exposed by the SDK.

<a name="_79e64e744e1a60fe26344df9abd530ef32849774b9c22887da485e3d35a9e9d6"></a>
# LayoutDecorator
The layout decorator allow to assign a layout name to a component.

## Usage
```typescript
@LayoutComponent({
  selector: 'one-column'
})
@Component({
  selector: 'app-one-column',
  ...
})
export class OneColumnComponent extends AbstractRenderingComponent implements OnInit, OnDestroy {

```

or

```typescript
@LayoutComponent()
@Component({
  selector: 'app-one-column',
  ...
})
export class OneColumnComponent extends AbstractRenderingComponent implements OnInit, OnDestroy {

```

## Properties
* `selector`: the name of the layout. This matches the controller field in the layout descriptor. If this property is missing, then the selector of the component will be used as a fallback. The type of this field can be `string` or `string[]`. In the array form, all selectors in the array will be associated with the component.
* `mappingId?`: the optional mapping ID defines a fallback layout mapping, if no layout could be determined via WCH configuration. The ID carries either a content ID, a type ID or a type name.
* `layoutMode?`: the optional layout mode defines the mode that the fallback mapping applies to.

## Note
You can leave out the selector property on the `LayoutComponent` decorator. In this case the selector of the `Component` will be used as the name of the layout.

# LayoutMappingDecorator
The layout mapping decorator allows to register fallback layout mappings as decorations of a class.

## Parameters
* `id`: defines a fallback layout mapping, if no layout could be determined via WCH configuration. The ID carries either a content ID, a type ID or a type name.
* `selector`: the selector of the layout, either a string or a type. If the selector is missing, we use the attached class
* `layoutMode?`: the optional layout mode defines the mode that the fallback mapping applies to.

## Usage
The following example maps an ID of a content item to the `HeroGridComponent` layout in the default layout mode:

```typescript
  @LayoutMapping('e2ab99d1-9f9c-49a3-a80e-ec45c7748820', HeroGridComponent)
  class ...
```

# RenderingContextBinding
The context binding allows to attach a property of the rendering context to an instance variable of the component. This will often improve the readability of the template.

## Usage
```typescript
@LayoutComponent(...)
@Component(...)
export class OneColumnComponent extends AbstractRenderingComponent {

  @RenderingContextBinding('elements.text.value', 'defaultValue')
  textValue: string;
}
```

## Properties
* `selector`: the selector is a simple dot notation expresssion for the desired property, relative to the rendering context. Note that this does NOT support array expressions (yet). Optionally you may also pass a function that takes a rendering
context as input and returns the desired value.
* `default`: an optional default value that will be used if the rendering context does not contain the element

## Note
The binding assumes the existence of a `onRenderingContext` observable on the class. This is automatically the case if the class inherits from [AbstractRenderingComponent](#_c67a54fbe639545fc8ecc33a206087da27aab36585eca9f5671d52da5484a234).


<a name="_c67a54fbe639545fc8ecc33a206087da27aab36585eca9f5671d52da5484a234"></a>
# AbstractRenderingComponent

Component that can be used as a super class for custom components such as layouts. The component exposes a setter for the [RenderingContext](#_3417387c9f3cabff2993f11216a291653af8e461b333e6ac814281457e455861) in a format that is expected by the [ContentrefComponent](#_7133c4798b9f48c4213e1ce998fc4f8be545674c19e52c3e4a884082c7d908ce).

## Attributes

* `renderingContext`: the current rendering context
* `layoutMode`: the current layout mode

## Methods

* `trackByComponentId`: method to be used with the [*ngFor](https://angular.io/api/common/NgForOf) directive when iterating over [RenderingContext](#_3417387c9f3cabff2993f11216a291653af8e461b333e6ac814281457e455861) references. The method returns the ID of the rendering context, allowing Angular to correlate updates of the list.

## Events

* `onRenderingContext`: fires when the rendering context changes
* `onLayoutMode`: fires when the layout mode changes

Both the `onRenderingContext` and the `onLayoutMode` [observables](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html) will complete when the component is destroyed (i.e. in the course of processing the [ngOnDestroy](https://angular.io/guide/lifecycle-hooks#ondestroy) method). This implies that subscribers attached to theses observables do NOT need to unsubscribe explicitly, if they wish their subscription to last for the duration of the lifetime of the component (see section [Subscribing and Unsubscribing](http://reactivex.io/documentation/contract.html) in the observable contract).

# AbstractLifeCycleComponent

Component that offers [observables](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html) that will be fired when one of the lifecycle methods is invoked. This can be used as an alternative to override the respective method on the class. The mechanism is useful because:

* the observables can already be accessed in the constructor of the components and can reference variables in the private closure of the constructor
* it is a common pattern to setup observable chains in the constructor and to subscribe to them to keep application state up-to-date. These subscriptions however must be unsubscribed on in the `ngOnDestroy` method to avoid memory leaks. Using a life cycle callback this can be easily done inside the constructor.

## Methods

* `ngXXX`: the original life cycle method exposed by [Angular](https://angular.io/guide/lifecycle-hooks). Subclasses that want to override these methods MUST call the super method.
* `onXXX`: getter for an [observable](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html) for this lifecycle method.
* `unsubscribeOnDestroy(subscription)`: registers a subscription to be unsubscribed for in `ngOnDestroy`
* `safeSubscribe(observable, handler)`: subscribes to an [observable](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html) and registers the resulting subscription with `ngOnDestroy`. This is the most convenient way to handle subscriptions.

<a name="_cd96c202ef926a9a7797f271485fb9854430c1b72b0204252b468c1959ffadc7"></a>
# PageComponent

The page component resolves the current route to the component (or page) that is associated to this route in WCH. It can therefore be considered a proxy component that decouples the application at build time from the runtime artifacts.

## Usage

The component does not require any specific configuration, it attaches itself to the routing logic via dependency injection.

Usage in HTML:

```html
<wch-page></wch-page>
```

Usage in the router config:

```typescript
const appRoutes: Routes = [
  {
    path: '**',
    component: PageComponent
  }
];
```

## Attributes

* `layoutMode`: optionally pass the layout mode to be used when rendering the page. If not specified, the system uses the default mode.

## Events

* `onRenderingContext`: the [rendering context](#_3417387c9f3cabff2993f11216a291653af8e461b333e6ac814281457e455861) for the page as soon as it has been loaded
* `onLayoutMode`: the layout mode used to render this page.

## Error handling

If the page cannot be decoded, the system will look for a component mapped to the [PAGE_NOT_FOUND_LAYOUT](#_32a765b3b5fb30276418839f2cae827a486d81fdd63b1bc89039ec6d4d2a9caf) layout and instantiates this with an empty rendering context.

## WCH Dependency

The page component uses the `URL Slug` managed in WCH with each page to decode the targeted page. The URL slugs form a hierarchical namespace that matches the URL namespace of the SPA. The component uses the `url` property of the [ActivatedRoute](https://angular.io/api/router/ActivatedRoute). This property represents the sequence of path segments that will be matched against the defined URL slugs. The component will NOT interpret the parent router, so the SPA can decide to mount the WCH namespace at any location within its own namespace.
<a name="_47a4e4e6301d50fbcfa72c9789a371bf69f93da3df6d3436dc42d4ddb74e8511"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/content/content.component"](#_47a4e4e6301d50fbcfa72c9789a371bf69f93da3df6d3436dc42d4ddb74e8511)

# External module: "components/content/content.component"

## Index

### Classes

* [ContentComponent](#_ecaad4d5f5a90c365671c6a0b54200131586bdf3ae403ea2e66d12883c280761)

### Type aliases

* [ComponentState](#_47a4e4e6301d50fbcfa72c9789a371bf69f93da3df6d3436dc42d4ddb74e8511)

### Variables

* [LOGGER](#_47a4e4e6301d50fbcfa72c9789a371bf69f93da3df6d3436dc42d4ddb74e8511)

---

## Type aliases

<a id="componentstate"></a>

###  ComponentState

**Ƭ ComponentState**: *[`RenderingContext`, `string`]*

*Defined in components/content/content.component.ts:30*

Combines the active pieces of the state into one single object

___

## Variables

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

### `<Const>` LOGGER

**● LOGGER**: *"ContentComponent"* = "ContentComponent"

*Defined in components/content/content.component.ts:25*

___


<a name="_93f6b97f4607102d6f3bbacce22cf2e0ca8662d6aa4406b243bb7e0706019732"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/contentquery/contentquery.component"](#_93f6b97f4607102d6f3bbacce22cf2e0ca8662d6aa4406b243bb7e0706019732)

# External module: "components/contentquery/contentquery.component"

## Index

### Classes

* [ContentQueryComponent](#_fd5e8e52d33d25ae2e9c298aa4590cf69c5bb39c8436487f93f8fb359991a1dd)

### Variables

* [LOGGER](#_93f6b97f4607102d6f3bbacce22cf2e0ca8662d6aa4406b243bb7e0706019732)

---

## Variables

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

### `<Const>` LOGGER

**● LOGGER**: *"ContentQueryComponent"* = "ContentQueryComponent"

*Defined in components/contentquery/contentquery.component.ts:42*

___


<a name="_d4bdb3fb4a00ecb7412c6cd2ee6c8884166d1f5097dbf0917fec6e8434383323"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/contentref/contentref.component"](#_d4bdb3fb4a00ecb7412c6cd2ee6c8884166d1f5097dbf0917fec6e8434383323)

# External module: "components/contentref/contentref.component"

## Index

### Classes

* [ContentrefComponent](#_4a37f11ad4410db15d0f07f13f46604a2ddd0bd799d3f739556cb0939befc67f)

### Type aliases

* [ComponentState](#_d4bdb3fb4a00ecb7412c6cd2ee6c8884166d1f5097dbf0917fec6e8434383323)

### Variables

* [LOGGER](#_d4bdb3fb4a00ecb7412c6cd2ee6c8884166d1f5097dbf0917fec6e8434383323)

### Functions

* [getType](#_d4bdb3fb4a00ecb7412c6cd2ee6c8884166d1f5097dbf0917fec6e8434383323)

### Object literals

* [LAYOUT_NOT_FOUND_LAYOUT](#_d4bdb3fb4a00ecb7412c6cd2ee6c8884166d1f5097dbf0917fec6e8434383323)
* [PAGE_NOT_FOUND_LAYOUT](#_d4bdb3fb4a00ecb7412c6cd2ee6c8884166d1f5097dbf0917fec6e8434383323)

---

## Type aliases

<a id="componentstate"></a>

###  ComponentState

**Ƭ ComponentState**: *[`ComponentTypeRef`<`any`>, `RenderingContext`, `string`]*

*Defined in components/contentref/contentref.component.ts:80*

Combines the active pieces of the state into one single object

___

## Variables

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

### `<Const>` LOGGER

**● LOGGER**: *"ContentrefComponent"* = "ContentrefComponent"

*Defined in components/contentref/contentref.component.ts:27*

___

## Functions

<a id="gettype"></a>

###  getType

▸ **getType**(aId: *`string`*, aLayoutMode: *`string` \| `undefined`*, aRenderingContext: *`RenderingContext`*, aCmp: *[ComponentsService](#_44559e541df423caaedc0e00981de994db77ff606c92cd4f83d918fa0d8996d5)*, aMapping: *[LayoutMappingService](#_0efea8f98ae5bd0fc42efa996c222e6f35d71ed7896f69483210323813b14be5)*): `Observable`<`ComponentTypeRef`<`any`>>

*Defined in components/contentref/contentref.component.ts:48*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aId | `string` |
| aLayoutMode | `string` \| `undefined` |
| aRenderingContext | `RenderingContext` |
| aCmp | [ComponentsService](#_44559e541df423caaedc0e00981de994db77ff606c92cd4f83d918fa0d8996d5) |
| aMapping | [LayoutMappingService](#_0efea8f98ae5bd0fc42efa996c222e6f35d71ed7896f69483210323813b14be5) |

**Returns:** `Observable`<`ComponentTypeRef`<`any`>>

___

## Object literals

<a id="layout_not_found_layout"></a>

### `<Const>` LAYOUT_NOT_FOUND_LAYOUT

**LAYOUT_NOT_FOUND_LAYOUT**: *`object`*

*Defined in components/contentref/contentref.component.ts:33*

<a id="layout_not_found_layout.template"></a>

####  template

**● template**: *`string`* =  ComponentsService.DEFAULT_LAYOUT

*Defined in components/contentref/contentref.component.ts:35*

___
<a id="layout_not_found_layout.templatetype"></a>

####  templateType

**● templateType**: *`string`* =  LAYOUT_TYPE_ANGULAR

*Defined in components/contentref/contentref.component.ts:34*

___

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

### `<Const>` PAGE_NOT_FOUND_LAYOUT

**PAGE_NOT_FOUND_LAYOUT**: *`object`*

*Defined in components/contentref/contentref.component.ts:29*

<a id="page_not_found_layout.template-1"></a>

####  template

**● template**: *`string`* =  ComponentsService.PAGE_NOT_FOUND_LAYOUT

*Defined in components/contentref/contentref.component.ts:31*

___
<a id="page_not_found_layout.templatetype-1"></a>

####  templateType

**● templateType**: *`string`* =  LAYOUT_TYPE_ANGULAR

*Defined in components/contentref/contentref.component.ts:30*

___

___


<a name="_e1325aefe2a16738536ab4b0fa51dda3f14d71c94d451451370c84435a5906d6"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/default/default.component"](#_e1325aefe2a16738536ab4b0fa51dda3f14d71c94d451451370c84435a5906d6)

# External module: "components/default/default.component"

## Index

### Classes

* [DefaultComponent](#_41403aea3ab9a143f1db8e4996535c87daa0e3b48ebf672296a701eeccc833a9)

---


<a name="_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/page/page.component"](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)

# External module: "components/page/page.component"

## Index

### Classes

* [PageComponent](#_a3a60340e89f84d6a53f0f77f57737a31a7a6ce8e73eac4796b560d37216f4ea)

### Type aliases

* [ComponentState](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)

### Variables

* [LOGGER](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)
* [_EMPTY_VALUE](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)
* [_META_NAME_DESCRIPTION](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)
* [_META_NAME_ID](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)

### Functions

* [_boxValue](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)
* [_getDescription](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)
* [_getTitle](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)
* [_setMetaTag](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)
* [_setTitleTag](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)
* [_updateMetaData](#_911d33c863077534dee621b06218200366ea08dab1a4f026b3624011b99e7ab0)

---

## Type aliases

<a id="componentstate"></a>

###  ComponentState

**Ƭ ComponentState**: *[`RenderingContext`, `string`]*

*Defined in components/page/page.component.ts:139*

Combines the active pieces of the state into one single object

___

## Variables

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

### `<Const>` LOGGER

**● LOGGER**: *"PageComponent"* = "PageComponent"

*Defined in components/page/page.component.ts:23*

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

### `<Const>` _EMPTY_VALUE

**● _EMPTY_VALUE**: *`""`* = ""

*Defined in components/page/page.component.ts:27*

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

### `<Const>` _META_NAME_DESCRIPTION

**● _META_NAME_DESCRIPTION**: *"description"* = "description"

*Defined in components/page/page.component.ts:26*

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

### `<Const>` _META_NAME_ID

**● _META_NAME_ID**: *"id"* = "id"

*Defined in components/page/page.component.ts:25*

___

## Functions

<a id="_boxvalue"></a>

###  _boxValue

▸ **_boxValue**(aValue?: *`string`*): `string`

*Defined in components/page/page.component.ts:34*

**Parameters:**

| Name | Type |
| ------ | ------ |
| `Optional` aValue | `string` |

**Returns:** `string`

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

###  _getDescription

▸ **_getDescription**(aSitePage: *`SitePage`*, aRenderingContext: *`RenderingContext`*): `string`

*Defined in components/page/page.component.ts:92*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aSitePage | `SitePage` |
| aRenderingContext | `RenderingContext` |

**Returns:** `string`

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

###  _getTitle

▸ **_getTitle**(aSitePage: *`SitePage`*, aRenderingContext: *`RenderingContext`*): `string`

*Defined in components/page/page.component.ts:69*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aSitePage | `SitePage` |
| aRenderingContext | `RenderingContext` |

**Returns:** `string`

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

###  _setMetaTag

▸ **_setMetaTag**(aMetaService: *`Meta`*, aId: *`string`*, aValue?: *`string`*): `void`

*Defined in components/page/page.component.ts:45*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aMetaService | `Meta` |
| aId | `string` |
| `Optional` aValue | `string` |

**Returns:** `void`

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

###  _setTitleTag

▸ **_setTitleTag**(aTitle: *`Title`*, aValue?: *`string`*): `void`

*Defined in components/page/page.component.ts:56*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aTitle | `Title` |
| `Optional` aValue | `string` |

**Returns:** `void`

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

###  _updateMetaData

▸ **_updateMetaData**(aContext: *`RenderingContext`*, aTitleService: *`Title`*, aMetaService: *`Meta`*): `void`

*Defined in components/page/page.component.ts:110*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aContext | `RenderingContext` |
| aTitleService | `Title` |
| aMetaService | `Meta` |

**Returns:** `void`

___


<a name="_b38a9c2426d197e2101c4f28ad6dc39d55c5ac9d09517fb2ba622d44ca90d71c"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/pageref/pageref.component"](#_b38a9c2426d197e2101c4f28ad6dc39d55c5ac9d09517fb2ba622d44ca90d71c)

# External module: "components/pageref/pageref.component"

## Index

### Classes

* [PagerefComponent](#_5172056ae78cc46e6e8825b3cf0e2eaac49fc951ae1b123fbaca3ec1a78fc338)

### Type aliases

* [ComponentState](#_b38a9c2426d197e2101c4f28ad6dc39d55c5ac9d09517fb2ba622d44ca90d71c)

### Variables

* [LOGGER](#_b38a9c2426d197e2101c4f28ad6dc39d55c5ac9d09517fb2ba622d44ca90d71c)

---

## Type aliases

<a id="componentstate"></a>

###  ComponentState

**Ƭ ComponentState**: *[`RenderingContext`, `string`]*

*Defined in components/pageref/pageref.component.ts:28*

Combines the active pieces of the state into one single object

___

## Variables

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

### `<Const>` LOGGER

**● LOGGER**: *"PagerefComponent"* = "PagerefComponent"

*Defined in components/pageref/pageref.component.ts:23*

___


<a name="_64905140e71b82e994572a474691f29febfc8f676415ede01c6aff91ebb6d74e"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/path/content.path.component"](#_64905140e71b82e994572a474691f29febfc8f676415ede01c6aff91ebb6d74e)

# External module: "components/path/content.path.component"

## Index

### Classes

* [ContentPathComponent](#_9bde73b8b05717e1aea7014c07ada439991e2624776bbd5aac12b085e4a81f59)

### Type aliases

* [ComponentState](#_64905140e71b82e994572a474691f29febfc8f676415ede01c6aff91ebb6d74e)

### Variables

* [LOGGER](#_64905140e71b82e994572a474691f29febfc8f676415ede01c6aff91ebb6d74e)

---

## Type aliases

<a id="componentstate"></a>

###  ComponentState

**Ƭ ComponentState**: *[`RenderingContext`, `string`]*

*Defined in components/path/content.path.component.ts:20*

Combines the active pieces of the state into one single object

___

## Variables

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

### `<Const>` LOGGER

**● LOGGER**: *"ContentPathComponent"* = "ContentPathComponent"

*Defined in components/path/content.path.component.ts:15*

___


<a name="_d2f8cc6d2576983326e6074110c719555b34559b370fa672500b867df69dc64d"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/rendering/abstract-base.component"](#_d2f8cc6d2576983326e6074110c719555b34559b370fa672500b867df69dc64d)

# External module: "components/rendering/abstract-base.component"

## Index

### Classes

* [AbstractBaseComponent](#_6e3ce50dab11e8c2589dac1728b2353fb3291d9d1f2361ae5f30bfc22232e4d0)

### Variables

* [ID](#_d2f8cc6d2576983326e6074110c719555b34559b370fa672500b867df69dc64d)
* [LOGGER](#_d2f8cc6d2576983326e6074110c719555b34559b370fa672500b867df69dc64d)

---

## Variables

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

### `<Let>` ID

**● ID**: *`number`* = 0

*Defined in components/rendering/abstract-base.component.ts:21*

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

### `<Const>` LOGGER

**● LOGGER**: *"AbstractBaseComponent"* = "AbstractBaseComponent"

*Defined in components/rendering/abstract-base.component.ts:19*

___


<a name="_ac54ba022492debe11f810df44e5b6c94152d29d7ffc2722cff7fd2cf20c3162"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/rendering/abstract-rendering.component"](#_ac54ba022492debe11f810df44e5b6c94152d29d7ffc2722cff7fd2cf20c3162)

# External module: "components/rendering/abstract-rendering.component"

## Index

### Classes

* [AbstractRenderingComponent](#_30696251135ebe1047ff63b66e6e4ff3a9a6e3ae2d0967346db7d658bd1f22c6)

### Variables

* [ID](#_ac54ba022492debe11f810df44e5b6c94152d29d7ffc2722cff7fd2cf20c3162)
* [LOGGER](#_ac54ba022492debe11f810df44e5b6c94152d29d7ffc2722cff7fd2cf20c3162)

---

## Variables

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

### `<Let>` ID

**● ID**: *`number`* = 0

*Defined in components/rendering/abstract-rendering.component.ts:25*

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

### `<Const>` LOGGER

**● LOGGER**: *"AbstractRenderingComponent"* = "AbstractRenderingComponent"

*Defined in components/rendering/abstract-rendering.component.ts:23*

___


<a name="_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/rendering/abstract.lifecycle.component"](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)

# External module: "components/rendering/abstract.lifecycle.component"

## Index

### Classes

* [AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1)

### Type aliases

* [Registry](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)

### Variables

* [FIELD_CALLBACKS](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [FIELD_OBSERVABLE](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [HOOK_AFTERCONTENTCHECKED](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [HOOK_AFTERCONTENTINIT](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [HOOK_AFTERVIEWCHECKED](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [HOOK_AFTERVIEWINIT](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [HOOK_CHANGES](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [HOOK_DESTROY](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [HOOK_DOCHECK](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [HOOK_INIT](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [KEY_REGISTRY](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)

### Functions

* [_addHook](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [_assertCallbacks](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [_assertHook](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [_createObservable](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [_getObservable](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [_invokeHooks](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [_removeRegistry](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [createGetter](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)
* [createSetter](#_c0b8429450c6b33ccfb624a1b1b619c05255dee090b5200a307e6d294e256100)

---

## Type aliases

<a id="registry"></a>

###  Registry

**Ƭ Registry**: *`any`[][]*

*Defined in components/rendering/abstract.lifecycle.component.ts:49*

___

## Variables

<a id="field_callbacks"></a>

### `<Const>` FIELD_CALLBACKS

**● FIELD_CALLBACKS**: *`1`* = 1

*Defined in components/rendering/abstract.lifecycle.component.ts:46*

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

### `<Const>` FIELD_OBSERVABLE

**● FIELD_OBSERVABLE**: *`2`* = 2

*Defined in components/rendering/abstract.lifecycle.component.ts:47*

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

### `<Const>` HOOK_AFTERCONTENTCHECKED

**● HOOK_AFTERCONTENTCHECKED**: *`2`* = 2

*Defined in components/rendering/abstract.lifecycle.component.ts:39*

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

### `<Const>` HOOK_AFTERCONTENTINIT

**● HOOK_AFTERCONTENTINIT**: *`3`* = 3

*Defined in components/rendering/abstract.lifecycle.component.ts:40*

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

### `<Const>` HOOK_AFTERVIEWCHECKED

**● HOOK_AFTERVIEWCHECKED**: *`0`* = 0

*Defined in components/rendering/abstract.lifecycle.component.ts:37*

Enumeration of the possible hooks

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

### `<Const>` HOOK_AFTERVIEWINIT

**● HOOK_AFTERVIEWINIT**: *`1`* = 1

*Defined in components/rendering/abstract.lifecycle.component.ts:38*

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

### `<Const>` HOOK_CHANGES

**● HOOK_CHANGES**: *`6`* = 6

*Defined in components/rendering/abstract.lifecycle.component.ts:43*

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

### `<Const>` HOOK_DESTROY

**● HOOK_DESTROY**: *`7`* = 7

*Defined in components/rendering/abstract.lifecycle.component.ts:44*

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

### `<Const>` HOOK_DOCHECK

**● HOOK_DOCHECK**: *`4`* = 4

*Defined in components/rendering/abstract.lifecycle.component.ts:41*

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

### `<Const>` HOOK_INIT

**● HOOK_INIT**: *`5`* = 5

*Defined in components/rendering/abstract.lifecycle.component.ts:42*

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

### `<Const>` KEY_REGISTRY

**● KEY_REGISTRY**: *`string` \| `symbol`* =  createSymbol()

*Defined in components/rendering/abstract.lifecycle.component.ts:52*

___

## Functions

<a id="_addhook"></a>

###  _addHook

▸ **_addHook**(aHookIdentifier: *`number`*, aThis: *[AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1)*, aHook: *`Function`*): `void`

*Defined in components/rendering/abstract.lifecycle.component.ts:154*

Registers a life cycle hook with the component

**Parameters:**

| Name | Type |
| ------ | ------ |
| aHookIdentifier | `number` |
| aThis | [AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1) |
| aHook | `Function` |

**Returns:** `void`

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

###  _assertCallbacks

▸ **_assertCallbacks**(aHook: *`any`[]*): `Function`[]

*Defined in components/rendering/abstract.lifecycle.component.ts:84*

Makes sure we have a callbacks array defined

**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aHook | `any`[] |  the hook structure |

**Returns:** `Function`[]
the callback field

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

###  _assertHook

▸ **_assertHook**(aHookIdentifier: *`number`*, aThis: *[AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1)*): `any`[]

*Defined in components/rendering/abstract.lifecycle.component.ts:70*

Makes sure we have a hook data structure for the identifier

**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aHookIdentifier | `number` |  the hook identifier |
| aThis | [AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1) |  the instance |

**Returns:** `any`[]
the hook structure

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

###  _createObservable

▸ **_createObservable**(aHookIdentifier: *`number`*, aHook: *`any`[]*, aShared: *`boolean`*, aThis: *[AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1)*): `Observable`<`any`>

*Defined in components/rendering/abstract.lifecycle.component.ts:97*

Construct the desired observable

**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aHookIdentifier | `number` |  the hook |
| aHook | `any`[] |
| aShared | `boolean` |
| aThis | [AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1) |  the life cycle component |

**Returns:** `Observable`<`any`>
the observable

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

###  _getObservable

▸ **_getObservable**(aHookIdentifier: *`number`*, aShared: *`boolean`*, aThis: *[AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1)*): `Observable`<`any`>

*Defined in components/rendering/abstract.lifecycle.component.ts:132*

Registers an observable for a hook

**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aHookIdentifier | `number` |  the identifier for the hook |
| aShared | `boolean` |
| aThis | [AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1) |  the instance of the component |

**Returns:** `Observable`<`any`>
the observable

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

###  _invokeHooks

▸ **_invokeHooks**(aHookIdentifier: *`number`*, aThis: *[AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1)*, aArgs: *`IArguments`*): `void`

*Defined in components/rendering/abstract.lifecycle.component.ts:171*

Invokes the lifecycle hooks for the component

**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aHookIdentifier | `number` |
| aThis | [AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1) |  the this pointer |
| aArgs | `IArguments` |  the arguments |

**Returns:** `void`

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

###  _removeRegistry

▸ **_removeRegistry**(aThis: *[AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1)*): `void`

*Defined in components/rendering/abstract.lifecycle.component.ts:59*

Clears the registry from the component

**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aThis | [AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1) |  the instance |

**Returns:** `void`

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

###  createGetter

▸ **createGetter**<`T`>(aObservable: *`Observable`<`T`>*, aThis: *[AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1)*, aInitial?: *`T`*): `PropertyDescriptor`

*Defined in components/rendering/abstract.lifecycle.component.ts:451*

Constructs a getter that subscribes to a value

**Type parameters:**

#### T 
**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aObservable | `Observable`<`T`> |  the observable |
| aThis | [AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1) |  the component |
| `Optional` aInitial | `T` |  the optional initial value |

**Returns:** `PropertyDescriptor`
the descriptor

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

###  createSetter

▸ **createSetter**<`T`>(aSubject: *`Subject`<`T`>*, aThis: *[AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1)*): `PropertyDescriptor`

*Defined in components/rendering/abstract.lifecycle.component.ts:432*

Constructs a setter that is unregistered automatically in onDestroy

**Type parameters:**

#### T 
**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aSubject | `Subject`<`T`> |  the subject |
| aThis | [AbstractLifeCycleComponent](#_1d68250ccd7d29e6b65245905d231117abab5cd1603145c59fb63e9e784c56b1) |  the component |

**Returns:** `PropertyDescriptor`
the descriptor

___


<a name="_8565e40ce385f5912f89e5943ebb8c8e326f762be872a9bf2ec4b2c24c78bc0c"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["components/site/site.component"](#_8565e40ce385f5912f89e5943ebb8c8e326f762be872a9bf2ec4b2c24c78bc0c)

# External module: "components/site/site.component"

## Index

### Classes

* [SiteComponent](#_4fc286c5cd30967ab611e59b2c1952d9e3e028db3b0a2a173193fc4a948a1491)

### Variables

* [LOGGER](#_8565e40ce385f5912f89e5943ebb8c8e326f762be872a9bf2ec4b2c24c78bc0c)

---

## Variables

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

### `<Const>` LOGGER

**● LOGGER**: *"SiteComponent"* = "SiteComponent"

*Defined in components/site/site.component.ts:11*

___


<a name="_65c7127c8aae3506ec1132d7e6432461fc1f7a5ec628b13d79920e3858d53c2a"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["decorators/bootstrap/rendering.context.bootstrap.decorator"](#_65c7127c8aae3506ec1132d7e6432461fc1f7a5ec628b13d79920e3858d53c2a)

# External module: "decorators/bootstrap/rendering.context.bootstrap.decorator"

## Index

### Functions

* [ContentWithLayoutBootstrap](#_65c7127c8aae3506ec1132d7e6432461fc1f7a5ec628b13d79920e3858d53c2a)

---

## Functions

<a id="contentwithlayoutbootstrap"></a>

###  ContentWithLayoutBootstrap

▸ **ContentWithLayoutBootstrap**(aDirective?: *[ContentWithLayoutBootstrapDirective](#_cfad2078216b60934ba047e7756310ce96a8b277734bcce56f01eb179896292e)*): `function`

*Defined in decorators/bootstrap/rendering.context.bootstrap.decorator.ts:11*

**Parameters:**

| Name | Type |
| ------ | ------ |
| `Optional` aDirective | [ContentWithLayoutBootstrapDirective](#_cfad2078216b60934ba047e7756310ce96a8b277734bcce56f01eb179896292e) |

**Returns:** `function`

___


<a name="_8948ea36b56ab123d94936b1386f6ac14f94d1e28ee9def5efec035d20119e2b"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["decorators/bootstrap/rendering.context.bootstrap.directive"](#_8948ea36b56ab123d94936b1386f6ac14f94d1e28ee9def5efec035d20119e2b)

# External module: "decorators/bootstrap/rendering.context.bootstrap.directive"

## Index

### Interfaces

* [ContentWithLayoutBootstrapDirective](#_cfad2078216b60934ba047e7756310ce96a8b277734bcce56f01eb179896292e)

---


<a name="_12ecb09806f876fdba17138f8515bb663c9939183381bb584fb6ec70d1a26954"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["decorators/bootstrap/site.bootstrap.decorator"](#_12ecb09806f876fdba17138f8515bb663c9939183381bb584fb6ec70d1a26954)

# External module: "decorators/bootstrap/site.bootstrap.decorator"

## Index

### Variables

* [LOGGER](#_12ecb09806f876fdba17138f8515bb663c9939183381bb584fb6ec70d1a26954)

### Functions

* [SiteBootstrap](#_12ecb09806f876fdba17138f8515bb663c9939183381bb584fb6ec70d1a26954)

---

## Variables

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

### `<Const>` LOGGER

**● LOGGER**: *"SiteBootstrap"* = "SiteBootstrap"

*Defined in decorators/bootstrap/site.bootstrap.decorator.ts:8*

___

## Functions

<a id="sitebootstrap"></a>

###  SiteBootstrap

▸ **SiteBootstrap**(aDirective?: *[SiteBootstrapDirective](#_f9744ec96d961616bfc31e49e7e758aa6175c00b0128b3ae319f3787e233561b)*): `function`

*Defined in decorators/bootstrap/site.bootstrap.decorator.ts:15*

**Parameters:**

| Name | Type |
| ------ | ------ |
| `Optional` aDirective | [SiteBootstrapDirective](#_f9744ec96d961616bfc31e49e7e758aa6175c00b0128b3ae319f3787e233561b) |

**Returns:** `function`

___


<a name="_a73ed924f1b42311d81cbb058ae092a396b2aeb2bbca001e2bb504ab145db021"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["decorators/bootstrap/site.bootstrap.directive"](#_a73ed924f1b42311d81cbb058ae092a396b2aeb2bbca001e2bb504ab145db021)

# External module: "decorators/bootstrap/site.bootstrap.directive"

## Index

### Interfaces

* [SiteBootstrapDirective](#_f9744ec96d961616bfc31e49e7e758aa6175c00b0128b3ae319f3787e233561b)

---


<a name="_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f"></a>
[@ibm-wch-sdk/ng](#_96fdf8c61d5bb26367a408e8d5dba5da59ddf12345ac319ff3123e2c56e986f0) > ["decorators/layout/layout.decorator"](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)

# External module: "decorators/layout/layout.decorator"

## Index

### Interfaces

* [Binding](#_4c29bde218f4bf34be1ce19bd44f6addcf0477387e9cec556f95fe35b23a90db)

### Type aliases

* [ExpressionGetter](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [Subscriptions](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)

### Variables

* [KEY_EXPRESSION](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [KEY_OBSERVABLE_PREFIX](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [KEY_ON_DESTROY](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [KEY_SUBSCRIPTIONS](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [LOGGER](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [UNDEFINED_RENDERING_CONTEXT_SUBJECT](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_BehaviorSubject](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_SYMBOLS](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_expressionCache](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)

### Functions

* [LayoutComponent](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [LayoutMapping](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [RenderingContextBinding](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_assertBinding](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_baseExpressionFromObservableExpression](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_getExpressionFromDescriptor](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_getExpressionFromPrototype](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_getExpressionGetter](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_getObservableExpression](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_getOnRenderingContext](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_getResolvedExpression](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_getSymbol](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_isObservableExpression](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_isStringOrArray](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_isUpperCase](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_observableExpressionFromBaseExpression](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_parseExpression](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_registerExpression](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_registerRenderingContextDirective](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)
* [_registerSubscription](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)

---

## Type aliases

<a id="expressiongetter"></a>

###  ExpressionGetter

**Ƭ ExpressionGetter**: *`function`*

*Defined in decorators/layout/layout.decorator.ts:355*

#### Type declaration
▸(): `string`

**Returns:** `string`

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

###  Subscriptions

**Ƭ Subscriptions**: *`Subscription`[]*

*Defined in decorators/layout/layout.decorator.ts:54*

___

## Variables

<a id="key_expression"></a>

### `<Const>` KEY_EXPRESSION

**● KEY_EXPRESSION**: *"45b01348-de92-44a0-8103-7b7dc471ad8c"* = "45b01348-de92-44a0-8103-7b7dc471ad8c"

*Defined in decorators/layout/layout.decorator.ts:52*

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

### `<Const>` KEY_OBSERVABLE_PREFIX

**● KEY_OBSERVABLE_PREFIX**: *"on"* = "on"

*Defined in decorators/layout/layout.decorator.ts:47*

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

### `<Const>` KEY_ON_DESTROY

**● KEY_ON_DESTROY**: *"ngOnDestroy"* = "ngOnDestroy"

*Defined in decorators/layout/layout.decorator.ts:48*

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

### `<Const>` KEY_SUBSCRIPTIONS

**● KEY_SUBSCRIPTIONS**: *`string` \| `symbol`* =  createSymbol()

*Defined in decorators/layout/layout.decorator.ts:49*

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

### `<Const>` LOGGER

**● LOGGER**: *"LayoutDecorator"* = "LayoutDecorator"

*Defined in decorators/layout/layout.decorator.ts:44*

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

### `<Const>` UNDEFINED_RENDERING_CONTEXT_SUBJECT

**● UNDEFINED_RENDERING_CONTEXT_SUBJECT**: *`BehaviorSubject`<`RenderingContext`>* =  new _BehaviorSubject(
  UNDEFINED_RENDERING_CONTEXT
)

*Defined in decorators/layout/layout.decorator.ts:165*

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

### `<Const>` _BehaviorSubject

**● _BehaviorSubject**: *`BehaviorSubject`* =  BehaviorSubject

*Defined in decorators/layout/layout.decorator.ts:45*

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

### `<Const>` _SYMBOLS

**● _SYMBOLS**: *`Record`<`string`, `symbol` \| `string`>*

*Defined in decorators/layout/layout.decorator.ts:63*

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

### `<Const>` _expressionCache

**● _expressionCache**: *`object`*

*Defined in decorators/layout/layout.decorator.ts:78*

#### Type declaration

[key: `string`]: [RenderingContextDirective](#_3e9ea7e177735653a8e716f7a5c2185aae65630cad40022153736ff0b97c5287)<`any`>

___

## Functions

<a id="layoutcomponent"></a>

###  LayoutComponent

▸ **LayoutComponent**(aDirective?: *[LayoutComponentDirective](#_1021ebed39234a3054223f6444ae17e21711665485a0333c3300e99032cf148d)*): `function`

*Defined in decorators/layout/layout.decorator.ts:535*

**Parameters:**

| Name | Type |
| ------ | ------ |
| `Optional` aDirective | [LayoutComponentDirective](#_1021ebed39234a3054223f6444ae17e21711665485a0333c3300e99032cf148d) |

**Returns:** `function`

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

###  LayoutMapping

▸ **LayoutMapping**(aID: *`string` \| `string`[] \| [LayoutMappingDirective](#_dd2ac192dc95aa7664e5cb49814e4b539b4fd58d7cf942ea4aca7392814c8343)*, aSelector?: *`string` \| `string`[] \| `Type`<`any`>*, aLayoutMode?: *`string` \| `string`[]*): `function`

*Defined in decorators/layout/layout.decorator.ts:594*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aID | `string` \| `string`[] \| [LayoutMappingDirective](#_dd2ac192dc95aa7664e5cb49814e4b539b4fd58d7cf942ea4aca7392814c8343) |
| `Optional` aSelector | `string` \| `string`[] \| `Type`<`any`> |
| `Optional` aLayoutMode | `string` \| `string`[] |

**Returns:** `function`

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

###  RenderingContextBinding

▸ **RenderingContextBinding**<`T`>(aBinding?: *`string` \| [RenderingContextDirective](#_3e9ea7e177735653a8e716f7a5c2185aae65630cad40022153736ff0b97c5287)<`T`>*, aDefault?: *`T`*): `function`

*Defined in decorators/layout/layout.decorator.ts:565*

**Type parameters:**

#### T 
**Parameters:**

| Name | Type |
| ------ | ------ |
| `Optional` aBinding | `string` \| [RenderingContextDirective](#_3e9ea7e177735653a8e716f7a5c2185aae65630cad40022153736ff0b97c5287)<`T`> |
| `Optional` aDefault | `T` |

**Returns:** `function`

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

###  _assertBinding

▸ **_assertBinding**<`T`>(aInstance: *`any`*, aSymbol: *`symbol` \| `string`*, aName: *`string`*): [Binding](#_4c29bde218f4bf34be1ce19bd44f6addcf0477387e9cec556f95fe35b23a90db)<`T`>

*Defined in decorators/layout/layout.decorator.ts:156*

Makes sure we have a binding

**Type parameters:**

#### T 
**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aInstance | `any` |  the instance to attach the binding to |
| aSymbol | `symbol` \| `string` |  the symbol |
| aName | `string` |  name of the object |

**Returns:** [Binding](#_4c29bde218f4bf34be1ce19bd44f6addcf0477387e9cec556f95fe35b23a90db)<`T`>
the binding

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

###  _baseExpressionFromObservableExpression

▸ **_baseExpressionFromObservableExpression**(aKey: *`string`*): `string`

*Defined in decorators/layout/layout.decorator.ts:337*

**Parameters:**

| Name | Type |
| ------ | ------ |
| aKey | `string` |

**Returns:** `string`

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

###  _getExpressionFromDescriptor

▸ **_getExpressionFromDescriptor**(aPrototype: *`any`*, aOtherKey: *`string`*): `string` \| `null` \| `undefined`

*Defined in decorators/layout/layout.decorator.ts:365*

Returns an expression from its descriptor

**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aPrototype | `any` |  the prototype |
| aOtherKey | `string` |  the key |

**Returns:** `string` \| `null` \| `undefined`
the expression, null if no expression exists and undefined if we need to fallback

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

###  _getExpressionFromPrototype

▸ **_getExpressionFromPrototype**(aPrototype: *`any`*, aOtherKey: *`string`*): `string` \| `null` \| `undefined`

*Defined in decorators/layout/layout.decorator.ts:394*

Checks if we can find an expression from the other property

**Parameters:**

| Name | Type | Description |
| ------ | ------ | ------ |
| aPrototype | `any` |  the prototype |
| aOtherKey | `string` |  the other key |

**Returns:** `string` \| `null` \| `undefined`
the expression, null if no expression exists and undefined if we need to fallback

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

###  _getExpressionGetter

▸ **_getExpressionGetter**(aPrototype: *`any`*, aExpression: *`string` \| `null` \| `undefined`*, aKey: *`string`*, aOtherKey: *`string`*): [ExpressionGetter](#_02957062fcfbf461ed5ccd8a7f9836c823efd59c87959f546deba6ff8a2b6a5f)

*Defined in decorators/layout/layout.decorator.ts:422*

Returns a getter method that computes the expression associated with a property

**Parameters:**

| Name |