Build a full-stack web application with Nest.js and Angular

In todays's tutorial, we are going to build a full-stack web application using Nest.js and Angular. In here, we'll be building a simple contacts management web application in an Angular and Material Design interface retrieved from a Nest.js RESTful backend.

Prerequisites

Angular installed on your pc

To proceed with this tutorial you need to Angular installed in your local pc. to check, if Angular is installed or not run below command in your terminal:

ng version

To install Angular in your local pc, run below coomand in your terminal:

npm install -g @angular/cli

Nest.js installed on your pc

To install Nest.js on your local pc, run below command in your terminal:

npm install -g @nestjs/cli

Setup Working Directory

Now we need to setup our working directory. To setup directory, Head back to your terminal and navigate to your working directory then create a folder your project:

cd ~/codingtricks
mkdir nest-angular-app

Now we need to navigate to our created project and generate the backend and frontend projects using the following commands:

cd nest-angular-app
ng new frontend
nest new backend

Note:

Then the Angular CLI will prompt you if you Would you like to add Angular routing? (y/N) Enter y and Which stylesheet format would you like to use? Choose CSS and hit Enter.

The Nest CLI will ask you for a bunch of information about your project and CLI will create the necessary files and then prompt you for which package manager to use to install the dependencies. Choose npm.

Next, navigate to your frontend project and serve it using a live-reload development server using the following commands:

cd frontend
ng serve

Open a new terminal and navigate to the backend project then run the development server using the following commands:

cd backend
npm run start:dev

Set up Database and TypeORM

ext, we nned to create a Databse for our project. To create Database access to your php my admin and create database with your prefered name. In my case my Database name is nestng.

Previously I mentioned that we are going to use of TypeORM which is the most mature Object Relational Mapper (ORM) available in TypeScript.

Navigate to your backend project and run the following commands to install the required dependencies:

npm install --save @nestjs/typeorm typeorm mysql

Next, you need to open the src/app.module.ts file and import the TypeOrmModule in ApplicationModule:

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';

import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      database: 'nestng',
      username: 'root',
      password: 'YOUR_DATABASE_PASSWORD',
      entities: [__dirname + '/**/*.entity{.ts,.js}'],
      synchronize: true,
    })
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }

Note:

Make sure to replace YOUR_DATABASE_PASSWORD with your own MySQL database password.

In the configuration object we specify the following options:

mysql database as the type which tells TypeORM to connect to a MySQL database,

nestng database we previously created

entities files contain our ORM entities that will be mapped to SQL tables by TypeORM.

synchronize option (which takes true or false). If true, It tells TypeORM to automatically sync the database tables with the entities each time you run the app. This is helpful in development but not recommended in production.

Now, we have configured TypeORM in our project, we’ll be able to inject the Connection and EntityManager services in your Nest.js services and controllers to work with the database

Creating a Contact Entity

Next, we need to create a Contact entity that will be mapped to a contact table in the MySQL database that will hold information about contacts in our application.

Create a src/entities/contact.entity.ts file and add the following code:

import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity()

export class Contact {

  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;

  @Column()
  title: string;

  @Column()
  email: string;

  @Column()
  phone: string;

  @Column()
  address: string;

  @Column()
  city: string;
}

Next, we need to import that Contact entity and include it in the imports array of the root module using the forFeature() method. Open the src/app.module.ts file and add the following changes:

// ...
import { Contact } from 'entities/contact.entity';

@Module({
  imports: [
    /* ... */
    TypeOrmModule.forFeature([Contact]),
  ],
  controllers: [AppController],
  providers: [AppService],
})

export class AppModule { }

Once you save your file, the database table that corresponds to the Contact entity will be created in your database.

Creating Contact Service

Next, let's create a Nest service that contains the code for working with the contact table.

Head back to your terminal and run the following command to generate a service:

nest generate service contact

Next, open the src/contact.service.ts file and add the following imports:

import { Repository } from  'typeorm';
import { Repository, UpdateResult, DeleteResult } from  'typeorm';
import { Contact } from  'entities/contact.entity';

Next, inject the Contact repository via the constructor:

@Injectable()
export class ContactService {
    constructor(
        @InjectRepository(Contact)
        private contactRepository: Repository<Contact>
    ) 
    { }
}

Next, add the CRUD methods:

async create(contact: Contact): Promise<Contact> {
    return await this.contactRepository.save(contact);
}

async  readAll(): Promise<Contact[]> {
    return await this.contactRepository.find();
}

async update(contact: Contact): Promise<UpdateResult> {

    return await this.contactRepository.update(contact.id,contact);
}

async delete(id): Promise<DeleteResult> {
    return await this.contactRepository.delete(id);
}

Building the REST API

Now we need to create the REST endpoints that our Angular frontend will be calling to retrieve and create data on the server. Head back to your terminal and run the following command to generate a controller:

nest generate controller contacts

Next, open the src/contacts/contacts.controller.ts file and import then inject ContactService

import { Controller } from '@nestjs/common';
import { ContactService } from 'contact.service';

@Controller('contacts')
export class ContactsController {

    constructor(private contactService: ContactService){
    }
}

You need to import the Get, Post,Put, Delete, Body and Param symbols and also the Contact entity:

import { Controller, Get, Post,Put, Delete, Body, Param } from  '@nestjs/common';
import { Contact } from  'entities/contact.entity';

Finally, add the REST endpoints:

@Get()
read(): Promise<Contact[]> {
  return this.contactService.readAll();
}

@Post('create')
async create(@Body() contact: Contact): Promise<any> {
  return this.contactService.create(contact);
}  

@Put(':id/update')
async update(@Param('id') id, @Body() contact: Contact): Promise<any> {
    contact.id = Number(id);
    return this.contactService.update(contact);
}  

@Delete(':id/delete')
async delete(@Param('id') id): Promise<any> {
  return this.contactService.delete(id);
}

That’s it! Our REST API is ready.

Enabling CORS

Since we'll be communicating with our REST API from an Angular frontend running on another domain we need to enable CORS. Open the src/main.ts file and call the enableCors() method:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

Implementing the Angular Interface

Now we need to add Angular Material for our Angular project. Head back to a new terminal and run the following command to set up Angular Material:

ng add @angular/material

After that, you need to import the Angular Material components that you want to use in your project. Open the src/app/app.module.ts file:

// [...]

import { MatInputModule, 
         MatButtonModule, 
         MatCardModule, 
         MatFormFieldModule,
         MatTableModule 
    } from  '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    ContactComponent
  ],
  imports: [
    // [...]
    MatTableModule,
    MatCardModule,
    MatInputModule,
    MatFormFieldModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Setting up HttpClient and Forms

We'll be using HttpClient and a template-based form in our application so we need to import their modules. Open the src/app/app.module.ts file and update it accordingly:

// [...]
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // [...]
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Creating a Contact Model

Next, let's create a Contact model. In your terminal, run the following command:

ng generate class contact

Open the src/app/contact.ts file and update it accodringly:

export class Contact {
    id: number;
    name: string;
    title: string;
    email: string;
    phone: string;
    address: string;
    city: string;
}

Creating an Angular Service

Next, let's create a service that contains the code for interfacing with the REST API. In your terminal, run the following command:

ng generate service api

Next, open the src/app/api.service.ts file and start by importing and injecting HttpClient:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Contact } from  './contact';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private httpClient: HttpClient) { }  
}

We also imported the Contact model.

Next, define the API_SERVER variable that contains the address of the API server:

export class ApiService {

  API_SERVER = "http://localhost:3000";

Next, add the CRUD operations:

public readContacts(){
  return this.httpClient.get<Contact[]>(`${this.API_SERVER}/contacts`);
}

public createContact(contact: Contact){
  return this.httpClient.post<Contact>(`${this.API_SERVER}/contacts/create`, contact);
}

public updateContact(contact: Contact){
  return this.httpClient.put<Contact>(`${this.API_SERVER}/contacts/${contact.id}/update`, contact);
}

public deleteContact(id: number){
  return this.httpClient.delete(`${this.API_SERVER}/contacts/${id}/delete`);
}

We use the get(), post(), put() and delete() methods of HttpClient to send the GET, POST, PUT and DELETE requests to the corresponding endpoints of the API backend

Creating the Contacts Component

Now, let's create the component where we can display our table of contacts and a form to create contacts.

In your terminal, run the following command:

ng generate component contact

Next, open the src/app/app-routing.module.ts file and add a route for accessing the component:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  {path: "", pathMatch: "full", redirectTo: "contacts"},
  {path: "contacts", component: ContactComponent}
];

// [...]

We add a /contacts route mapped to ContactComponent and a route to redirect the empty path to the /contacts path.

Next open the src/app/contact/contact.component.ts and add the following imports:

import { ApiService } from '../api.service';
import { Contact } from '../contact';

Next inject ApiService and declare the following variables:

export class ContactComponent implements OnInit {

  displayedColumns  :  string[] = ['id', 'name', 'title', 'email', 'phone', 'address', 'city', 'actions'];
  dataSource  = [];
  contact = {};
  constructor(private apiService: ApiService) { }

The displayedComumns variable holds the name of the columns that will be displayed in the Angular Material Table we’ll be adding later. The dataSource variable will contain the data of the table and the contact variable will contain the selected contact from the table.

Next, retrieve the contacts from the server when the component is initialized:

ngOnInit() {
  this.apiService.readContacts().subscribe((result)=>{   
   this.dataSource  =  result;
  })
}

We simply call the readContacts() method of ApiService in the ngOnInit() method of the component and we subscribe to the returned RxJS Observable then we assign the result to the dataSource variable.

Next, add the selectContact() and newContact() methods:

selectContact(contact){
  this.contact = contact;
}

newContact(){
  this.contact = {};
}

The selectContact() method assigns the selected contact to the contact variable and the newContact() method assigns an empty object to the contact variable. These two methods will be bound to a select and new buttons that will be adding later in our UI.

Finally, add the other CRUD methods to create, update and delete contacts:

createContact(f){
    this.apiService.createContact(f.value).subscribe((result)=>{
      console.log(result);
    });
    
  }

  deleteContact(id){
    this.apiService.deleteContact(id).subscribe((result)=>{
      console.log(result);
    });
  }

  updateContact(f){
    f.value.id = this.contact['id'];
    this.apiService.updateContact(f.value).subscribe((result)=>{
      console.log(result);
    });
  }

Creating the Template

Open the src/app/contact/contact.component.html and start by adding a Material Design table that will display the contacts:

<mat-card>
  <mat-card-header>
    <mat-card-title>Contacts</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" style="width: 100%;">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>ID </th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef> Title </th>
        <td mat-cell *matCellDef="let element"> {{element.title}} </td>
      </ng-container>
      <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef> Email </th>
        <td mat-cell *matCellDef="let element"> {{element.email}} </td>
      </ng-container>
      <ng-container matColumnDef="phone">
        <th mat-header-cell *matHeaderCellDef> Phone </th>
        <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
      </ng-container>

      <ng-container matColumnDef="address">
        <th mat-header-cell *matHeaderCellDef> Address </th>
        <td mat-cell *matCellDef="let element"> {{element.address}} </td>
      </ng-container>

      <ng-container matColumnDef="city">
        <th mat-header-cell *matHeaderCellDef> City </th>
        <td mat-cell *matCellDef="let element"> {{element.city}} </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef> Actions </th>
        <td mat-cell *matCellDef="let element"> 
            <button  mat-raised-button (click)="deleteContact(element.id)" color="secondary">Delete Contact</button>
            <button  mat-raised-button (click)="selectContact(element)" color="secondary">Select Contact</button>

        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

  </mat-card-content>
</mat-card>

Next, let’s add a form to create and update contacts just below the table:

<mat-card>
  <mat-card-header>
    <mat-card-title>Create a Contact</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form #f ="ngForm" class="mat-elevation-z8" style="width: 100%; padding: 5px;">

      <mat-form-field>
        <input matInput placeholder="Name" name="name" [(ngModel)] = "contact.name" required>
      </mat-form-field>
      <mat-form-field>
          <input matInput placeholder="Title" name="title" [(ngModel)] = "contact.title" required>
      </mat-form-field>

      <mat-form-field>
          <input matInput placeholder="Email" name="email" [(ngModel)] = "contact.email" required>
      </mat-form-field>
      <mat-form-field>
          <input matInput placeholder="Phone" name="phone" [(ngModel)] = "contact.phone" required>
      </mat-form-field>
      <mat-form-field>
          <textarea  placeholder="Address" name="address" [(ngModel)] = "contact.address" matInput></textarea>      
      </mat-form-field>
      <mat-form-field>
          <input matInput placeholder="City" name="city" [(ngModel)] = "contact.city" required>
      </mat-form-field>
      
    </form>

  </mat-card-content>
  <mat-card-actions>
      <button  mat-raised-button *ngIf="!contact.id" (click)="createContact(f)" color="primary">Save Contact</button>
      <button  mat-raised-button *ngIf="contact.id" (click)="updateContact(f)" color="primary">Update Contact</button>
      <button  mat-raised-button (click)="newContact()" color="primary">New..</button>
      
  </mat-card-actions>
</mat-card>

Next, open the src/app/app.component.html and change accordingly:

<div style="text-align:center">
  <h1>
    Contact Management
  </h1>
</div>
<router-outlet></router-outlet>

Conclusion

In this tutorial, we obtain how can we create built a full-stack web application with Angular and Nest.js. You can obtain complete source code for this tutorial from this GitHub repository.

Happy Coding