ng-xtend logo ng-xtend Framework

Empower your Angular applications with a flexible, scalable plugin ecosystem! 🚀

Try Live Demo GitHub license

💡 Why ng-xtend?

The most successful web platforms —like WordPress, Nextcloud, or Drupal— thrive because of their massive plugin ecosystems. They make it effortless to extend functionality without touching the core.

In the Angular & TypeScript world, achieving this level of modularity has always been a challenge. ng-xtend was built to bridge that gap. It allows you to build “extensible by design” applications where external teams can contribute features seamlessly.

✨ Key Features

ng-xtend is an Angular library that enables you to:

📸 See it in Action

☕ Coffee Bean Evaluation

A real-world example of an app handling complex data (lists, views, and editions) entirely through dynamic plugins.

Coffee Bean Evaluation

Other Demos

Demo applications can be seen here:

Dont-code Demo Apps

News

🚀 How it Works (The Magic)

The host application doesn’t need to know its plugins at compile time. It simply sets Render Points (xt-render):

  1. Configuration: A simple JSON file defines which plugins to load from which remote URLs.
  2. Registration: Upon loading, the plugin registers itself and declares which data types or actions it supports.
  3. Resolution: When ng-xtend encounters a specific type (e.g., Rating, Currency), it automatically finds and injects the correct component from the loaded plugins.

🛠️ Supported Plugin Types

Currently, ng-xtend supports four major extension points:

Type Description
Simple Components Turn regular Angular components into pluggable units for specific data types.
Complex Components Components that provide their own extension points. Example: A “Money” plugin delegating “Currency” selection to another plugin.
List Components Effortlessly display collections of objects by delegating item rendering to the right plugins.
Action Handlers ✨ Add logic and actionable buttons to your UI dynamically.

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.

List view screenshot Edit object screenshot

🛠️ Plugin Tester

Curious about how plugins are dynamically injected? Try the dedicated tester:

Plugin tester

🗺️ Roadmap

🧑‍💻 Getting Started

Using the Framework

The repository ng-xtend-examples shows many examples (from basic to complex) using ng-xtend. You should have a look at it to get started.

️Repository of examples

To better understand the real-world usage of ng-xtend, we’ve developed a set of example projects, in the ng-xtend examples repository.

Here is a short description of each one:

Example Description
basic-example Displays any object in various format in a generic way
typed-example By describing the type handled, ng-xtend supports more use cases
plugin-example Countries and Money fields looks nicer thanks to the newly added plugins. They are discovered and used transparently by the ng-xtend framework
inout-example A full list / edit / view flow is setup thanks to inputs / outputs connecting unknown components together.
store-example Edited elements are persisted between sessions thanks to the xt-store library included with the ng-xtend framework.
advanced-type-example Showcase support for advanced types and models (like references)
dynamic-example Loads all plugins dynamically from another website using Native-Federation

Developing a Plugin

We use a monorepo structure powered by Rush.

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

Detailed plugin development guide

  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
  1. Use a copy of libs/xt-plugin-sample to develop your own plugins and components.
  2. Unit test your components using vitest
  3. Test your components using plugin-tester

Use plugins in my application

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

    npm install xt-components xt-type xt-store
    npm install xt-plugin-default
    protected resolverService = inject (XtResolverService);
    this.resolverService.loadPlugin(url);
The plugins will register themselves automatically.
    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 **/
      }    
    }); 
        <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