@ibm-wch-sdk/ng

v6.0.524

Published

3 years ago

Software development kit to simplify the development of Angular based single page applications against Watson Content Hub.

Downloads

0High
0Medium
0Low

marcin-pasiewicz

nikodem.graczewski.acoustic

willizard

pawel.galias-ac

IBM Angular SDK for Watson Content Hub

This module represents a software development kit (SDK) that can be used by Angular 4 based applications to build single page applications (SPA) against Watson Content Hub (WCH) managed pages.

Changes

CHANGELOG

Usage

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

Class documentation

Refer to the documentation.

Components

The SDK defines one top level module module for use in the application component.

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 with Node >= 4 and NPM >= 3.
Make sure you have a text editor installed. For editing Typescript we recommend Visual Studio Code, consider installing also these extensions.

Server Side

Please refer to the Server Side Setup instructions.

Client Side

First install angular-cli using

npm install -g @angular/cli

Bootstrap your angular application

ng new PROJECT-NAME
cd PROJECT-NAME

Install the WCH SDK and its peer dependencies:

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

Create angular components for the layouts defined during the server setup.

ng g component layouts/MY_COMPONENT

Add a layout selector 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. Make the following changes to the MY_COMPONENT.ts file created in the step before:

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:

@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 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).

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:

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 to the application. The easiest way is to configure all routes to be served by WCH pages. For this create the following router config and add it to your main application module:

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:

ng serve

Note

Using the development version of the NPM registry

Add the file .npmrc to your application folder:

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/

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 to 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

@ibm-wch-sdk/ng

Index

External modules

WchNgModule

The main SDK module exposes the components and services to be used by the application. Have a look at development stories for an explanation of usecases.

Usage

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

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

with an environment properties file like this:

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 to have access to the components and directives exposed by the SDK.

LayoutDecorator

The layout decorator allow to assign a layout name to a component.

Usage

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

@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:

  @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

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

AbstractRenderingComponent

Component that can be used as a super class for custom components such as layouts. The component exposes a setter for the RenderingContext in a format that is expected by the ContentrefComponent.

Attributes

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

Methods

trackByComponentId: method to be used with the *ngFor directive when iterating over RenderingContext 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 will complete when the component is destroyed (i.e. in the course of processing the ngOnDestroy 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 in the observable contract).

AbstractLifeCycleComponent

Component that offers observables 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. Subclasses that want to override these methods MUST call the super method.
onXXX: getter for an observable for this lifecycle method.
unsubscribeOnDestroy(subscription): registers a subscription to be unsubscribed for in ngOnDestroy
safeSubscribe(observable, handler): subscribes to an observable and registers the resulting subscription with ngOnDestroy. This is the most convenient way to handle subscriptions.

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:

<wch-page></wch-page>

Usage in the router config:

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 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 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. 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. @ibm-wch-sdk/ng > "components/content/content.component"

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

Index

Type aliases

ComponentState

Ƭ ComponentState: [RenderingContext, string]

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

Combines the active pieces of the state into one single object

Variables

`<Const>` LOGGER

● LOGGER: "ContentComponent" = "ContentComponent"

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

@ibm-wch-sdk/ng > "components/contentquery/contentquery.component"

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

Index

Classes

ContentQueryComponent

Variables

LOGGER

Variables

`<Const>` LOGGER

● LOGGER: "ContentQueryComponent" = "ContentQueryComponent"

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

@ibm-wch-sdk/ng > "components/contentref/contentref.component"

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

Index

Classes

ContentrefComponent

Type aliases

ComponentState

Variables

LOGGER

Functions

getType

Object literals

Type aliases

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

`<Const>` LOGGER

● LOGGER: "ContentrefComponent" = "ContentrefComponent"

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

Functions

getType

▸ getType(aId: string, aLayoutMode: string | undefined, aRenderingContext: RenderingContext, aCmp: ComponentsService, aMapping: LayoutMappingService): Observable<ComponentTypeRef<any>>

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

Parameters:

| Name | Type | | ------ | ------ | | aId | string | | aLayoutMode | string | undefined | | aRenderingContext | RenderingContext | | aCmp | ComponentsService | | aMapping | LayoutMappingService |

Returns: Observable<ComponentTypeRef<any>>

Object literals

`<Const>` LAYOUT_NOT_FOUND_LAYOUT

LAYOUT_NOT_FOUND_LAYOUT: object

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

template

● template: string = ComponentsService.DEFAULT_LAYOUT

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

templateType

● templateType: string = LAYOUT_TYPE_ANGULAR

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

`<Const>` PAGE_NOT_FOUND_LAYOUT

PAGE_NOT_FOUND_LAYOUT: object

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

template

● template: string = ComponentsService.PAGE_NOT_FOUND_LAYOUT

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

templateType

● templateType: string = LAYOUT_TYPE_ANGULAR

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

@ibm-wch-sdk/ng > "components/default/default.component"

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

Index

Classes

DefaultComponent

@ibm-wch-sdk/ng > "components/page/page.component"

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

Index

Classes

PageComponent

Type aliases

ComponentState

Variables

Functions

Type aliases

ComponentState

Ƭ ComponentState: [RenderingContext, string]

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

Combines the active pieces of the state into one single object

Variables

`<Const>` LOGGER

● LOGGER: "PageComponent" = "PageComponent"

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

`<Const>` _EMPTY_VALUE

● _EMPTY_VALUE: "" = ""

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

`<Const>` _META_NAME_DESCRIPTION

● _META_NAME_DESCRIPTION: "description" = "description"

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

`<Const>` _META_NAME_ID

● _META_NAME_ID: "id" = "id"

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

Functions

_boxValue

▸ _boxValue(aValue?: string): string

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

Parameters:

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

Returns: string

_getDescription

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

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

Parameters:

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

Returns: string

_getTitle

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

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

Parameters:

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

Returns: string

_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

_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

_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

@ibm-wch-sdk/ng > "components/pageref/pageref.component"

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

Index

Classes

PagerefComponent

Type aliases

ComponentState

Variables

LOGGER

Type aliases

ComponentState

Ƭ ComponentState: [RenderingContext, string]

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

Combines the active pieces of the state into one single object

Variables

`<Const>` LOGGER

● LOGGER: "PagerefComponent" = "PagerefComponent"

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

@ibm-wch-sdk/ng > "components/path/content.path.component"

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

Index

Classes

ContentPathComponent

Type aliases

ComponentState

Variables

LOGGER

Type aliases

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

`<Const>` LOGGER

● LOGGER: "ContentPathComponent" = "ContentPathComponent"

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

@ibm-wch-sdk/ng > "components/rendering/abstract-base.component"

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

Index

Classes

AbstractBaseComponent

Variables

`<Let>` ID

● ID: number = 0

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

`<Const>` LOGGER

● LOGGER: "AbstractBaseComponent" = "AbstractBaseComponent"

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

@ibm-wch-sdk/ng > "components/rendering/abstract-rendering.component"

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

Index

Classes

AbstractRenderingComponent

Variables

`<Let>` ID

● ID: number = 0

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

`<Const>` LOGGER

● LOGGER: "AbstractRenderingComponent" = "AbstractRenderingComponent"

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

@ibm-wch-sdk/ng > "components/rendering/abstract.lifecycle.component"

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

Index

Classes

AbstractLifeCycleComponent

Type aliases

Registry

Variables

Functions

Type aliases

Registry

Ƭ Registry: any[][]

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

Variables

`<Const>` FIELD_CALLBACKS

● FIELD_CALLBACKS: 1 = 1

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

`<Const>` FIELD_OBSERVABLE

● FIELD_OBSERVABLE: 2 = 2

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

`<Const>` HOOK_AFTERCONTENTCHECKED

● HOOK_AFTERCONTENTCHECKED: 2 = 2

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

`<Const>` HOOK_AFTERCONTENTINIT

● HOOK_AFTERCONTENTINIT: 3 = 3

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

`<Const>` HOOK_AFTERVIEWCHECKED

● HOOK_AFTERVIEWCHECKED: 0 = 0

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

Enumeration of the possible hooks

`<Const>` HOOK_AFTERVIEWINIT

● HOOK_AFTERVIEWINIT: 1 = 1

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

`<Const>` HOOK_CHANGES

● HOOK_CHANGES: 6 = 6

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

`<Const>` HOOK_DESTROY

● HOOK_DESTROY: 7 = 7

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

`<Const>` HOOK_DOCHECK

● HOOK_DOCHECK: 4 = 4

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

`<Const>` HOOK_INIT

● HOOK_INIT: 5 = 5

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

`<Const>` KEY_REGISTRY

● KEY_REGISTRY: string | symbol = createSymbol()

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

Functions

_addHook

▸ _addHook(aHookIdentifier: number, aThis: AbstractLifeCycleComponent, 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 | | aHook | Function |

Returns: void

_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

_assertHook

▸ _assertHook(aHookIdentifier: number, aThis: AbstractLifeCycleComponent): 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 | the instance |

Returns: any[] the hook structure

_createObservable

▸ _createObservable(aHookIdentifier: number, aHook: any[], aShared: boolean, aThis: AbstractLifeCycleComponent): 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 | the life cycle component |

Returns: Observable<any> the observable

_getObservable

▸ _getObservable(aHookIdentifier: number, aShared: boolean, aThis: AbstractLifeCycleComponent): 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 | the instance of the component |

Returns: Observable<any> the observable

_invokeHooks

▸ _invokeHooks(aHookIdentifier: number, aThis: AbstractLifeCycleComponent, 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 | the this pointer | | aArgs | IArguments | the arguments |

Returns: void

_removeRegistry

▸ _removeRegistry(aThis: AbstractLifeCycleComponent): void

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

Clears the registry from the component

Parameters:

| Name | Type | Description | | ------ | ------ | ------ | | aThis | AbstractLifeCycleComponent | the instance |

Returns: void

createGetter

▸ createGetter<T>(aObservable: Observable<T>, aThis: AbstractLifeCycleComponent, 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 | the component | | Optional aInitial | T | the optional initial value |

Returns: PropertyDescriptor the descriptor

createSetter

▸ createSetter<T>(aSubject: Subject<T>, aThis: AbstractLifeCycleComponent): 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 | the component |

Returns: PropertyDescriptor the descriptor

@ibm-wch-sdk/ng > "components/site/site.component"

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

Index

Classes

SiteComponent

Variables

LOGGER

Variables

`<Const>` LOGGER

● LOGGER: "SiteComponent" = "SiteComponent"

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

@ibm-wch-sdk/ng > "decorators/bootstrap/rendering.context.bootstrap.decorator"

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

Index

Functions

ContentWithLayoutBootstrap

Functions

ContentWithLayoutBootstrap

▸ ContentWithLayoutBootstrap(aDirective?: ContentWithLayoutBootstrapDirective): function

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

Parameters:

| Name | Type | | ------ | ------ | | Optional aDirective | ContentWithLayoutBootstrapDirective |

Returns: function

@ibm-wch-sdk/ng > "decorators/bootstrap/rendering.context.bootstrap.directive"

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

Index

Interfaces

ContentWithLayoutBootstrapDirective

@ibm-wch-sdk/ng > "decorators/bootstrap/site.bootstrap.decorator"

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

Index

Variables

LOGGER

Functions

SiteBootstrap

Variables

`<Const>` LOGGER

● LOGGER: "SiteBootstrap" = "SiteBootstrap"

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

Functions

SiteBootstrap

▸ SiteBootstrap(aDirective?: SiteBootstrapDirective): function

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

Parameters:

| Name | Type | | ------ | ------ | | Optional aDirective | SiteBootstrapDirective |

Returns: function

@ibm-wch-sdk/ng > "decorators/bootstrap/site.bootstrap.directive"

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

Index

Interfaces

SiteBootstrapDirective

@ibm-wch-sdk/ng > "decorators/layout/layout.decorator"

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

Index

Interfaces

Binding

Type aliases

Variables

Functions

Type aliases

ExpressionGetter

Ƭ ExpressionGetter: function

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

Type declaration

▸(): string

Returns: string

Subscriptions

Ƭ Subscriptions: Subscription[]

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

Variables

`<Const>` KEY_EXPRESSION

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

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

`<Const>` KEY_OBSERVABLE_PREFIX

● KEY_OBSERVABLE_PREFIX: "on" = "on"

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

`<Const>` KEY_ON_DESTROY

● KEY_ON_DESTROY: "ngOnDestroy" = "ngOnDestroy"

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

`<Const>` KEY_SUBSCRIPTIONS

● KEY_SUBSCRIPTIONS: string | symbol = createSymbol()

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

`<Const>` LOGGER

● LOGGER: "LayoutDecorator" = "LayoutDecorator"

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

`<Const>` UNDEFINED_RENDERING_CONTEXT_SUBJECT

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

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

`<Const>` _BehaviorSubject

● _BehaviorSubject: BehaviorSubject = BehaviorSubject

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

`<Const>` _SYMBOLS

● _SYMBOLS: Record<string, symbol | string>

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

`<Const>` _expressionCache

● _expressionCache: object

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

Type declaration

Functions

LayoutComponent

▸ LayoutComponent(aDirective?: LayoutComponentDirective): function

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

Parameters:

| Name | Type | | ------ | ------ | | Optional aDirective | LayoutComponentDirective |

Returns: function

LayoutMapping

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

Parameters:

| Name | Type | | ------ | ------ | | aID | string | string[] | LayoutMappingDirective | | Optional aSelector | string | string[] | Type<any> | | Optional aLayoutMode | string | string[] |

Returns: function

RenderingContextBinding

▸ RenderingContextBinding<T>(aBinding?: string | RenderingContextDirective<T>, aDefault?: T): function

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

Type parameters:

T

Parameters:

| Name | Type | | ------ | ------ | | Optional aBinding | string | RenderingContextDirective<T> | | Optional aDefault | T |

Returns: function

_assertBinding

▸ _assertBinding<T>(aInstance: any, aSymbol: symbol | string, aName: string): Binding<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<T> the binding

_baseExpressionFromObservableExpression

▸ _baseExpressionFromObservableExpression(aKey: string): string

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

Parameters:

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

Returns: string

_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

_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

_getExpressionGetter

▸ _getExpressionGetter(aPrototype: any, aExpression: string | null | undefined, aKey: string, aOtherKey: string): ExpressionGetter

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

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

Parameters:

| Name |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

IBM Angular SDK for Watson Content Hub

Changes

Usage

Class documentation

Components

First steps

Prerequisites

Server Side

Client Side

Note

Using the development version of the NPM registry

Changelog

Current

Added

Changes

Breaking Changes

6.0.69

Breaking Changes

Changes

Added

5.0.107 - 2018-02-28

Breaking Changes

Changes

1.0.830 - 2018-01-16

Added

Changed

1.0.771 - 2018-01-16

Added

Fixed

@ibm-wch-sdk/ng

Index

External modules

WchNgModule

Usage

Tipps

Developing modules based on the SDK

LayoutDecorator

Usage

Properties

Note

LayoutMappingDecorator

Parameters

Usage

RenderingContextBinding

Usage

Properties

Note

AbstractRenderingComponent

Attributes

Methods

Events

AbstractLifeCycleComponent

Methods

PageComponent

Usage

Attributes

Events

Error handling

WCH Dependency

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

Index

Classes

Type aliases

Variables

Type aliases

ComponentState

Variables

<Const> LOGGER

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

Index

Classes

Variables

Variables

<Const> LOGGER

`<Const>` LOGGER

`<Const>` LOGGER

`<Const>` LOGGER

`<Const>` LAYOUT_NOT_FOUND_LAYOUT

`<Const>` PAGE_NOT_FOUND_LAYOUT

`<Const>` LOGGER

`<Const>` _EMPTY_VALUE

`<Const>` _META_NAME_DESCRIPTION

`<Const>` _META_NAME_ID