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.