@ngxhub/ngx-dynamic

Description

Inject components according to configuration and dynamically create components

English | 简体中文

Software Architecture

Tool library created based on Angular16

Installation

$ npm install @ngxhub/ngx-dynamic

Instructions

1. Create Component

   $ ng g c components/is-button
   $ ng g m components/is-button

2. Modify Component module[is-button.module.ts]

   export class IsButtonModule {
     static entry = IsButtonComponent;
   }

3. Injection Component[AppModule]

   import { NgModule } from "@angular/core";
   import { DynamicModule, IS_BIZ_COMPONENT } from "@ngxhub/ngx-dynamic";
   const widgets = {
     "is-button": import("./components/is-button/is-button.module").then((r) => r.IsButtonModule),
   };
   @NgModule({
     imports: [DynamicModule],
     providers: [{ provide: IS_BIZ_COMPONENT, useValue: widgets }],
   })
   export class AppModule {}

4. Using Component

   <div x-dynamic [item]="{type:'is-button'}" (eventManage)="onEventManage($event)"></div>