Cordova Email Composer Plugin using Angular HTML not rendering
I just started messing with the Cordova Email Composer Plugin for my Ionic app and I noticed the plugin doesn't look like it supports Angular HTML code?. I was wondering if there may be an alternative for this issue or, perhaps I'm doing something wrong?
Page.ts
import Component from '@angular/core';
import IonicPage, NavController, NavParams, ViewController from 'ionic-angular';
import Storage from '@ionic/storage';
import EmailComposer from '@ionic-native/email-composer';
import ReapService from '../../services/reap-service';
@IonicPage()
@Component(
selector: 'page-offline-data',
templateUrl: 'offline-data.html',
)
export class OfflineDataPage
private offlineData:any =;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public storage: Storage,
public viewCtrl: ViewController,
private emailComposer: EmailComposer,
public reap: ReapService)
ionViewDidLoad()
this.storage.get('offlineSubmission').then((data)=>
this.offlineData=data;
console.log(data);
);
dismiss()
this.viewCtrl.dismiss();
sendEmail()
this.emailComposer.isAvailable().then((available: boolean) =>
if(available)
//Now we know we can send
,(err) =>
this.reap.presentToast('Error Emailing Data');
);
let email =
to: 'email@email.com',
cc: 'email@email.com',
//bcc: ['john@doe.com', 'jane@doe.com'],
attachments: [
//'file://img/logo.png',
//'res://icon.png',
//'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
//'file://README.pdf'
],
subject: 'Test',
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
<ion-card-content *ngIf="data?.Type=='Project'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Project Name - data?.Info[0].project.projectName</p>
<p>Location - data?.Info[0].project.Location.Location</p>
<p>Company Man - data?.Info[0].project.companyMan</p>
<p>AFE - data?.Info[0].project.orderNumber</p>
</ion-card-content>
<ion-card-content *ngIf="data?.Type=='WO'">
<h1>i+1</h1>
<h2 class="bold">Form - Work Order</h2>
<p>Project - data?.Info[0].wo[0].project.Name</p>
<p>Location - data?.Info[0].wo[0].Location.Location</p>
<p>Company Man - data?.Info[0].wo[0].companyMan</p>
<p>Current Date - data?.Info[0].wo[0].currentDate</p>
<p>AFE - data?.Info[0].wo[0].workOrder</p>
<p>Foreman - data?.Info[0].wo[0].foreman</p>
<p>Start Time - data?.Info[0].wo[0].startTime</p>
<p>End Time - data?.Info[0].wo[0].endTime</p>
<p>Representative - data?.Info[0].wo[0].representative</p>
<p>Job Description - data?.Info[0].wo[0].description</p>
<br>
<h2 class="bold">Sub Form - Equipment</h2>
<br>
<div *ngFor="let subData of data.Info[4].Equipment">
<p>Name - subData?.Name</p>
<p>Starting Odometer - subData?.Odometer</p>
<p>Ending Odometer - subData?.endingOdometer</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Labor</h2>
<br>
<div *ngFor="let subData of data.Info[5].Labor">
<p>Empoloyee - subData?.FullName</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Extra Labor</h2>
<br>
<div *ngFor="let subData of data.Info[9].extraLabor">
<p>Name - subData?.Name</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Misc.</h2>
<br>
<div *ngFor="let subData of data.Info[6].Misc">
<p>Description - subData?.description</p>
<p>Quantity - subData?.quantity</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Job Description</h2>
<br>
<div *ngFor="let subData of data.Info[7].JobDescription">
<p>Job Description - subData?.jobDescription.ItemDescription</p>
<p>Quantity - subData?.quantity</p>
<p>Hours/Days/Cost - subData?.each</p>
<br>
</div>
</ion-card-content>
</ion-card>
`,
isHtml: true
;
// Send a text message using default options
this.emailComposer.open(email);
Everything works fine on the plugin, the only thing is the html code looks like this,
Any recommendations with getting this to work would be appreciated.
javascript angular cordova ionic-framework cordova-plugins
add a comment |
I just started messing with the Cordova Email Composer Plugin for my Ionic app and I noticed the plugin doesn't look like it supports Angular HTML code?. I was wondering if there may be an alternative for this issue or, perhaps I'm doing something wrong?
Page.ts
import Component from '@angular/core';
import IonicPage, NavController, NavParams, ViewController from 'ionic-angular';
import Storage from '@ionic/storage';
import EmailComposer from '@ionic-native/email-composer';
import ReapService from '../../services/reap-service';
@IonicPage()
@Component(
selector: 'page-offline-data',
templateUrl: 'offline-data.html',
)
export class OfflineDataPage
private offlineData:any =;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public storage: Storage,
public viewCtrl: ViewController,
private emailComposer: EmailComposer,
public reap: ReapService)
ionViewDidLoad()
this.storage.get('offlineSubmission').then((data)=>
this.offlineData=data;
console.log(data);
);
dismiss()
this.viewCtrl.dismiss();
sendEmail()
this.emailComposer.isAvailable().then((available: boolean) =>
if(available)
//Now we know we can send
,(err) =>
this.reap.presentToast('Error Emailing Data');
);
let email =
to: 'email@email.com',
cc: 'email@email.com',
//bcc: ['john@doe.com', 'jane@doe.com'],
attachments: [
//'file://img/logo.png',
//'res://icon.png',
//'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
//'file://README.pdf'
],
subject: 'Test',
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
<ion-card-content *ngIf="data?.Type=='Project'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Project Name - data?.Info[0].project.projectName</p>
<p>Location - data?.Info[0].project.Location.Location</p>
<p>Company Man - data?.Info[0].project.companyMan</p>
<p>AFE - data?.Info[0].project.orderNumber</p>
</ion-card-content>
<ion-card-content *ngIf="data?.Type=='WO'">
<h1>i+1</h1>
<h2 class="bold">Form - Work Order</h2>
<p>Project - data?.Info[0].wo[0].project.Name</p>
<p>Location - data?.Info[0].wo[0].Location.Location</p>
<p>Company Man - data?.Info[0].wo[0].companyMan</p>
<p>Current Date - data?.Info[0].wo[0].currentDate</p>
<p>AFE - data?.Info[0].wo[0].workOrder</p>
<p>Foreman - data?.Info[0].wo[0].foreman</p>
<p>Start Time - data?.Info[0].wo[0].startTime</p>
<p>End Time - data?.Info[0].wo[0].endTime</p>
<p>Representative - data?.Info[0].wo[0].representative</p>
<p>Job Description - data?.Info[0].wo[0].description</p>
<br>
<h2 class="bold">Sub Form - Equipment</h2>
<br>
<div *ngFor="let subData of data.Info[4].Equipment">
<p>Name - subData?.Name</p>
<p>Starting Odometer - subData?.Odometer</p>
<p>Ending Odometer - subData?.endingOdometer</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Labor</h2>
<br>
<div *ngFor="let subData of data.Info[5].Labor">
<p>Empoloyee - subData?.FullName</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Extra Labor</h2>
<br>
<div *ngFor="let subData of data.Info[9].extraLabor">
<p>Name - subData?.Name</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Misc.</h2>
<br>
<div *ngFor="let subData of data.Info[6].Misc">
<p>Description - subData?.description</p>
<p>Quantity - subData?.quantity</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Job Description</h2>
<br>
<div *ngFor="let subData of data.Info[7].JobDescription">
<p>Job Description - subData?.jobDescription.ItemDescription</p>
<p>Quantity - subData?.quantity</p>
<p>Hours/Days/Cost - subData?.each</p>
<br>
</div>
</ion-card-content>
</ion-card>
`,
isHtml: true
;
// Send a text message using default options
this.emailComposer.open(email);
Everything works fine on the plugin, the only thing is the html code looks like this,
Any recommendations with getting this to work would be appreciated.
javascript angular cordova ionic-framework cordova-plugins
add a comment |
I just started messing with the Cordova Email Composer Plugin for my Ionic app and I noticed the plugin doesn't look like it supports Angular HTML code?. I was wondering if there may be an alternative for this issue or, perhaps I'm doing something wrong?
Page.ts
import Component from '@angular/core';
import IonicPage, NavController, NavParams, ViewController from 'ionic-angular';
import Storage from '@ionic/storage';
import EmailComposer from '@ionic-native/email-composer';
import ReapService from '../../services/reap-service';
@IonicPage()
@Component(
selector: 'page-offline-data',
templateUrl: 'offline-data.html',
)
export class OfflineDataPage
private offlineData:any =;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public storage: Storage,
public viewCtrl: ViewController,
private emailComposer: EmailComposer,
public reap: ReapService)
ionViewDidLoad()
this.storage.get('offlineSubmission').then((data)=>
this.offlineData=data;
console.log(data);
);
dismiss()
this.viewCtrl.dismiss();
sendEmail()
this.emailComposer.isAvailable().then((available: boolean) =>
if(available)
//Now we know we can send
,(err) =>
this.reap.presentToast('Error Emailing Data');
);
let email =
to: 'email@email.com',
cc: 'email@email.com',
//bcc: ['john@doe.com', 'jane@doe.com'],
attachments: [
//'file://img/logo.png',
//'res://icon.png',
//'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
//'file://README.pdf'
],
subject: 'Test',
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
<ion-card-content *ngIf="data?.Type=='Project'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Project Name - data?.Info[0].project.projectName</p>
<p>Location - data?.Info[0].project.Location.Location</p>
<p>Company Man - data?.Info[0].project.companyMan</p>
<p>AFE - data?.Info[0].project.orderNumber</p>
</ion-card-content>
<ion-card-content *ngIf="data?.Type=='WO'">
<h1>i+1</h1>
<h2 class="bold">Form - Work Order</h2>
<p>Project - data?.Info[0].wo[0].project.Name</p>
<p>Location - data?.Info[0].wo[0].Location.Location</p>
<p>Company Man - data?.Info[0].wo[0].companyMan</p>
<p>Current Date - data?.Info[0].wo[0].currentDate</p>
<p>AFE - data?.Info[0].wo[0].workOrder</p>
<p>Foreman - data?.Info[0].wo[0].foreman</p>
<p>Start Time - data?.Info[0].wo[0].startTime</p>
<p>End Time - data?.Info[0].wo[0].endTime</p>
<p>Representative - data?.Info[0].wo[0].representative</p>
<p>Job Description - data?.Info[0].wo[0].description</p>
<br>
<h2 class="bold">Sub Form - Equipment</h2>
<br>
<div *ngFor="let subData of data.Info[4].Equipment">
<p>Name - subData?.Name</p>
<p>Starting Odometer - subData?.Odometer</p>
<p>Ending Odometer - subData?.endingOdometer</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Labor</h2>
<br>
<div *ngFor="let subData of data.Info[5].Labor">
<p>Empoloyee - subData?.FullName</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Extra Labor</h2>
<br>
<div *ngFor="let subData of data.Info[9].extraLabor">
<p>Name - subData?.Name</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Misc.</h2>
<br>
<div *ngFor="let subData of data.Info[6].Misc">
<p>Description - subData?.description</p>
<p>Quantity - subData?.quantity</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Job Description</h2>
<br>
<div *ngFor="let subData of data.Info[7].JobDescription">
<p>Job Description - subData?.jobDescription.ItemDescription</p>
<p>Quantity - subData?.quantity</p>
<p>Hours/Days/Cost - subData?.each</p>
<br>
</div>
</ion-card-content>
</ion-card>
`,
isHtml: true
;
// Send a text message using default options
this.emailComposer.open(email);
Everything works fine on the plugin, the only thing is the html code looks like this,
Any recommendations with getting this to work would be appreciated.
javascript angular cordova ionic-framework cordova-plugins
I just started messing with the Cordova Email Composer Plugin for my Ionic app and I noticed the plugin doesn't look like it supports Angular HTML code?. I was wondering if there may be an alternative for this issue or, perhaps I'm doing something wrong?
Page.ts
import Component from '@angular/core';
import IonicPage, NavController, NavParams, ViewController from 'ionic-angular';
import Storage from '@ionic/storage';
import EmailComposer from '@ionic-native/email-composer';
import ReapService from '../../services/reap-service';
@IonicPage()
@Component(
selector: 'page-offline-data',
templateUrl: 'offline-data.html',
)
export class OfflineDataPage
private offlineData:any =;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public storage: Storage,
public viewCtrl: ViewController,
private emailComposer: EmailComposer,
public reap: ReapService)
ionViewDidLoad()
this.storage.get('offlineSubmission').then((data)=>
this.offlineData=data;
console.log(data);
);
dismiss()
this.viewCtrl.dismiss();
sendEmail()
this.emailComposer.isAvailable().then((available: boolean) =>
if(available)
//Now we know we can send
,(err) =>
this.reap.presentToast('Error Emailing Data');
);
let email =
to: 'email@email.com',
cc: 'email@email.com',
//bcc: ['john@doe.com', 'jane@doe.com'],
attachments: [
//'file://img/logo.png',
//'res://icon.png',
//'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
//'file://README.pdf'
],
subject: 'Test',
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
<ion-card-content *ngIf="data?.Type=='Project'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Project Name - data?.Info[0].project.projectName</p>
<p>Location - data?.Info[0].project.Location.Location</p>
<p>Company Man - data?.Info[0].project.companyMan</p>
<p>AFE - data?.Info[0].project.orderNumber</p>
</ion-card-content>
<ion-card-content *ngIf="data?.Type=='WO'">
<h1>i+1</h1>
<h2 class="bold">Form - Work Order</h2>
<p>Project - data?.Info[0].wo[0].project.Name</p>
<p>Location - data?.Info[0].wo[0].Location.Location</p>
<p>Company Man - data?.Info[0].wo[0].companyMan</p>
<p>Current Date - data?.Info[0].wo[0].currentDate</p>
<p>AFE - data?.Info[0].wo[0].workOrder</p>
<p>Foreman - data?.Info[0].wo[0].foreman</p>
<p>Start Time - data?.Info[0].wo[0].startTime</p>
<p>End Time - data?.Info[0].wo[0].endTime</p>
<p>Representative - data?.Info[0].wo[0].representative</p>
<p>Job Description - data?.Info[0].wo[0].description</p>
<br>
<h2 class="bold">Sub Form - Equipment</h2>
<br>
<div *ngFor="let subData of data.Info[4].Equipment">
<p>Name - subData?.Name</p>
<p>Starting Odometer - subData?.Odometer</p>
<p>Ending Odometer - subData?.endingOdometer</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Labor</h2>
<br>
<div *ngFor="let subData of data.Info[5].Labor">
<p>Empoloyee - subData?.FullName</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Extra Labor</h2>
<br>
<div *ngFor="let subData of data.Info[9].extraLabor">
<p>Name - subData?.Name</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Misc.</h2>
<br>
<div *ngFor="let subData of data.Info[6].Misc">
<p>Description - subData?.description</p>
<p>Quantity - subData?.quantity</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Job Description</h2>
<br>
<div *ngFor="let subData of data.Info[7].JobDescription">
<p>Job Description - subData?.jobDescription.ItemDescription</p>
<p>Quantity - subData?.quantity</p>
<p>Hours/Days/Cost - subData?.each</p>
<br>
</div>
</ion-card-content>
</ion-card>
`,
isHtml: true
;
// Send a text message using default options
this.emailComposer.open(email);
Everything works fine on the plugin, the only thing is the html code looks like this,
Any recommendations with getting this to work would be appreciated.
import Component from '@angular/core';
import IonicPage, NavController, NavParams, ViewController from 'ionic-angular';
import Storage from '@ionic/storage';
import EmailComposer from '@ionic-native/email-composer';
import ReapService from '../../services/reap-service';
@IonicPage()
@Component(
selector: 'page-offline-data',
templateUrl: 'offline-data.html',
)
export class OfflineDataPage
private offlineData:any =;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public storage: Storage,
public viewCtrl: ViewController,
private emailComposer: EmailComposer,
public reap: ReapService)
ionViewDidLoad()
this.storage.get('offlineSubmission').then((data)=>
this.offlineData=data;
console.log(data);
);
dismiss()
this.viewCtrl.dismiss();
sendEmail()
this.emailComposer.isAvailable().then((available: boolean) =>
if(available)
//Now we know we can send
,(err) =>
this.reap.presentToast('Error Emailing Data');
);
let email =
to: 'email@email.com',
cc: 'email@email.com',
//bcc: ['john@doe.com', 'jane@doe.com'],
attachments: [
//'file://img/logo.png',
//'res://icon.png',
//'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
//'file://README.pdf'
],
subject: 'Test',
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
<ion-card-content *ngIf="data?.Type=='Project'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Project Name - data?.Info[0].project.projectName</p>
<p>Location - data?.Info[0].project.Location.Location</p>
<p>Company Man - data?.Info[0].project.companyMan</p>
<p>AFE - data?.Info[0].project.orderNumber</p>
</ion-card-content>
<ion-card-content *ngIf="data?.Type=='WO'">
<h1>i+1</h1>
<h2 class="bold">Form - Work Order</h2>
<p>Project - data?.Info[0].wo[0].project.Name</p>
<p>Location - data?.Info[0].wo[0].Location.Location</p>
<p>Company Man - data?.Info[0].wo[0].companyMan</p>
<p>Current Date - data?.Info[0].wo[0].currentDate</p>
<p>AFE - data?.Info[0].wo[0].workOrder</p>
<p>Foreman - data?.Info[0].wo[0].foreman</p>
<p>Start Time - data?.Info[0].wo[0].startTime</p>
<p>End Time - data?.Info[0].wo[0].endTime</p>
<p>Representative - data?.Info[0].wo[0].representative</p>
<p>Job Description - data?.Info[0].wo[0].description</p>
<br>
<h2 class="bold">Sub Form - Equipment</h2>
<br>
<div *ngFor="let subData of data.Info[4].Equipment">
<p>Name - subData?.Name</p>
<p>Starting Odometer - subData?.Odometer</p>
<p>Ending Odometer - subData?.endingOdometer</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Labor</h2>
<br>
<div *ngFor="let subData of data.Info[5].Labor">
<p>Empoloyee - subData?.FullName</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Extra Labor</h2>
<br>
<div *ngFor="let subData of data.Info[9].extraLabor">
<p>Name - subData?.Name</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Misc.</h2>
<br>
<div *ngFor="let subData of data.Info[6].Misc">
<p>Description - subData?.description</p>
<p>Quantity - subData?.quantity</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Job Description</h2>
<br>
<div *ngFor="let subData of data.Info[7].JobDescription">
<p>Job Description - subData?.jobDescription.ItemDescription</p>
<p>Quantity - subData?.quantity</p>
<p>Hours/Days/Cost - subData?.each</p>
<br>
</div>
</ion-card-content>
</ion-card>
`,
isHtml: true
;
// Send a text message using default options
this.emailComposer.open(email);
import Component from '@angular/core';
import IonicPage, NavController, NavParams, ViewController from 'ionic-angular';
import Storage from '@ionic/storage';
import EmailComposer from '@ionic-native/email-composer';
import ReapService from '../../services/reap-service';
@IonicPage()
@Component(
selector: 'page-offline-data',
templateUrl: 'offline-data.html',
)
export class OfflineDataPage
private offlineData:any =;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public storage: Storage,
public viewCtrl: ViewController,
private emailComposer: EmailComposer,
public reap: ReapService)
ionViewDidLoad()
this.storage.get('offlineSubmission').then((data)=>
this.offlineData=data;
console.log(data);
);
dismiss()
this.viewCtrl.dismiss();
sendEmail()
this.emailComposer.isAvailable().then((available: boolean) =>
if(available)
//Now we know we can send
,(err) =>
this.reap.presentToast('Error Emailing Data');
);
let email =
to: 'email@email.com',
cc: 'email@email.com',
//bcc: ['john@doe.com', 'jane@doe.com'],
attachments: [
//'file://img/logo.png',
//'res://icon.png',
//'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
//'file://README.pdf'
],
subject: 'Test',
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
<ion-card-content *ngIf="data?.Type=='Project'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Project Name - data?.Info[0].project.projectName</p>
<p>Location - data?.Info[0].project.Location.Location</p>
<p>Company Man - data?.Info[0].project.companyMan</p>
<p>AFE - data?.Info[0].project.orderNumber</p>
</ion-card-content>
<ion-card-content *ngIf="data?.Type=='WO'">
<h1>i+1</h1>
<h2 class="bold">Form - Work Order</h2>
<p>Project - data?.Info[0].wo[0].project.Name</p>
<p>Location - data?.Info[0].wo[0].Location.Location</p>
<p>Company Man - data?.Info[0].wo[0].companyMan</p>
<p>Current Date - data?.Info[0].wo[0].currentDate</p>
<p>AFE - data?.Info[0].wo[0].workOrder</p>
<p>Foreman - data?.Info[0].wo[0].foreman</p>
<p>Start Time - data?.Info[0].wo[0].startTime</p>
<p>End Time - data?.Info[0].wo[0].endTime</p>
<p>Representative - data?.Info[0].wo[0].representative</p>
<p>Job Description - data?.Info[0].wo[0].description</p>
<br>
<h2 class="bold">Sub Form - Equipment</h2>
<br>
<div *ngFor="let subData of data.Info[4].Equipment">
<p>Name - subData?.Name</p>
<p>Starting Odometer - subData?.Odometer</p>
<p>Ending Odometer - subData?.endingOdometer</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Labor</h2>
<br>
<div *ngFor="let subData of data.Info[5].Labor">
<p>Empoloyee - subData?.FullName</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Extra Labor</h2>
<br>
<div *ngFor="let subData of data.Info[9].extraLabor">
<p>Name - subData?.Name</p>
<p>Hours - subData?.Hours</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Misc.</h2>
<br>
<div *ngFor="let subData of data.Info[6].Misc">
<p>Description - subData?.description</p>
<p>Quantity - subData?.quantity</p>
<br>
</div>
<br>
<h2 class="bold">Sub Form - Job Description</h2>
<br>
<div *ngFor="let subData of data.Info[7].JobDescription">
<p>Job Description - subData?.jobDescription.ItemDescription</p>
<p>Quantity - subData?.quantity</p>
<p>Hours/Days/Cost - subData?.each</p>
<br>
</div>
</ion-card-content>
</ion-card>
`,
isHtml: true
;
// Send a text message using default options
this.emailComposer.open(email);
javascript angular cordova ionic-framework cordova-plugins
javascript angular cordova ionic-framework cordova-plugins
asked Nov 13 '18 at 15:00
Stephen RomeroStephen Romero
3451415
3451415
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
if you're going to put 'around text, make sure to close it as well before you inject variables'. Your Html is working, but because you don't close the ' right before the variables, it's being processed as a string.
Take the following part of your code as example:
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
right after the body tag, there is a '
that means that everything from there on is being treated as a string, so javascript is not going to process any javascript in that page, since it generated it itself.
better practise would be to inject the variables in the text while generating it, or using a template file with that html code in it.
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>'+ i+1 +'</h1>
<h2 class="bold">Form - '+ data?.Type +'</h2>
<p>Well ID - '+ data?.Info[0].ID +'</p>
<p>Lat - '+ data?.Info[1]['Lat'] +'</p>
<p>Lon - '+ data?.Info[2].Lon +'</p>
</div>
Can you elaborate on your answer? Perhaps show me an example?
– Stephen Romero
Nov 13 '18 at 15:18
sorry for the brief reaction, i'm actually at work right now. i hope this edit helps.
– Glenn van Acker
Nov 13 '18 at 15:24
Hmmm I tried and it is still printing the ' as a string as well. Is it possible to just send the array in JSON format? I don't necessarily have to print all of the values like I have. I just need to be able to extract the data from the email.
– Stephen Romero
Nov 13 '18 at 16:10
Well yes, that's how it's normally done in angular. You would just provide a template, and create an object in your scope. Then you can read out the variables in the template. Are you running an MVC ASP.Net application? I would just post the data to the API, and then let that generate and send the email.
– Glenn van Acker
Nov 14 '18 at 12:15
I'm Using Ionic 3 Framework. This particular feature I'm implementing is if for some reason the API call fails, the user can store the form submission and I'm determining ways to be able to export the data. The app is going to be used where there isn't always a good amount of service.
– Stephen Romero
Nov 14 '18 at 16:33
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283820%2fcordova-email-composer-plugin-using-angular-html-not-rendering%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
if you're going to put 'around text, make sure to close it as well before you inject variables'. Your Html is working, but because you don't close the ' right before the variables, it's being processed as a string.
Take the following part of your code as example:
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
right after the body tag, there is a '
that means that everything from there on is being treated as a string, so javascript is not going to process any javascript in that page, since it generated it itself.
better practise would be to inject the variables in the text while generating it, or using a template file with that html code in it.
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>'+ i+1 +'</h1>
<h2 class="bold">Form - '+ data?.Type +'</h2>
<p>Well ID - '+ data?.Info[0].ID +'</p>
<p>Lat - '+ data?.Info[1]['Lat'] +'</p>
<p>Lon - '+ data?.Info[2].Lon +'</p>
</div>
Can you elaborate on your answer? Perhaps show me an example?
– Stephen Romero
Nov 13 '18 at 15:18
sorry for the brief reaction, i'm actually at work right now. i hope this edit helps.
– Glenn van Acker
Nov 13 '18 at 15:24
Hmmm I tried and it is still printing the ' as a string as well. Is it possible to just send the array in JSON format? I don't necessarily have to print all of the values like I have. I just need to be able to extract the data from the email.
– Stephen Romero
Nov 13 '18 at 16:10
Well yes, that's how it's normally done in angular. You would just provide a template, and create an object in your scope. Then you can read out the variables in the template. Are you running an MVC ASP.Net application? I would just post the data to the API, and then let that generate and send the email.
– Glenn van Acker
Nov 14 '18 at 12:15
I'm Using Ionic 3 Framework. This particular feature I'm implementing is if for some reason the API call fails, the user can store the form submission and I'm determining ways to be able to export the data. The app is going to be used where there isn't always a good amount of service.
– Stephen Romero
Nov 14 '18 at 16:33
add a comment |
if you're going to put 'around text, make sure to close it as well before you inject variables'. Your Html is working, but because you don't close the ' right before the variables, it's being processed as a string.
Take the following part of your code as example:
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
right after the body tag, there is a '
that means that everything from there on is being treated as a string, so javascript is not going to process any javascript in that page, since it generated it itself.
better practise would be to inject the variables in the text while generating it, or using a template file with that html code in it.
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>'+ i+1 +'</h1>
<h2 class="bold">Form - '+ data?.Type +'</h2>
<p>Well ID - '+ data?.Info[0].ID +'</p>
<p>Lat - '+ data?.Info[1]['Lat'] +'</p>
<p>Lon - '+ data?.Info[2].Lon +'</p>
</div>
Can you elaborate on your answer? Perhaps show me an example?
– Stephen Romero
Nov 13 '18 at 15:18
sorry for the brief reaction, i'm actually at work right now. i hope this edit helps.
– Glenn van Acker
Nov 13 '18 at 15:24
Hmmm I tried and it is still printing the ' as a string as well. Is it possible to just send the array in JSON format? I don't necessarily have to print all of the values like I have. I just need to be able to extract the data from the email.
– Stephen Romero
Nov 13 '18 at 16:10
Well yes, that's how it's normally done in angular. You would just provide a template, and create an object in your scope. Then you can read out the variables in the template. Are you running an MVC ASP.Net application? I would just post the data to the API, and then let that generate and send the email.
– Glenn van Acker
Nov 14 '18 at 12:15
I'm Using Ionic 3 Framework. This particular feature I'm implementing is if for some reason the API call fails, the user can store the form submission and I'm determining ways to be able to export the data. The app is going to be used where there isn't always a good amount of service.
– Stephen Romero
Nov 14 '18 at 16:33
add a comment |
if you're going to put 'around text, make sure to close it as well before you inject variables'. Your Html is working, but because you don't close the ' right before the variables, it's being processed as a string.
Take the following part of your code as example:
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
right after the body tag, there is a '
that means that everything from there on is being treated as a string, so javascript is not going to process any javascript in that page, since it generated it itself.
better practise would be to inject the variables in the text while generating it, or using a template file with that html code in it.
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>'+ i+1 +'</h1>
<h2 class="bold">Form - '+ data?.Type +'</h2>
<p>Well ID - '+ data?.Info[0].ID +'</p>
<p>Lat - '+ data?.Info[1]['Lat'] +'</p>
<p>Lon - '+ data?.Info[2].Lon +'</p>
</div>
if you're going to put 'around text, make sure to close it as well before you inject variables'. Your Html is working, but because you don't close the ' right before the variables, it's being processed as a string.
Take the following part of your code as example:
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>i+1</h1>
<h2 class="bold">Form - data?.Type</h2>
<p>Well ID - data?.Info[0].ID</p>
<p>Lat - data?.Info[1]['Lat']</p>
<p>Lon - data?.Info[2].Lon</p>
</div>
right after the body tag, there is a '
that means that everything from there on is being treated as a string, so javascript is not going to process any javascript in that page, since it generated it itself.
better practise would be to inject the variables in the text while generating it, or using a template file with that html code in it.
body: `
<div *ngFor="let data of offlineData;let i = index">
<div *ngIf="data?.Type=='GPS'">
<h1>'+ i+1 +'</h1>
<h2 class="bold">Form - '+ data?.Type +'</h2>
<p>Well ID - '+ data?.Info[0].ID +'</p>
<p>Lat - '+ data?.Info[1]['Lat'] +'</p>
<p>Lon - '+ data?.Info[2].Lon +'</p>
</div>
edited Nov 13 '18 at 15:23
answered Nov 13 '18 at 15:15
Glenn van AckerGlenn van Acker
115
115
Can you elaborate on your answer? Perhaps show me an example?
– Stephen Romero
Nov 13 '18 at 15:18
sorry for the brief reaction, i'm actually at work right now. i hope this edit helps.
– Glenn van Acker
Nov 13 '18 at 15:24
Hmmm I tried and it is still printing the ' as a string as well. Is it possible to just send the array in JSON format? I don't necessarily have to print all of the values like I have. I just need to be able to extract the data from the email.
– Stephen Romero
Nov 13 '18 at 16:10
Well yes, that's how it's normally done in angular. You would just provide a template, and create an object in your scope. Then you can read out the variables in the template. Are you running an MVC ASP.Net application? I would just post the data to the API, and then let that generate and send the email.
– Glenn van Acker
Nov 14 '18 at 12:15
I'm Using Ionic 3 Framework. This particular feature I'm implementing is if for some reason the API call fails, the user can store the form submission and I'm determining ways to be able to export the data. The app is going to be used where there isn't always a good amount of service.
– Stephen Romero
Nov 14 '18 at 16:33
add a comment |
Can you elaborate on your answer? Perhaps show me an example?
– Stephen Romero
Nov 13 '18 at 15:18
sorry for the brief reaction, i'm actually at work right now. i hope this edit helps.
– Glenn van Acker
Nov 13 '18 at 15:24
Hmmm I tried and it is still printing the ' as a string as well. Is it possible to just send the array in JSON format? I don't necessarily have to print all of the values like I have. I just need to be able to extract the data from the email.
– Stephen Romero
Nov 13 '18 at 16:10
Well yes, that's how it's normally done in angular. You would just provide a template, and create an object in your scope. Then you can read out the variables in the template. Are you running an MVC ASP.Net application? I would just post the data to the API, and then let that generate and send the email.
– Glenn van Acker
Nov 14 '18 at 12:15
I'm Using Ionic 3 Framework. This particular feature I'm implementing is if for some reason the API call fails, the user can store the form submission and I'm determining ways to be able to export the data. The app is going to be used where there isn't always a good amount of service.
– Stephen Romero
Nov 14 '18 at 16:33
Can you elaborate on your answer? Perhaps show me an example?
– Stephen Romero
Nov 13 '18 at 15:18
Can you elaborate on your answer? Perhaps show me an example?
– Stephen Romero
Nov 13 '18 at 15:18
sorry for the brief reaction, i'm actually at work right now. i hope this edit helps.
– Glenn van Acker
Nov 13 '18 at 15:24
sorry for the brief reaction, i'm actually at work right now. i hope this edit helps.
– Glenn van Acker
Nov 13 '18 at 15:24
Hmmm I tried and it is still printing the ' as a string as well. Is it possible to just send the array in JSON format? I don't necessarily have to print all of the values like I have. I just need to be able to extract the data from the email.
– Stephen Romero
Nov 13 '18 at 16:10
Hmmm I tried and it is still printing the ' as a string as well. Is it possible to just send the array in JSON format? I don't necessarily have to print all of the values like I have. I just need to be able to extract the data from the email.
– Stephen Romero
Nov 13 '18 at 16:10
Well yes, that's how it's normally done in angular. You would just provide a template, and create an object in your scope. Then you can read out the variables in the template. Are you running an MVC ASP.Net application? I would just post the data to the API, and then let that generate and send the email.
– Glenn van Acker
Nov 14 '18 at 12:15
Well yes, that's how it's normally done in angular. You would just provide a template, and create an object in your scope. Then you can read out the variables in the template. Are you running an MVC ASP.Net application? I would just post the data to the API, and then let that generate and send the email.
– Glenn van Acker
Nov 14 '18 at 12:15
I'm Using Ionic 3 Framework. This particular feature I'm implementing is if for some reason the API call fails, the user can store the form submission and I'm determining ways to be able to export the data. The app is going to be used where there isn't always a good amount of service.
– Stephen Romero
Nov 14 '18 at 16:33
I'm Using Ionic 3 Framework. This particular feature I'm implementing is if for some reason the API call fails, the user can store the form submission and I'm determining ways to be able to export the data. The app is going to be used where there isn't always a good amount of service.
– Stephen Romero
Nov 14 '18 at 16:33
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283820%2fcordova-email-composer-plugin-using-angular-html-not-rendering%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown