serialized-tool.component.html

<div class="container-fluid page p-4">
    <div class="row">
        <h2>Serialized Tool</h2>
        <p>Convert JSON, XML, YAML or TOML serialized objects/data to each other.</p>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="d-flex flex-wrap gap-2">
                <label class="form-label">From</label>
                <div class="form-check ">
                    <input class="form-check-input" type="radio" name="fromRadio" id="fromJson" value="json" [(ngModel)]="fromLang" (change)="convert()">
                    <label class="form-check-label" for="fromJson">JSON</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="fromRadio" id="fromXml" value="xml" [(ngModel)]="fromLang" (change)="convert()">
                    <label class="form-check-label" for="fromXml">XML</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="fromRadio" id="fromYaml" value="yaml" [(ngModel)]="fromLang" (change)="convert()">
                    <label class="form-check-label" for="fromYaml">YAML</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="fromRadio" id="fromToml" value="toml" [(ngModel)]="fromLang" (change)="convert()">
                    <label class="form-check-label" for="fromToml">TOML</label>
                </div>
            </div>
            <div class="code-border" [@hasError]="hasError">
                <code-area innerStyle="min-height:500px;" [(code)]="fromCode"
                    (codeChange)="inputDebouncer.next(fromCode)" [language]="fromLang" />
            </div>
            <br />
        </div>
        <div class="col-md-6">
            <div class="d-flex flex-wrap gap-2">
                <label class="form-label">To</label>
                <div class="form-check ">
                    <input class="form-check-input" type="radio" name="toRadio" id="toJson" value="json" [(ngModel)]="toLang" (change)="convert()">
                    <label class="form-check-label" for="toJson">JSON</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="toRadio" id="toXml" value="xml" [(ngModel)]="toLang" (change)="convert()">
                    <label class="form-check-label" for="toXml">XML</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="toRadio" id="toYaml" value="yaml" [(ngModel)]="toLang" (change)="convert()">
                    <label class="form-check-label" for="toYaml">YAML</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="toRadio" id="toToml" value="toml" [(ngModel)]="toLang" (change)="convert()">
                    <label class="form-check-label" for="toToml">TOML</label>
                </div>

                <div class="flex-fill d-flex justify-content-end">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="beautify" [(ngModel)]="beautify" (change)="convert()">
                        <label class="form-check-label" for="beautify">Beautify</label>
                    </div>
                </div>
            </div>
            <div class="code-border" [@valueChangeAnim]="status">
                <code-area innerStyle="min-height:500px;" [(code)]="toCode" [language]="toLang" readonly="true" />
            </div>
            <br />
        </div>
    </div>

    <div class="row">
        <div class="col-12 d-flex justify-content-center">
            <button class="btn btn-success" (click)="convert()">Convert <i class="bi bi-caret-right"></i></button>
        </div>
    </div>

    <br />

    <div class="row">
        <div class="col-12">
            <p><strong>JSON, XML, YAML, and TOML</strong> are known as <strong>data serialization formats</strong>. They
                are used to structure, store, and exchange data between systems or components. These formats allow data
                to be saved in a consistent, machine-readable form that can also be parsed and understood by humans to
                some extent. Each has unique characteristics: <strong>JSON</strong> (JavaScript Object Notation) is
                widely used in web APIs and JavaScript applications; <strong>XML</strong> (eXtensible Markup Language)
                is common in configurations, document storage, and enterprise software; <strong>YAML</strong> (YAML
                Ain&#39;t Markup Language) is favored for its readability and is often used in configuration files; and
                <strong>TOML</strong> (Tom&#39;s Obvious, Minimal Language) is designed for easy readability and is
                frequently used in project configurations.
            </p>
            <p>When data is structured or saved using these formats, it’s referred to as <strong>serialized
                    objects</strong> or simply <strong>serialized data</strong>. Serialization is the process of
                converting complex data structures, like objects in code, into a format that can be easily stored,
                transferred, and then deserialized (or reconstructed) back into the original format when needed.
                Serialized objects in JSON, XML, YAML, or TOML allow systems to communicate by sharing data in an
                interpretable and standardized way.</p>
        </div>
    </div>
</div>