- -
- - - - - - - - - - + +
+ + + + + + + + + + - {{ title }} app is running! + {{ title }} demo app is running! - - - + + + -
+
- -

Resources

-

Here are some links to help you get started:

+ +

Resources

+

Here are some links to help you get started:

-
- - +
+ + + + - Learn Angular + Github repository - + + + + - - + + + + - CLI Documentation + Library Documentation - - + + + + - - + + + + - Angular Blog + npm - - + + + + -
+
- -

Next Steps

-

What do you want to do next with your app?

+
- + +

Install

+

run the following command in your favorite terminal to install the library

-
-
- + +
+ 
ng add ngx-mailto
+
- New Component
-
- + - Angular Material -
+ +

Usage

-
- + mailto - Add PWA Support -
+

For more info, please read the official readme - see the links above GITHUB - DOCS - NPM

-
- + - Add Dependency -
+ +

Next Steps

+

What do you want to do next with your app? Here are some awesome suggested libraries for you!

-
- + - Run and Watch Tests -
+
+
+ + + -
- + ngx-auth-firebaseui +
- Build for Production -
-
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build --prod
-
- - -
- - - - - - - - - +
+ + + - - - - - - - - - - - + password-strength +
- - - - - - - - - - - - - - - - - - - - - +
+ + + - - - - - - - - - + google-maps-autocomplete +
- - - - - +
+ + + - - - - - - - - - - - - - - - -
- - - - - - +
+ + + + + links-preview +
+
+ + +
+ 
ng add ngx-auth-firebaseui
+ 
ng add @angular-material-extensions/password-strength
+ 
ng add @angular-material-extensions/google-maps-autocomplete
+ 
ng add @angular-material-extensions/pages
+ 
ng add @angular-material-extensions/links-preview
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
@@ -530,5 +619,4 @@

Next Steps

- - \ No newline at end of file + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index fed7a5b..9f55130 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,27 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { Mailto } from '../ngx-mailto/mailto'; +import { NgxMailtoService } from '../ngx-mailto/ngx-mailto.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent { +export class AppComponent implements OnInit { title = 'ngx-mailto-demo'; + + receiver1 = 'anthony.na@hotmail.de'; + receiver2 = 'testa@gmail.de'; + + + constructor(private mailtoService: NgxMailtoService) { + } + + ngOnInit(): void { + const mailto: Mailto = { + cc: [], + subject: 'Just only a test!' + }; + console.log(this.mailtoService.compose(mailto)); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index aee0fcc..985304b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,6 @@ -import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { NgxMailtoModule } from '../ngx-mailto/ngx-mailto.module'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -10,9 +11,11 @@ import { AppComponent } from './app.component'; ], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), - AppRoutingModule + AppRoutingModule, + NgxMailtoModule ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { +} diff --git a/src/ngx-mailto/mailto.ts b/src/ngx-mailto/mailto.ts new file mode 100644 index 0000000..e5d37aa --- /dev/null +++ b/src/ngx-mailto/mailto.ts @@ -0,0 +1,14 @@ +/** + * @author Anthony Nahas + * @since 25.11.2020 + * @version 1.0 + * + * All properties are optional + */ +export interface Mailto { + receiver?: string | string[]; + subject?: string; + cc?: string | string[]; + bcc?: string | string[]; + body?: string; +} diff --git a/src/ngx-mailto/ngx-mailto.module.ts b/src/ngx-mailto/ngx-mailto.module.ts new file mode 100644 index 0000000..d0d65b4 --- /dev/null +++ b/src/ngx-mailto/ngx-mailto.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + + + +@NgModule({ + declarations: [], + imports: [ + CommonModule + ] +}) +export class NgxMailtoModule { } diff --git a/src/ngx-mailto/ngx-mailto.service.spec.ts b/src/ngx-mailto/ngx-mailto.service.spec.ts new file mode 100644 index 0000000..0c56d98 --- /dev/null +++ b/src/ngx-mailto/ngx-mailto.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { NgxMailtoService } from './ngx-mailto.service'; + +describe('NgxMailtoService', () => { + let service: NgxMailtoService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(NgxMailtoService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/ngx-mailto/ngx-mailto.service.ts b/src/ngx-mailto/ngx-mailto.service.ts new file mode 100644 index 0000000..d0887c2 --- /dev/null +++ b/src/ngx-mailto/ngx-mailto.service.ts @@ -0,0 +1,61 @@ +import { isPlatformBrowser } from '@angular/common'; +import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; +import { Mailto } from './mailto'; + +@Injectable({ + providedIn: 'root' +}) +export class NgxMailtoService { + + // tslint:disable-next-line:ban-types + constructor(@Inject(PLATFORM_ID) private platformId: Object) { + } + + isClientSide(): boolean { + return isPlatformBrowser(this.platformId); + } + + compose(value: Mailto): string | void { + let link = 'mailto:'; + let properties = []; + if (this.isClientSide()) { + if (value.receiver) { + if (typeof value.receiver === 'string') { + link += value.receiver; + } else { + link += value.receiver.join(); + } + } + if (value.cc) { + if (typeof value.cc === 'string') { + // link += `?cc=${value.cc}`; + properties.push(`cc=${value.cc}`); + } else { + // link += `?cc=${value.cc.join()}`; + properties.push(`cc=${value.cc.join()}`); + } + } + if (value.bcc) { + if (typeof value.bcc === 'string') { + // link += `?bcc=${value.bcc}`; + properties.push(`bcc=${value.bcc}`); + } else { + // link += `?bcc=${value.bcc.join()}`; + properties.push(`bcc=${value.bcc.join()}`); + } + } + if (value.subject) { + // link += `?subject=${value.subject}`; + properties.push(`subject=${value.subject}`); + } + if (value.body) { + // link += `?body=${value.body}`; + properties.push(`body=${value.body}`); + } + if (properties.length > 0) { + link += `?${properties.join('&')}`; + } + return link; + } + } +}