Angular Web components are very popular and allows to build some self contain components that can be deployed anywhere. This document explain how to inject the Angular Web components inside the Pega section-based UI architecture.

Note that similar examples already exists in the UI Gallery for Angular JS, React, Vue and D3 - The examples comes with documentation inside the rules and complete examples - to access the UI gallery, https://docs.pega.com/user-experience/85/accessing-ui-gallery

You can create new Angular Web Component using the command

ng generate component <NAME>

For this tutorial, we will create 2 components called 'component1' and 'component2'.

It is indeed a good practice to create decouples components that could be added in the section ruleform. You can find attached the complete source code project and a RAP to import into your application.

Here is the file structure of the project in VSCode

For this demo - the component are very basic and create a default container card and will add a CSS class 'comp-1' to style the text of the paragraph

One of the important step is to generate the bundle in ES5 and not in ES6 which is the default - this is because the rule-file-text expect some ES5 valid JS code - if you want to generate ES6 code, you can host the bundle on an external CDN and refer to the JS file in your custom control/section

After building the library and running ng serve, here is the demo of the 2 components

3 JS files are generated in the dist folder: main, runtime and polyfill. If you intend to serve these files by the Pega Platform, you will need to create corresponding rule-file-text for each file - make sure to turn off minification for each of these files

The recommendation is to create a bundle

and then to upload each file individually - note that the main file is quite large (256Kb) and will take several seconds to load and save the rule

From there - you can create either a custom control or custom section to load the JS and set the appropriate HTML tag of the component - this is the example of the Component1 - pega onlyonce is used to only load the bundle once so that if the 2 components are loaded, the JS is only loaded once for the whole portal

now if I use these 2 components on the home page of a Theme Cosmos application, I can see the 2 components

Note that using Angular Web Component will significantly increase the performance and page load time - for these 2 simple components, the size of the bundle file is significant (around 300KB) - if you start to add 3rd party libs and create a more complex component, your payload size will increase dramatically - If you intend to use Angular, you want might to have a look at the Angular Starter Pack or Angular SDKs.