How to write in a XML file from an Angular project?

Question

I have an Angular client app with a form.

<form class="example-form">
        <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>SMTP Host</mat-label>
            <textarea matInput placeholder="Ex: smtp.gmail.com"></textarea>
        </mat-form-field> <br>
        <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>SMTP Port</mat-label>
            <textarea matInput placeholder="Ex: 587"></textarea>
        </mat-form-field> <br>
        <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>SMTP User Name</mat-label>
            <textarea matInput placeholder="Ex: [email protected]"></textarea>
        </mat-form-field> <br>
        <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>SMTP User Password</mat-label>
            <textarea matInput placeholder="Ex: password"></textarea>
        </mat-form-field> <br>
        <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>SMTP From</mat-label>
            <textarea matInput placeholder="Ex: [email protected]"></textarea>
        </mat-form-field> <br>
        <mat-form-field class="example-full-width" appearance="fill">
            <mat-label>SMTP Display Name</mat-label>
            <textarea matInput placeholder="Ex: Jhon"></textarea>
        </mat-form-field> <br>
        <mat-form-field class="example-full-width" appearance="fill">
            <button mat-button>Save</button>
        </mat-form-field>
    </form>

What I want to do is to save the content of each form's field in a XML file which will be read by other app. How could I accomplish this task? I have seen that file-saver could be something that might be helping me, but I'm not sure how.

I'm working with:

Angular CLI: 12.2.5

Node: 14.17.6

Package Manager: npm 6.14.15

Package Version

@angular-devkit/architect 0.1202.5 (cli-only)

@angular-devkit/core 12.2.5 (cli-only)

@angular-devkit/schematics 12.2.5 (cli-only)

@schematics/angular 12.2.5 (cli-only)

Davis Jahn · Accepted Answer · 2022-05-04 07:52:19Z

0

file-saver is the best approach (using Angular-CLI):

npm install file-saver --save
npm install @types/file-saver --save

Import FileSaver to your Component then:

import * as FileSaver from 'file-saver';

give your form an ID and then use it like this:

let blob = new Blob([document.getElementById('formID').innerHTML], {type: "text/xml"});

FileSaver.saveAs(blob, "blobExport.xml");

answered May 4, 2022 at 7:52

Davis Jahn

6076 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ionut Over a year ago

Thank you for the feedback, Davis! I have to clarify how to import FileSaver because on my component, called report, I have a button which calls the form. The form code shown above is written in the file EmailSettings.html which is located inside report component.

Davis Jahn Over a year ago

in which format do you get the form when called by your button?

Ionut Over a year ago

When I press the button, the form is shown in a popup. As you can see, the form has a SAVE button. When I click it, I want to write to XML file.

Ionut Over a year ago

Now I'm having the following problem, Davis. Please see: stackoverflow.com/questions/72360220/…

Collectives™ on Stack Overflow

How to write in a XML file from an Angular project?

Package Version

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

Package Version

1 Answer 1

4 Comments

Related