Angular2 compose mail module
Here is an example of how to create a mail compose module in Angular 2:
Step 1: Create a new Angular 2 module
Create a new file called mail-compose.module.ts
and add the following code:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MailComposeComponent } from './mail-compose.component';
@NgModule({
imports: [
CommonModule
],
declarations: [MailComposeComponent],
exports: [MailComposeComponent]
})
export class MailComposeModule { }
This module imports the CommonModule
and declares the MailComposeComponent
.
Step 2: Create the mail compose component
Create a new file called mail-compose.component.ts
and add the following code:
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-mail-compose',
template: `
<form [formGroup]="mailForm">
<label>From:</label>
<input type="text" formControlName="from">
<br>
<label>To:</label>
<input type="text" formControlName="to">
<br>
<label>Subject:</label>
<input type="text" formControlName="subject">
<br>
<label>Body:</label>
<textarea formControlName="body"></textarea>
<br>
<button type="submit">Send</button>
</form>
`,
})
export class MailComposeComponent {
mailForm = new FormGroup({
from: new FormControl('', Validators.required),
to: new FormControl('', Validators.required),
subject: new FormControl('', Validators.required),
body: new FormControl('', Validators.required)
});
onSubmit() {
console.log(this.mailForm.value);
}
}
This component uses the FormGroup
and FormControl
classes from Angular's forms module to create a form with input fields for the from, to, subject, and body of the email. The onSubmit
method is called when the form is submitted.
Step 3: Add the mail compose module to the app module
Open the app.module.ts
file and add the following code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MailComposeModule } from './mail-compose.module';
@NgModule({
imports: [
BrowserModule,
MailComposeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
This adds the MailComposeModule
to the app module.
Step 4: Use the mail compose component in a route
Create a new file called app-routing.module.ts
and add the following code:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MailComposeComponent } from './mail-compose.component';
const routes: Routes = [
{ path: 'compose', component: MailComposeComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
This defines a route for the compose
path that maps to the MailComposeComponent
.
Step 5: Add the route to the app module
Open the app.module.ts
file and add the following code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MailComposeModule } from './mail-compose.module';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
imports: [
BrowserModule,
MailComposeModule,
AppRoutingModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
This adds the AppRoutingModule
to the app module.
That's it! You can now navigate to the /compose
route and use the mail compose component to compose a new email.