In my client Angular project I have a component called report-viewer. Inside it I have a form, EmailSettings, which is called when a button from component is pressed.
The form code is the following:
EmailSettings.html
<h1 mat-dialog-title>Email Settings</h1>
<div mat-dialog-content>
<form id="formID" class="example-form">
<mat-form-field *ngIf="data.smtpHost === ''" 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 *ngIf="data.smtpPort === ''" 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 *ngIf="data.smtpUserName === ''" class="example-full-width" appearance="fill">
<mat-label>SMTP User Name</mat-label>
<textarea matInput placeholder="Ex: example@gmail.com"></textarea>
</mat-form-field> <br>
<mat-form-field *ngIf="data.smtpUserPassword === ''" 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 *ngIf="data.smtpFrom === ''" class="example-full-width" appearance="fill">
<mat-label>SMTP From</mat-label>
<textarea matInput placeholder="Ex: example@gmail.com"></textarea>
</mat-form-field> <br>
<mat-form-field *ngIf="data.smtpDisplayName === ''" class="example-full-width" appearance="fill">
<mat-label>SMTP Display Name</mat-label>
<textarea matInput placeholder="Ex: Jhon"></textarea>
</mat-form-field> <br>
<button mat-button (click)="saveXML()">Save</button>
<!-- <mat-form-field class="example-full-width" appearance="fill">
<button mat-button (click)="saveXML()">Save</button>
</mat-form-field> -->
</form>
</div>
EmailSettings.ts
import { Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectorRef, Inject } from '@angular/core';
import * as FileSaver from 'file-saver';
import { MatInputModule } from '@angular/material/input';
@Component({
selector: 'app-EmailSettings',
encapsulation: ViewEncapsulation.None,
templateUrl: './EmailSettings.html',
})
export class EmailSettings{
appIdOpts: any = [];
saveXML(){
console.log("TestXML");
let blob = new Blob([document.getElementById('formID').innerHTML], {type: "text/xml"});
FileSaver.saveAs(blob, "blobExport.xml");
}
}
When I press on form's Save button I get the error ERROR TypeError: _co.saveXML is not a function. How could I solve this error?
What I have tried:
Please see the above code. If necessary, I'll provide other parts of my code.