ng-xtend Framework

Enable plugins in your Angular application !

ng-xtend, what for?

The most successful web applications enjoy an eco-system of plugins with them. Check Nextcloud, Drupal, Joomla! or Wordpress, it’s so easy to extend them with a plugin that meets your needs.

The technology they are using, PHP, makes it easy to develop and install new plugins. With limited efforts, these plugins are automatically installed, recognized and available.

While I love the way Angular & Typescript work, there is no easy way to provide extension capabilities through plugins developed by external teams.

That’s why I have developed ng-xtend !

What is ng-xtend concretely?

It’s an Angular library allowing you to:

• Define in a simple way the data you want to process in your application.
• Use plugins together to render or edit this data.
• Dynamically load and install plugins.
• Save / Load / Update the data to any storage.

Some examples ?

Here are screenshots of an application automatically handling list, view and edition of complex data (evaluations of coffee beans) using ng-xtend, a dont-code application, and the default plugin and web plugin
You can see how the different plugins work together without knowing each other. Even the host application does not know them.

Curious ? You can run and test the application here: Coffee Bean Evaluation

What kind of plugins are supported ?

3 types of plugins are supported as a first step

• Simple Components: With limited effort and intrusion in your code, you can transform a regular Angular component into a pluggable one. Ideal for providing view or display of a custom type.
• Complex Components: With some additional effort, this type Angular Component can itself provide extension points, filled by ng-xtend with the right plugin. Ideal for displaying complex information, where you want to delegate actions or display. For example, think of a “Money” plugin that delegates the “Currency” management to another plugin, without even knowing it.
• List Components: Displays a list of any objects. It calls other plugins to manage the values inside the displayed list

Then in the future, we’ll support

• Action Components: Provides actionable services on types without User Interface elements.
• Workflow components: Enable pre-defined flow of pages (list to detail for example…)

How does it work ?

As you can infer from the preceding descriptions, the ng-xtend framework heavily relies on types. Any data manipulated in a ng-xtendable application manipulates data with a type.

As mentioned, a plugin can be used to display or edit a certain type in the UI, or to act on the type. The actions will be displayed as buttons the user can click.

The host application dynamically loads the plugins from remote locations. A simple config file is enough to define what plugins to load from where.

Upon loading, the plugin registers itself to ng-xtend and provides the list of types and actions it supports.

Whenever encountering a certain type, ng-xtend will look for the right plugin, select the right component, and call it with the proper context. This happens without the host knowing the plugin.

The host only needs to provide xt-render points in their application, like “here you can display action buttons for this ‘type’”, or “here I need the user to enter this ‘type’, please find the right plugin”.

As well, plugins will be able to alter the application menus and other customizations.

What is the roadmap ?

• Insertion of simple component dynamically
• Registry of plugins
• General support for complex components and lists
• Strong type support
• Dynamic loading of plugins
• v1 !
• Enhanced component selection criteria (xt-type, context)
• Support for action components
• v2 !

How to use it ?

This is still work in progress, but now it can support real-life applications !

Developing a new plugin

1. Checkout the repository ng-xtend
2. It’s a monorepo using rush build system, so run

    npm install -g @microsoft/rush
    rush update
    rush build

3. Use a copy of libs/xt-plugin-sample to develop your own plugins and components.
4. Unit test your components using vitest
   • ng-xtend provides pre-defined test pages for different cases (in a form or not) that will easily embed your component for testing
   • See currency simple component test
   • Or money complex component test
5. Test your components using plugin-tester
   • More details in plugin-tester user documentation.
   • Run your plugin tester application, for example ng serve sample-tester for the sample plugin
   • Run the xt-plugin-tester with ng serve plugin-tester in xt-plugin-tester directory
   • In the Plugin Tester app, load your plugin by entering its url (http://localhost:4201 for sample plugin) in the Plugin url field.
   • Once loaded, go to the test screen, select your component in the second screen, and play with it
   • For easier debugging, you can statically add and register your plugin to xt-plugin-tester/package.json

Use plugins in my application

To use ng-xtend plugins in your own Angular Application, xt-host project is a great example. It does:

• Install xt-components and the default plugin in your package.json

    npm install xt-components xt-type xt-store
    npm install xt-plugin-default

• Configure your application to load your plugins.

    protected resolverService = inject (XtResolverService);
    this.resolverService.loadPlugin(url);

The plugins will register themselves automatically.

• Describe the data type you want to manipulate

    this.resolverService.registerTypes ({
      money:{
        amount:'number',
      currency:'currency'  /** Type provided by the finance plugin **/ 
    },
      book: {
        name:'string',
        publication:'date',
        price:'money',
        notation:'rating'  /** Type provided by the web plugin **/
      }    
    }); 

• Sets insertion point in your angular pages
  • For example, to display a table of books

        <h1>List of books</h1>
        <xt-render [displayMode]="LIST_VIEW" [valueType]="book" [value]="listOfBooks" ></xt-render>

 - or allow editing a book information

        <h1>Enter your book details</h1>
        <div form="bookForm">
          <xt-render [displayMode]="FULL_EDITABLE" [valueType]="book" [formGroup]="bookForm" subName="book"></xt-render>
        </div>

 - To support more complex scenario, use

       <xt-render-sub [context]="context()"></xt-render-sub>

with `context ()` returning type information necessary to select the right component.

Thank you

Please check my other project Dont-code, it will soon run using ng-xtend ! Email: contact@ng-xtend.dev or developer@dont-code.net