This is an angular component which enables configuration of an IBM WebSphere Portal scripting portlet by using its preferences REST service.

Display Edit Interface

This will display a text area where the configuration JSON can be modified when the page is in edit mode:

<lib-portlet-preferences class="hide_in_view_mode"></lib-portlet-preferences>

Add this to your component CSS:

.hide_in_view_mode {
  display: none;
}

.edit-mode .hide_in_view_mode {
  display: block;
}

and then ensure your @Component includes encapsulation: ViewEncapsulation.None

Retrieve Values

Inject a service into your component then invoke method to retieve configuration object:

import { PortalPreferencesService } from 'portal-preferences';

...

  constructor(private preferencesService: PortalPreferencesService ) { }

  ngOnInit() {
    // Retrieve portlet preferences
    this.preferencesService.getPreferences().subscribe(
      (prefs: any) => { this.myConfiguration = prefs.someValue; },
      (err) => { console.log(err); }
    );
  }