@saikou/dynamic-components-shell NPM

Saikou DynamicComponentsShell lib

This library exposes a single component that, based on the DynamicCompsModel interface, renders dynamic components in Angular (13+).

Installing

To install this library, run the command:

- npm i @saikou/dynamic-components-shell

Usage

Since this is an Angular library the usage will be very similar to other Angular packages.

Import the lib into the module that will be responsible for rendering your dynamic components:

- import { DynamicCompsModule } from '@saikou/dynamic-components-shell';

Add the imported module to the module's imports array:

 @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
      DynamicCompsModule,
      MatSnackBarModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
  })

Add the component to that module's main component template (in this case app.component.html):

 <lib-dynamic-comps
    [dynamicComponent]="comp"
  ></lib-dynamic-comps>

Component Properties / Bindable Attributes

dynamicComponent (Required): Is used to assign what component should be lazy loaded inserted in to the DOM
snack (Optional): Is used to assign an Object or a Service that has a open function (it has 3 params, first is the message, secound is a action and the third is a config object with a duration in milisecounds of how much time the message should be shown to the user) that logs to the user a message (the same customLoadErrorMessage below) in case of the component couldn't be loaded. If nothing is attributed to it, there will be only a console.log error message.
customLoadErrorMessage (Optional): Is the user friendly message mentionated before. If nothing is attributed to it, it will use a Default pt-br message.

The `DynamicCompsModel` interface, it's properties and the strategy of lazy-loaded dynamic components

This section is a work in progress..

Notes

It is not necessary, but we strongly recommend the use of matsnackbar as a logger, as it provides a simple ui.
The <lib-dynamic-comps></lib-dynamic-comps> component is designed to work with loops, so feel free to explore it with a set of components that follow the DynamicCompsModel interface that comes with this lib.