Home

Awesome

<p align="center"> <img alt="angular-material-extensions's logo" height="256px" width="256px" style="text-align: center;" src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-mailto@master/assets/angular-material-extensions-logo.svg"> </p>

ngx-mailto - Angular library simplifying generation of mailto links with Typescript

npm version npm demo docs: typedoc Join the chat at https://gitter.im/angular-material-extensions/Lobby license

from

<p align="center"> <img alt="ngx-mailto demonstration" style="text-align: center;" src="https://raw.githubusercontent.com/anthonynahas/ngx-mailto/HEAD/assets/ex1.png"> </p>

to -->

<p align="center"> <img alt="ngx-mailto demonstration" style="text-align: center;" src="https://raw.githubusercontent.com/anthonynahas/ngx-mailto/HEAD/assets/ex2.png"> </p>

Built by and for developers :heart:

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If you like this project, support angular-material-extensions by starring :star: and sharing it :loudspeaker:

Table of Contents

<a name="demo"/>

Demo

View all the directives and components in action at https://anthonynahas.github.io/ngx-mailto


<a name="dependencies"/>

Dependencies


<a name="installation"/>

Installation

1. Install via ng add. (Recommended)

Now add the library via the angular schematics

ng add ngx-mailto

2. Install via npm. (Alternative)

Now install ngx-mailto via:

npm install --save ngx-mailto

Import the library

If you installed the library via angular schematics, you can skip this step

import { NgxMailtoModule } from 'ngx-mailto'; 

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxMailtoModule, ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application like for lazy loading import NgxMailtoModule into your feature module:

<a name="api"/>

API

 interface Mailto {
  receiver?: string | string[];
  subject?: string;
  cc?: string | string[];
  bcc?: string | string[];
  body?: string;
}
<a name="usage"/>

Usage

via service NgxMailtoService

<button class="try-me" mat-raised-button color="primary" (click)="open()">Try Me!</button>

import { Mailto, NgxMailtoService } from 'ngx-mailto';

 emails: string[] = ['your_email@domain.de'];
  cc: string[] = [];
  bcc: string[] = [];
  subject!: string;
  body!: string;

  mailto: Mailto = {
    receiver: this.emails,
    cc: this.cc,
    bcc: this.bcc,
    subject: undefined,
    body: undefined
  };

 constructor(private mailtoService: NgxMailtoService) {
  }


open(): void {
    this.mailtoService.open(this.mailto);
  }

via pipe mailto

<a class="try-me" mat-raised-button color="accent" [href]="this.mailto | mailto">Try me!</a>
<a name="run-demo-app-locally"/>

Run Demo App Locally

Build the library

$ npm run build:lib

Serve the demo app

$ npm start

Other Angular Libraries


<a name="support"/>

Support

Built by and for developers :heart: we will help you :punch:


Who is using ngx-mailto? Awesome apps?

  1. Nahaus.de

Are you missing your project or you app? PR me to publish it on the README


jetbrains logo

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm


<a name="license"/>

License

Copyright (c) 2022 Anthony Nahas. Licensed under the MIT License (MIT) <p align="center"> <img alt="angular-material-extensions's logo" height="92px" width="92px" style="text-align: center;" src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-mailto@master/assets/badge_made-in-germany.svg"> </p>