Add a dynamic demo

src/app/app.component.html

+<h1>json2html-lib</h1>
+
+<div>
+    <button type="button"
+            (click)="updateExample(1)">Example 1</button>
+    <button type="button"
+            (click)="updateExample(2)">Example 2</button>
+</div>
+
+<main>
+    <fieldset class="json">
+        <legend>json</legend>
+        <textarea (change)="format($event.target.value)">{{data | json}}</textarea>
+    </fieldset>
+
+    <fieldset class="options">
+        <legend>options</legend>
+        <div>
+            <label>
+                <span>formatting</span>
+                <select [value]="formatting"
+                        (change)="formatting = $event.target.value; generated()">
+                    <option value="multiline">multiline (defaut): structure sur plusieur lignes avec indentation
+                        possible</option>
+                    <option value="inline">inline: all on one line without space</option>
+                </select>
+            </label>
+            <label *ngIf="formatting === 'multiline'">
+                <span>indent</span>
+                <input type="checkbox"
+                       [checked]="indent"
+                       (change)="indent = $event.target.checked; generated()">
+            </label>
+            <label *ngIf="indent && formatting === 'multiline'">
+                <span>spaceType</span>
+                <select [value]="spaceType"
+                        (change)="spaceType = $event.target.value; generated()">
+                    <option value="space">space (defaut)</option>
+                    <option value="tab">tab</option>
+                </select>
+            </label>
+            <label *ngIf="indent && formatting === 'multiline'">
+                <span>spaceLength</span>
+                <input [value]="spaceLength"
+                       type="number"
+                       min="0"
+                       (change)="spaceLength = $event.target.value; generated()">
+            </label>
+            <label *ngIf="indent && formatting === 'multiline'">
+                <span>spaceBase</span>
+                <input [value]="spaceBase"
+                       type="number"
+                       min="0"
+                       (change)="spaceBase = $event.target.value; generated()">
+            </label>
+            <label *ngIf="indent && formatting === 'multiline'">
+                <span>attrPosition</span>
+                <select [value]="attrPosition"
+                        (change)="attrPosition = $event.target.value; generated()">
+                    <option value="space">inline: no alignment</option>
+                    <option value="space">space: alignment with higher level</option>
+                    <option value="alignTag">alignTag: alignment with the tag</option>
+                    <option value="alignFirstAttr">alignFirstAttr (default): alignment with the first attribute</option>
+                </select>
+            </label>
+            <label>
+                <span>type</span>
+                <select [value]="type"
+                        (change)="type = $event.target.value; generated()">
+                    <option value="html">html (default)</option>
+                    <option value="xml">xml</option>
+                </select>
+            </label>
+            <label>
+                <span>xmlDefaultTag</span>
+                <input type="text"
+                       [value]="xmlDefaultTag"
+                       (change)="xmlDefaultTag = $event.target.value; generated()">
+            </label>
+            <label>
+                <span>noContentTags</span>
+                <input type="text"
+                       [value]="noContentTags"
+                       (change)="noContentTags = $event.target.value; generated()">
+            </label>
+        </div>
+    </fieldset>
+
+    <fieldset class="rendu">
+        <legend>Rendu</legend>
+        <textarea>{{html}}</textarea>
+    </fieldset>
+</main>
+
+
+<footer>
+    <a href="https://git.ikilote.net/angular/json2html">Source code</a>
+</footer>
\ No newline at end of file

src/app/app.component.scss

+
+::ng-deep {
+    :root {
+        
+    }
+
+    body {
+        font-family: sans;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+}
+
+
+main {
+    display: grid;
+    grid-template: "a b c" / 2fr 2fr 2fr;
+}
+
+form {
+    flex: 3;
+}
+
+aside {
+    flex: 2;
+    padding: 0 15px
+}
+
+
+textarea {
+    width: 100%;
+    min-height: 350px;
+}
+
+input:not([type="checkbox"]):not([type="radio"]),
+select {
+    width: 100%;
+}
+
+label {
+    display: block;
+
+    & >  span {
+        display: block;
+        font-weight: 700;
+    }
+}
\ No newline at end of file

src/app/app.component.ts

 import { Component } from '@angular/core';
 
-import { Json2html } from 'projects/json2html/src/public_api';
+import { Json2html, Json2htmlRef, Json2htmlOptions } from 'projects/json2html/src/public_api';
+
+import { examples } from './app.json';
 
 @Component({
     selector: 'app-root',
@@ -9,60 +11,69 @@ import { Json2html } from 'projects/json2html/src/public_api';
 })
 export class AppComponent {
 
+    // options
+    spaceType: 'space' | 'tab' = 'space';
+    spaceLength = 4;
+    spaceBase = 0;
+    // maxLenght= 0;
+    attrPosition: 'inline' | 'space' | 'alignTag' | 'alignFirstAttr' = 'alignFirstAttr';
+    type: 'html' | 'xml' = 'html';
+    formatting: 'inline' | 'multiline' = 'multiline';
+    indent = true;
+    xmlDefaultTag = 'span';
+    noContentTags = [
+        'area',
+        'base',
+        'br',
+        'col',
+        'command',
+        'embed',
+        'hr',
+        'img',
+        'input',
+        'keygen',
+        'link',
+        'meta',
+        'param',
+        'source',
+        'track',
+        'wbr'
+    ].toString();
+
+    data: Json2htmlRef | Json2htmlRef[];
+    html: string;
+
     constructor() {
+        this.updateExample(1);
+    }
 
-        console.log(new Json2html({
-            tag: 'div',
-            attrs: { id: 'test1', class: 'testclasse' },
-            body: [
-                'test',
-                {
-                    tag: 'div',
-                    attrs: { id: 'test2', class: 'foobar' },
-                    body: 'test'
-                }
-            ]
-        }, { formatting: 'multiline' }).toString());
+    updateExample(number: number) {
+        this.data = examples[number];
+        this.generated();
+    }
+
+    format(json: string) {
+        try {
+            this.data = JSON.parse(json);
+        } catch (error) {
+            console.error(error);
+        }
+    }
 
-        console.log(new Json2html([{
-            tag: 'div',
-            attrs: { id: 'test', class: 'testclasse', test: null },
-            body: [
-                'test',
-                {
-                    tag: 'div',
-                    attrs: { id: 'test-div', class: 'foo' },
-                    body: [
-                        'test2',
-                        {
-                            tag: 'div',
-                            attrs: { id: 'test-subdiv', class: 'foobar' },
-                            body: 'test3'
-                        }
-                    ]
-                },
-                {
-                    tag: 'hr'
-                },
-                {
-                    tag: 'span',
-                    attrs: { id: 'test-span', class: 'bar' },
-                    body: [
-                        'test2'
-                    ]
-                }
-            ]
-        },
-        {
-            tag: 'span',
-            attrs: { id: 'attr-2', class: 'bar' },
-            body: [
-                'test2'
-            ]
-        }], {
-            spaceBase: 5,
-            type: 'xml'
-        }).toString());
+    generated() {
+        const options: Json2htmlOptions = {
+            spaceType: this.spaceType,
+            spaceLength: this.spaceLength,
+            spaceBase: this.spaceBase,
+            attrPosition: this.attrPosition,
+            type: this.type,
+            formatting: this.formatting,
+            indent: this.indent,
+            xmlDefaultTag: this.xmlDefaultTag,
+            noContentTags: this.noContentTags.split(',')
+        };
 
+        console.log(options);
+        this.html = new Json2html(this.data, options).toString();
     }
 }

src/app/app.json.ts

+export const examples = [
+    ,
+    {
+        tag: 'div',
+        attrs: { id: 'test1', class: 'testclasse' },
+        body: [
+            'test',
+            {
+                tag: 'div',
+                attrs: { id: 'test2', class: 'foobar' },
+                body: 'test'
+            }
+        ]
+    },
+    [
+        {
+            tag: 'div',
+            attrs: { id: 'test', class: 'testclasse', test: null },
+            body: [
+                'test',
+                {
+                    tag: 'div',
+                    attrs: { id: 'test-div', class: 'foo' },
+                    body: [
+                        'test2',
+                        {
+                            tag: 'div',
+                            attrs: { id: 'test-subdiv', class: 'foobar' },
+                            body: 'test3'
+                        }
+                    ]
+                },
+                {
+                    tag: 'hr'
+                },
+                {
+                    tag: 'span',
+                    attrs: { id: 'test-span', class: 'bar' },
+                    body: [
+                        'test2'
+                    ]
+                }
+            ]
+        },
+        {
+            tag: 'span',
+            attrs: { id: 'attr-2', class: 'bar' },
+            body: [
+                'test2'
+            ]
+        }
+    ]
+];