Angular 6 CRUD: How to Create MEAN Stack Application

Here are the steps to create a crud application in Angular 6.

Step 1: Create an Angular 6 Project.

ng new ng6crud

Go into the project folder.

cd ng6crud

Start the Angular 6 application using the following command.

ng serve --open

It compiles and opens up the browser at this URL: http://localhost:4200

Step 2: Install Bootstrap 4.

Install Bootstrap 4 using the following command.

npm install bootstrap --save

Add the following line inside the src >> styles.css file.

@import "~bootstrap/dist/css/bootstrap.min.css"

Step 3: Create components.

Create the components folder inside the app folder.

Generate components using the following command.

ng g c components/create --spec=false
ng g c components/index --spec=false
ng g c components/edit --spec=false

All the components are created inside the components folder.

The app.module.ts file will be automatically updated.

Step 4: Configure the routing.

Inside the app.module.ts file, create one array called routes and add the object containing the route path and route component. Also, import the RouterModule and Routes components.

// app.module.ts

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'create',
    component: CreateComponent
  },
  {
    path: 'edit/:id',
    component: EditComponent
  },
  {
    path: 'index',
    component: IndexComponent
  }
];

Register these routes inside an app.module.ts file.

// app.module.ts

imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
],

We can include the <router-outlet> inside an app.component.html file.

<!-- app.component.html -->

<div>
  <router-outlet></router-outlet>
</div>

You can see the components based on routes.

For example, browsing http://localhost:4200/create can see “create works!” in your browser.

Step 5: Add Navigation.

Add the navigation and change the app.component.html outlook due to bootstrap classes.

<!-- app.component.html -->

<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a routerLink="create" class="nav-link" routerLinkActive="active">
          Create Ad Units
        </a>
      </li>
      <li class="nav-item">
        <a routerLink="index" class="nav-link" routerLinkActive="active">
          All Ad Units
        </a>
      </li> 
    </ul>
  </div>
</nav>

<div class="container">
  <router-outlet></router-outlet>
</div>

Step 6: Add the Angular Routing Progress Indicator.

Install a third-party package. Unfortunately, as of now, Angular packages do not support third-party 6, so we need to install one library called rxjs-compat.

npm install rxjs-compat --save

Next, install the ng2-slim-loading-bar library.

The goal of this tutorial is that when we navigate to different routing components, we see the loading indicator. So for that, we need to install an ng2-slim-loading-bar library. To install, use the following cmd.

npm install ng2-slim-loading-bar --save

Register this module inside an app.module.ts file.

// app.module.ts

import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';

imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    SlimLoadingBarModule
 ],

The next step is to include the styling that comes with the library inside the src  >>  styles.css file.

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "../node_modules/ng2-slim-loading-bar/style.css";

Write the following code inside an app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';
import {SlimLoadingBarService} from 'ng2-slim-loading-bar';
import { NavigationCancel,
  Event,
  NavigationEnd,
  NavigationError,
  NavigationStart,
  Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private _loadingBar: SlimLoadingBarService, private _router: Router) {
    this._router.events.subscribe((event: Event) => {
      this.navigationInterceptor(event);
    });
  }
  private navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
      this._loadingBar.start();
    }
    if (event instanceof NavigationEnd) {
      this._loadingBar.complete();
    }
    if (event instanceof NavigationCancel) {
      this._loadingBar.stop();
    }
    if (event instanceof NavigationError) {
      this._loadingBar.stop();
    }
  }
}

Write the following code in the app.component.html file. We need to add <ng2-slim-loading-bar> directive.

<ng2-slim-loading-bar color="blue"></ng2-slim-loading-bar>
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a routerLink="create" class="nav-link" routerLinkActive="active">
          Create Ad Units
        </a>
      </li>
      <li class="nav-item">
        <a routerLink="index" class="nav-link" routerLinkActive="active">
          All Ad Units
        </a>
      </li> 
    </ul>
  </div>
</nav>

<div class="container">
  <router-outlet></router-outlet>
</div>

Save the file; the routing indicator is above the navigation bar.

Step 7: Create a form.

Inside the create.component.html file, write the following code.

<!-- create.component.html -->

<div class="card">
  <div class="card-body">
    <form>
      <div class="form-group">
        <label class="col-md-4">Unit Name</label>
        <input type="text" class="form-control" name="unit_name"/>
      </div>
      <div class="form-group">
        <label class="col-md-4">Unit Price</label>
        <input type="text" class="form-control" name="unit_price"/>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Create Unit</button>
        </div>
    </form>
  </div>
</div>

Step 8: Configure HttpClientModule.

Register the HttpCientModule inside an app.module.ts file.

// app.module.ts

import { HttpClientModule } from '@angular/common/http';

imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    SlimLoadingBarModule,
    HttpClientModule
 ],

Step 9: Create an ad unit service to send http requests.

Type the following command in your terminal.

ng g service adunit --spec=false

Your primary adunit.service.ts file looks like this.

// adunit.service.ts

import { Injectable } from '@angular/core';

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

  constructor() { }
}

Import the adunit.service.ts file into the app.module.ts file.

// app.module.ts

import { AdunitService } from './adunit.service';

providers: [ AdunitService ],

Step 10: Create Node.js, Express, and MongoDB.

The next step is to create Node.js, Express, and MongoDB backend to store the data. Create one file in the project root folder called server.js

We must install the express.js web framework and other dependencies via a node package manager(NPM), so let us do that.

npm install --save express body-parser cors mongoose

I do not restart the node server each time; I change the file. So I am installing the nodemon server. What it does is that when I modify the server.js file, it restarts the node.js server automatically.

npm install nodemon --save-dev

Please switch to the newly created server.js file and enter the following code.

// server.js

let express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose');

    const app = express();
    var port = process.env.PORT || 4000;

    var server = app.listen(function(){
        console.log('Listening on port ' + port);
    });

The next thing is to connect the MongoDB database with our node.js application.

If you have not installed the MongoDB database, install it and start the mongodb server.

Type the following command to start the MongoDB server.

mongod

Now, I have downloaded the MongoDB client from Studio3T.

I connected to the database.

Create one config folder inside the project root. In that, create one file called DB.js.

// DB.js

module.exports = {
    DB: 'mongodb://localhost:27017/ng6crud'
 };

Import this DB.js file inside our server.js file and use the Mongoose library to set up the database connection with MongoDB. We can also use Mongoose to save the data in the database using Mongoose ORM.

Write the following code inside the server.js file to connect our MongoDB application to the Node.js server.

// server.js

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose'),
    config = require('./config/DB');

    mongoose.Promise = global.Promise;
    mongoose.connect(config.DB).then(
      () => {console.log('Database is connected') },
      err => { console.log('Can not connect to the database'+ err)}
    );

    const app = express();
    app.use(bodyParser.json());
    app.use(cors());
    const port = process.env.PORT || 4000;

    const server = app.listen(port, function(){
     console.log('Listening on port ' + port);
    });

Save a file, go to a terminal, and start the node.js server using the following command. You can also write this command inside the package.json file.

nodemon server

We have a total of three servers running.

1. Angular Development Server.
2. Node.js Server.
3. Mongodb Server.

Step 11: Create Express routes for our application.

We must create two folders inside the root folder called routes and models.

In the models folder, create one model called AdUnit.js.

// AdUnit.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Define collection and schema for AdUnits
let AdUnit = new Schema({
  unit_name: {
    type: String
  },
  unit_price: {
    type: Number
  }
},{
    collection: 'adunits'
});

module.exports = mongoose.model('AdUnit', AdUnit);

In the routes folder, create one file called adunit.route.js.

// adunit.route.js

const express = require('express');
const app = express();
const adUnitRoutes = express.Router();

// Require AdUnit model in our routes module
let AdUnit = require('../models/AdUnit');

// Defined store route
adUnitRoutes.route('/add').post(function (req, res) {
  let adUnit = new AdUnit(req.body);
  adUnit.save()
    .then(game => {
    res.status(200).json({'adUnit': 'AdUnit in added successfully'});
    })
    .catch(err => {
    res.status(400).send("unable to save to database");
    });
});

// Defined get data(index or listing) route
adUnitRoutes.route('/').get(function (req, res) {
    AdUnit.find(function (err, adUnits){
    if(err){
      console.log(err);
    }
    else {
      res.json(adUnits);
    }
  });
});

// Defined edit route
adUnitRoutes.route('/edit/:id').get(function (req, res) {
  let id = req.params.id;
  AdUnit.findById(id, function (err, adUnit){
      res.json(adUnit);
  });
});

//  Defined update route
adUnitRoutes.route('/update/:id').post(function (req, res) {
    AdUnit.findById(req.params.id, function(err, adUnit) {
    if (!adUnit)
      return next(new Error('Could not load Document'));
    else {
        adUnit.unit_name = req.body.unit_name;
        adUnit.unit_price = req.body.unit_price;

        adUnit.save().then(adUnit => {
          res.json('Update complete');
      })
      .catch(err => {
            res.status(400).send("unable to update the database");
      });
    }
  });
});

// Defined delete | remove | destroy route
adUnitRoutes.route('/delete/:id').get(function (req, res) {
    AdUnit.findByIdAndRemove({_id: req.params.id}, function(err, adUnit){
        if(err) res.json(err);
        else res.json('Successfully removed');
    });
});

module.exports = adUnitRoutes;

I have written all the logic to create, read, update, and delete the data from the mongodb database.

Include this adunit.route.js route file inside a server.js file.

// server.js

const adUnitRoutes = require('./routes/adunit.route');

app.use('/adunits', adUnitRoutes);

So, our final server.js file looks like this.

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose'),
    config = require('./config/DB');

    const app = express();

    mongoose.Promise = global.Promise;
    mongoose.connect(config.DB).then(
      () => {console.log('Database is connected') },
      err => { console.log('Can not connect to the database'+ err)}
    );
    const adUnitRoutes = require('./routes/adunit.route');

    app.use(bodyParser.json());
    app.use(cors());
    const port = process.env.PORT || 4000;

    app.use('/adunits', adUnitRoutes);

    const server = app.listen(port, function(){
     console.log('Listening on port ' + port);
    });

Step 12: Add ReactiveFormsModule at the Angular.

Inside the app.module.ts file, add the ReactiveFormsModule from @angular/forms package.

// app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    SlimLoadingBarModule,
    HttpClientModule,
    ReactiveFormsModule
  ],

Then, we validate the forms. So first, write the form HTML in the create.component.html. 

<!-- create.component.html -->

<div class="card">
  <div class="card-body">
    <form [formGroup]="angForm" novalidate>
      <div class="form-group">
        <label class="col-md-4">Unit Name</label>
        <input type="text" class="form-control" name="unit_name" formControlName="unit_name" #unit_name/>
      </div>
      <div *ngIf="angForm.controls['unit_name'].invalid && (angForm.controls['unit_name'].dirty || angForm.controls['unit_name'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['unit_name'].errors.required">
          Unit Name is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Unit Price</label>
        <input type="text" class="form-control" name="unit_price" formControlName="unit_price" #unit_price/>
      </div>
      <div *ngIf="angForm.controls['unit_price'].invalid && (angForm.controls['unit_price'].dirty || angForm.controls['unit_price'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['unit_price'].errors.required">
          Unit Price is required.
        </div>
      </div>
      <div class="form-group">
        <button (click)="addAdUnit(unit_name.value, unit_price.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Create Unit</button>
      </div>
    </form>
  </div>
</div>

Also, we need to write the form validation logic in the create.component.ts file.

// create.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
import { AdunitService } from '../../adunit.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {

  angForm: FormGroup;

  constructor(private adunitservice: AdunitService, private fb: FormBuilder) { 
    this.createForm();
  }

  createForm() {
    this.angForm = this.fb.group({
      unit_name: ['', Validators.required ],
      unit_price: ['', Validators.required ]
   });
  }

  addAdUnit(unit_name, unit_price) {
    this.adunitservice.addAdUnit(unit_name, unit_price);
}

  ngOnInit() {
  }

}

We used the addAdUnit() function but not created inside an adunit.service.ts file.

So, let us create that.

// adunit.service.ts

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

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

  uri = 'http://localhost:4000/adunits';

  constructor(private http: HttpClient) { }

  addAdUnit(unit_name, unit_price) {
    const obj = {
      unit_name: unit_name,
      unit_price: unit_price
    };
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }

}

Go to this URL and check the validation: http://localhost:4200/create.

Fill in the values and submit the form.

You can see in the console that we have successfully saved the values in the MongoDB database.

You can see it in the MongoDB database.

Step 13: Display the data on the front end.

In the index.component.html file, write the following code.

<!-- index.component.html -->

<table class="table table-hover">
  <thead>
  <tr>
      <td>Ad Unit Name</td>
      <td>Ad Unit Price</td>
      <td colspan="2">Actions</td>
  </tr>
  </thead>

  <tbody>
      <tr *ngFor="let adunit of adunits">
          <td>{{ adunit.unit_name }}</td>
          <td>{{ adunit.unit_price }}</td>
          <td><a [routerLink]="['/edit', adunit._id]" class="btn btn-primary">Edit</a></td>
          <td><a [routerLink]="" class="btn btn-danger">Delete</a></td>
      </tr>
  </tbody>
</table>

Now, inside the index folder, create one file called AdUnit.ts. AdUnit.ts is an interface that tells Angular 6 what kind of backend data we need to display at the Angular 6 front. For example, we are using the Strict TypeScript type-checking feature.

// AdUnit.ts

export interface AdUnit {
    id: Number;
    unit_name: String;
    unit_price: Number;
}

Inside the adunit.service.ts file, we need to write the function that fetches the unit data from the MongoDB database and displays it in the Angular application.

// adunit.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AdUnit } from './components/index/AdUnit';

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

  uri = 'http://localhost:4000/adunits';

  constructor(private http: HttpClient) { }

  addAdUnit(unit_name, unit_price) {
    const obj = {
      unit_name: unit_name,
      unit_price: unit_price
    };
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }

  getAdUnits() {
    return this
           .http
           .get(`${this.uri}`);
    }

}

We must include this adunit.service.ts file and AdUnit.ts file inside an index.component.ts file.

// index.component.ts

import { Component, OnInit } from '@angular/core';
import { AdUnit } from './AdUnit';
import { AdunitService } from '../../adunit.service';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {

  adunits: AdUnit[];

  constructor(private adunitservice: AdunitService) { }

  ngOnInit() {
    this.adunitservice
      .getAdUnits()
      .subscribe((data: AdUnit[]) => {
      this.adunits = data;
    });
  }
}

Step 14: Edit Form and Update the Data.

We need to fetch the data from the MongoDB database using _id wise and display that data in the edit.component.html file.

So first, the edit.component.html form looks like this.

<!-- edit.component.html -->

<div class="card">
  <div class="card-body">
    <form [formGroup]="angForm" novalidate>
      <div class="form-group">
        <label class="col-md-4">Unit Name</label>
        <input type="text" class="form-control" name="unit_name" formControlName="unit_name" #unit_name [(ngModel)] = "adunit.unit_name"/>
      </div>
      <div *ngIf="angForm.controls['unit_name'].invalid && (angForm.controls['unit_name'].dirty || angForm.controls['unit_name'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['unit_name'].errors.required">
          Unit Name is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Unit Price</label>
        <input type="text" class="form-control" name="unit_price" formControlName="unit_price" #unit_price [(ngModel)] = "adunit.unit_price"/>
      </div>
      <div *ngIf="angForm.controls['unit_price'].invalid && (angForm.controls['unit_price'].dirty || angForm.controls['unit_price'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['unit_price'].errors.required">
          Unit Price is required.
        </div>
      </div>
      <div class="form-group">
        <button (click)="updateAdUnit(unit_name.value, unit_price.value)" [disabled]="angForm.invalid" class="btn btn-primary">Update Unit</button>
      </div>
    </form>
  </div>
</div>

Inside the edit.component.ts file, write the following code.

// edit.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
import { AdUnit } from '../index/AdUnit';
import { AdunitService } from '../../adunit.service';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {

  adunit: any = {};
  angForm: FormGroup;

  constructor(private route: ActivatedRoute,
    private router: Router,
    private adunitservice: AdunitService,
    private fb: FormBuilder) {
      this.createForm();
    }
    createForm() {
      this.angForm = this.fb.group({
             unit_name: ['', Validators.required ],
              unit_price: ['', Validators.required ]
         });
      }

    ngOnInit() {
      this.route.params.subscribe(params => {
        this.adunitservice.editAdUnit(params['id']).subscribe(res => {
          this.adunit = res;
      });
    });
  }
}

It would be best to create an editAdUnit function inside an adunit.service.ts file.

// adunit.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AdUnit } from './components/index/AdUnit';

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

  uri = 'http://localhost:4000/adunits';

  constructor(private http: HttpClient) { }

  addAdUnit(unit_name, unit_price) {
    const obj = {
      unit_name: unit_name,
      unit_price: unit_price
    };
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }

  getAdUnits() {
    return this
           .http
           .get(`${this.uri}`);
}

editAdUnit(id) {
  return this
            .http
            .get(`${this.uri}/edit/${id}`);
  }
}

You can see the edited data from the MongoDB database.

Inside the adunit.service.ts file, we need to write the function that updates the data.

// adunit.service.ts

updateAdUnit(unit_name, unit_price, id) {

  const obj = {
    unit_name: unit_name,
    unit_price: unit_price
  };
  this
    .http
    .post(`${this.uri}/update/${id}`, obj)
    .subscribe(res => console.log('Done'));
}

Now write the updateAdUnit() function inside the edit.component.ts file.

// edit.component.ts

updateAdUnit(unit_name, unit_price) {
   this.route.params.subscribe(params => {
      this.adunitservice.updateAdUnit(unit_name, unit_price, params['id']);
      this.router.navigate(['index']);
   });
}

Finally, you can be able to update the data.

So, if you find no error on the console, you can successfully update the data.

 I have already written the edit and update service to make an API call. So till now, Create, Read, Update is complete of this Angular 6 CRUD Example Tutorial. Now, take a look at Delete.

We must define the click event on the delete button inside an index.component.html file.

<!-- index.component.html -->

<tr *ngFor="let adunit of adunits">
          <td>{{ adunit.unit_name }}</td>
          <td>{{ adunit.unit_price }}</td>
          <td><a [routerLink]="['/edit', adunit._id]" class="btn btn-primary">Edit</a></td>
          <td><button (click)="deleteAdUnit(adunit._id)"  class="btn btn-danger">Delete</button></td>
</tr>

Write the deleteAdUnit function inside an index.component.ts file.

// index.component.ts

deleteAdUnit(id) {
    this.adunitservice.deleteAdUnit(id).subscribe(res => {
      console.log('Deleted');
    });
  }

Finally, create the deleteAdUnit() function inside the adunit.service.ts file.

// adunit.service.ts

deleteAdUnit(id) {
    return this
              .http
              .get(`${this.uri}/delete/${id}`);
}

That’s it.

Github Code

Krunal

Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.