Library with reusable WCH components.


6.2.173 years ago3 years agoMinified + gzip package size for @dx-samples/creative-bootstrap-components in KB



Build Status

Implementation of the Creative design for WCH.




This library is meant to be used in an Angular based application.

Using Schematics

The easiest way to add the component to your application is via the ng add command line. Execute the following command from within the application folder:

ng add @dx-samples/creative-bootstrap-components

This will install the library and also execute the necessary changes to your source files.

Add the library to your Application explicitly

If you prefer to add the library to your project without tooling, follow this process:

  • add @dx-samples/creative-bootstrap-components to the dependencies of your project
npm install --save @dx-samples/creative-bootstrap-components
  • import WchNgBootstrapComponentsModule into your main application, e.g. like this:


import { LAYOUTS } from './layouts';
import { WchNgModule } from 'ibm-wch-sdk-ng';
import { environment } from '../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

// modification start
import { WchNgEditModule } from 'ibm-wch-sdk-ng-edit';
import { WchNgBootstrapComponentsModule } from '@dx-samples/creative-bootstrap-components';
// modification end

  declarations: [AppComponent, ...LAYOUTS],
  imports: [

    // modification start
    // modification end

  providers: [],
  entryComponents: [...LAYOUTS],
  bootstrap: [AppComponent]
export class AppModule {}

This process provides all layouts to the single page application.

Note We are working on making it simpler to add the module to the application, stay tuned.

Deploy the application and WCH artifacts

The library bundles the WCH content types, layouts and layout mappings. Deploy these artifacts to WCH, e.g. by using the following command of the CLI:

ibm-wch-sdk-cli application push --data ./data/ --override --aggregated

The --aggregated flag makes sure to not only deploy the application data but also the bundled dependencies.

Note: In order to successfully execute the command make sure to meet me prerequisites mentioned in the documentation of the CLI.

Class documentation

Refer to the documentation.


This is how a microsite using these components might look like:

Example Image


If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.