Commit f6a619d3 authored by Zéfling's avatar Zéfling 🎨
Browse files

update demo code

parent 03501972
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<span>attrPosition</span> <span>attrPosition</span>
<select [value]="attrPosition" <select [value]="attrPosition"
(change)="attrPosition = $event.target.value; generated()"> (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="space">space: alignment with higher level</option>
<option value="alignTag">alignTag: alignment with the tag</option> <option value="alignTag">alignTag: alignment with the tag</option>
<option value="alignFirstAttr">alignFirstAttr (default): alignment with the first attribute</option> <option value="alignFirstAttr">alignFirstAttr (default): alignment with the first attribute</option>
...@@ -83,6 +83,18 @@ ...@@ -83,6 +83,18 @@
[value]="noContentTags" [value]="noContentTags"
(change)="noContentTags = $event.target.value; generated()"> (change)="noContentTags = $event.target.value; generated()">
</label> </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> </div>
</fieldset> </fieldset>
...@@ -95,4 +107,4 @@ ...@@ -95,4 +107,4 @@
<footer> <footer>
<a href="https://git.ikilote.net/angular/json2html">Source code</a> <a href="https://git.ikilote.net/angular/json2html">Source code</a>
</footer> </footer>
\ No newline at end of file
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Json2html, Json2htmlRef, Json2htmlOptions } from 'projects/json2html/src/public_api';
import { examples } from './app.json'; import { examples } from './app.json';
import { Json2html, Json2htmlOptions, Json2htmlRef } from 'projects/json2html/src/public_api';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
...@@ -39,6 +39,26 @@ export class AppComponent { ...@@ -39,6 +39,26 @@ export class AppComponent {
'track', 'track',
'wbr' 'wbr'
].toString(); ].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[]; data: Json2htmlRef | Json2htmlRef[];
html: string; html: string;
...@@ -55,6 +75,7 @@ export class AppComponent { ...@@ -55,6 +75,7 @@ export class AppComponent {
format(json: string) { format(json: string) {
try { try {
this.data = JSON.parse(json); this.data = JSON.parse(json);
this.generated();
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
...@@ -70,7 +91,9 @@ export class AppComponent { ...@@ -70,7 +91,9 @@ export class AppComponent {
formatting: this.formatting, formatting: this.formatting,
indent: this.indent, indent: this.indent,
xmlDefaultTag: this.xmlDefaultTag, xmlDefaultTag: this.xmlDefaultTag,
noContentTags: this.noContentTags.split(',') noContentTags: this.noContentTags.split(','),
removeOptionalEndTags: this.removeOptionalEndTags,
optionalEndTags: this.optionalEndTags.split(',')
}; };
console.log(options); console.log(options);
......
...@@ -48,6 +48,19 @@ export const examples = [ ...@@ -48,6 +48,19 @@ export const examples = [
body: [ body: [
'test2' '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' } }
]
} }
] ]
]; ];
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment