Angular inject html template as string

Question

I'm looking to send an email as a string to an API via a service using Angular 6.

I would like to have a separate HTML file that has the code for this email template. I would then like to pass in this HTML template to the service and then post it to the API. (Please note - I do not want to build the email template as a string. i want to build it in HTML and then convert it to string).

So say i have the following files:

email-template.html - holds the html email template code
email.service.ts - posts the email template code as string

How would I implement this?

Here is my service:

constructor(private httpClient: HttpClient) { }

  send(recipient, email) { <=== need that 'email' perameter to be the email template.html as string

    const object: Email = {
      FromAddress: environment.noreplyEmailAddress,
      ToAddress: recipient,
      MessageBodyText: null,
      MessageBodyHtml: email.template,
      Subject: email.subject
    };

    return this.httpClient.post(`${this.url}/api/storeemail`, object, httpOptions);
  }

are you aware that by generating the mail on client side you are exposing an endpoint that anybody could use to send a random string as a mail? — Guerric P
– Guerric P, Commented Jan 21, 2019 at 12:47
yes, the api will have secuity around it to ensure only authorised parties can post to it - thanks for pointing that out though — DBoi
– DBoi, Commented Jan 21, 2019 at 12:50

Bunyamin Coskuner · Accepted Answer · 2019-01-21 10:45:12Z

1

You can simply import it within your component. Here is a working solution When you click on Click me button, it logs a html content into the console.

This is how you do it. First create a template in a file called email-template.html and put it somewhere (I put it in the same folder) and load it as follows.

import returns a Promise. You can do whatever you want within then

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  send() {
    import('./email-template.html').then(res => {
      console.log(res.default);
    });
  }
}

answered Jan 21, 2019 at 10:45

Bunyamin Coskuner

8,8892 gold badges31 silver badges50 bronze badges

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

9 Comments

DBoi Over a year ago

thanks, getting the error 'Dynamic import cannot be used when targeting ECMAScript 2015 modules.'

DBoi Over a year ago

I changed my tsconfig.json file to "module": "commonjs" and this fixed that issue but now i'm getting : 'Cannot find module '../email-template.html'

Bunyamin Coskuner Over a year ago

Make sure that the relative path is correct. It seems that you put your template one level above or you are trying to access that level

DBoi Over a year ago

It's still erroring with cannot find module. Do i have to state that it is a static html file? i can see its working in your working example but the error is occuring in my project. I've tried toString() but that doesnt work

Bunyamin Coskuner Over a year ago

Do you get this errors after you build the application or before? @DBoi

|

Collectives™ on Stack Overflow

Angular inject html template as string

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related