@ibm-wch-sdk/ng

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

Usage no npm install needed!

<script type="module">
  import ibmWchSdkNg from 'https://cdn.skypack.dev/@ibm-wch-sdk/ng';
</script>

README

IBM Angular SDK for Watson Content Hub

NPM version

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

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 {

or

@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

Classes

Type aliases

Variables

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

Variables

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

Type aliases

Variables

Functions

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

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

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

Index

Classes

Type aliases

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

Type aliases

Variables

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

Type aliases

Variables

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

Variables

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

Variables

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

Type aliases

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

Variables

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

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

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

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

Index

Variables

Functions

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

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

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

Index

Interfaces

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

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

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 |