WiwoWidget

This is an example project showing how to install and use the @wiwo/widget-angular8 library to embed a Widget Works Widget into an Angular 8 project.

This library was generated with Angular CLI version 8.2.14.

Dependencies

$ npm install -S @wiwo/widget-angular8

The package.json should now include this library as a dependency:

// package.json
{
  "dependencies": {
    "@wiwo/widget-angular8": "^v..."
  }
}

Register module

In your application app.module.ts import and register the WiwoWidgetModule

// app.module.ts

// 1. import `WiwoWidgetModule`
import { WiwoWidgetModule } from '@wiwo/widget-angular8';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    // ...
    
    // 2. Register the module as an import
    WiwoWidgetModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

You can now use the wiwo-widget-input and wiwo-widget components in your application.

The WiwoWidgetModule provides the following components:

• wiwo-widget-input exposes the Widget as a ControlValueAccessor and accepts a formControl or formControlName prop

The licenseId will be provided to you later.

<wiwo-widget-input
  licenseId="required string; the Widget license to embed in the application"
  [formControl]="optional; the FormControl<string> instance that will receive the JSON-encoded string of the Widget state"
  formControlName="optional; the form control name for the associated FormControl<string>"
></wiwo-widget-input>

If formControl or formControlName is given then that form control will be updated with the current state of the Widget as the user interacts with the Widget instance.

• wiwo-widget embeds the Widget in the page

<wiwo-widget
  licenseId="required string; the Widget license to embed in the application"
  [value]="optional string; the JSON-encoded string representing the Widget state to restore on startup; if not provided the Widget will initialise with its default values"
></wiwo-widget>