update demo code

src/app/app.component.html

@@ -57,7 +57,7 @@
                 <span>attrPosition</span>
                 <select [value]="attrPosition"
                         (change)="attrPosition = $event.target.value; generated()">
-                    <option value="space">inline: no alignment</option>
+                    <option value="inline">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>
@@ -83,6 +83,18 @@
                        [value]="noContentTags"
                        (change)="noContentTags = $event.target.value; generated()">
             </label>
+            <label *ngIf="type === 'html'">
+                <span>removeOptionalEndTags</span>
+                <input type="checkbox"
+                       [checked]="removeOptionalEndTags"
+                       (change)="removeOptionalEndTags = $event.target.checked; generated()">
+            </label>
+            <label *ngIf="type === 'html'">
+                <span>optionalEndTags</span>
+                <input type="text"
+                       [value]="optionalEndTags"
+                       (change)="optionalEndTags = $event.target.value; generated()">
+            </label>
         </div>
     </fieldset>
 
@@ -95,4 +107,4 @@
 
 <footer>
     <a href="https://git.ikilote.net/angular/json2html">Source code</a>
-</footer>
+</footer>
\ No newline at end of file

src/app/app.component.ts

 import { Component } from '@angular/core';
 
-import { Json2html, Json2htmlRef, Json2htmlOptions } from 'projects/json2html/src/public_api';
-
 import { examples } from './app.json';
 
+import { Json2html, Json2htmlOptions, Json2htmlRef } from 'projects/json2html/src/public_api';
+
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
@@ -39,6 +39,26 @@ export class AppComponent {
         'track',
         'wbr'
     ].toString();
+    removeOptionalEndTags = false;
+    optionalEndTags = [
+        'colgroup',
+        'dd',
+        'dt',
+        'li',
+        'optgroup',
+        'option',
+        'p',
+        'rb',
+        'rt',
+        'rtc',
+        'rp',
+        'td',
+        'th',
+        'thead',
+        'tbody',
+        'tfoot',
+        'tr'
+    ].toString();
 
     data: Json2htmlRef | Json2htmlRef[];
     html: string;
@@ -55,6 +75,7 @@ export class AppComponent {
     format(json: string) {
         try {
             this.data = JSON.parse(json);
+            this.generated();
         } catch (error) {
             console.error(error);
         }
@@ -70,7 +91,9 @@ export class AppComponent {
             formatting: this.formatting,
             indent: this.indent,
             xmlDefaultTag: this.xmlDefaultTag,
-            noContentTags: this.noContentTags.split(',')
+            noContentTags: this.noContentTags.split(','),
+            removeOptionalEndTags: this.removeOptionalEndTags,
+            optionalEndTags: this.optionalEndTags.split(',')
         };
 
         console.log(options);

src/app/app.json.ts

@@ -48,6 +48,19 @@ export const examples = [
             body: [
                 'test2'
             ]
+        },
+        {
+            tag: 'datalist',
+            attrs: { id: 'id-datalist' },
+            body: [
+                { tag: 'option', attrs: { value: 'ABCD' } },
+                { tag: 'option', attrs: { value: 'EFGH' } },
+                { tag: 'option', attrs: { value: 'IJKL' } },
+                { tag: 'option', attrs: { value: 'MNOP' } },
+                { tag: 'option', attrs: { value: 'QRST' } },
+                { tag: 'option', attrs: { value: 'UVW' } },
+                { tag: 'option', attrs: { value: 'XYZ' } }
+            ]
         }
     ]
 ];