Mini Beagle

A Server Driven UI lib. Based on a json file this lib will build a component tree.

Install

npm install mini-beagle

Add to your Angular app

Import MiniBeagleModule into your Angular app:

...
import { MiniBeagleModule } from 'mini-beagle';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MiniBeagleModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The lib will load the json file from a server. You can replace the default server URL provind a new BASE_URL value:

import { BASE_URL } from 'mini-beagle'

...
  providers: [
    { provide: BASE_URL, useValue: 'http://localhost:4200/assets' }
  ],

By default the lib load the resources from http://localhost:4200/assets.

Now, you're able to render a component tree provided by a backend service. In your template insert the mb-outlet-container component with the respective resourcePath:

<mb-outlet-container resourcePath="/sample.json"></mb-outlet-container>

JSON file

This is as JSON file example:

{
    "type": "container",
    "children": [
        {
            "type": "card",
            "children": [
                {
                    "type": "image",
                    "url": "https://www.petlove.com.br/images/breeds/193436/profile/original/beagle-p.jpg",
                    "description": "Minha imagem"
                },
                {
                    "type": "text",
                    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices elit sed est fringilla tincidunt. Nunc sit amet od"
                }
            ]
        },
        {
            "type": "input",
            "value": 18,
            "placeholder": "Informe a sua idade",
            "id": "age"
        },
        {
            "type": "button",
            "value": "Submit"
        }
    ]
}