Angular 13 CRUD Application Tutorial

Here is the step-by-step guide to create a crud application in Angular:

Step 1: Install Angular and other dependencies.

If you have an older @angular/cli version, you can run the following command to install the latest versions.

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli

If you type the following command, you can see that we have updated Angular CLI.

Angular 7 CRUD Example | MEAN Stack Tutorial

You will create a new Angular project using the following command.

ng new angular7crud
cd angular7crud

MEAN Stack CRUD Example

After going inside the project folder, open the project in Visual Studio Code using the following command. If you are not using it, then start using it. It is the best Editor for Javascript development.

At the time of installation, we have enabled routing for our application. It is new in Angular because it will prompt us while installing the Angular boilerplate. You can check the app-routing.module.ts file inside the src >> app directory.

Next, install the Bootstrap 4 CSS Framework using the following command.

npm install bootstrap --save

Add it inside the angular.json file.

"styles": [
   "src/styles.css",
   "./node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],

Now we can use the Bootstrap 4 classes in our project. 

Start the Angular development server using the following command.

ng serve -o

 

Angular 7 Tutorial

Step 2: Generate Angular Components

Type the following command to generate Angular Components. We will perform create, read, and update operations. So we will create three components.

ng g c gst-add --spec=false
ng g c gst-get --spec=false
ng g c gst-edit --spec=false

Angular CRUD Tutorial

All three components are automatically registered inside an app.module.ts file. We need to configure the routing of angular components inside an app-routing.module.ts file.

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GstAddComponent } from './gst-add/gst-add.component';
import { GstEditComponent } from './gst-edit/gst-edit.component';
import { GstGetComponent } from './gst-get/gst-get.component';

const routes: Routes = [
  {
    path: 'business/create',
    component: GstAddComponent
  },
  {
    path: 'business/edit/:id',
    component: GstEditComponent
  },
  {
    path: 'business',
    component: GstGetComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

You can see inside the app.component.html file that the <router-outlet> directive is there. This directive helps us render the different components based on the route URI.

Step 3: Create an Angular Navigation

Write the following code inside the app.component.html file.

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

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

Save the file and go to the browser and click on two links. You can see that we can see the different components based on the navigation.

Step 4: Install Angular Routing Progress Indicator.

Type the following command to install the ng2-slim-loading-bar library.

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

If you install third-party packages right now, it is not compatible with Angular. We need to install the following library to bridge the gap between Angular and third-party packages. That is it.

npm install rxjs-compat --save

Import the SlimLoadingBarModule inside the app.module.ts file.

// app.module.ts

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

imports: [
    ...
    SlimLoadingBarModule
],

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

@import "../node_modules/ng2-slim-loading-bar/style.css";

Step 5: Adding Router Events.

Angular RouterModule gives us the following event modules.

  1. NavigationStart
  2. NavigationEnd
  3. NavigationError
  4. NavigationCancel
  5. Router
  6. Event

Write the following code inside the  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 = 'angular7crud';
  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();
    }
  }
}

It is doing that it intercepts the routing event and adds the loading bar component to every route so that we can see the routing indication every time we change the routes.

The final change to display the routing indicator is to add the ng2-slim-loading-bar directive inside the app.component.html file at the top of the page.

<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="business/create" class="nav-link" routerLinkActive="active">
          Create Business
        </a>
      </li>
      <li class="nav-item">
        <a routerLink="business" class="nav-link" routerLinkActive="active">
          Business
        </a>
      </li> 
    </ul>
  </div>
</nav>

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

Save the file and go to the terminal to see if there is an error; if not, go to the browser and change the routes, and you can see that now we can see the routing indicator.

Step 6: Add Bootstrap Form

Inside the gst-add.component.html file, add the following bootstrap 4 form.

<div class="card">
  <div class="card-body">
    <form>
      <div class="form-group">
        <label class="col-md-4">Person Name</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group">
        <label class="col-md-4">Business Name </label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group">
        <label class="col-md-4">Business GST Number </label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Add Business</button>
      </div>
    </form>
  </div>
</div>

Angular 7 CRUD Demo

Step 7: Add Angular Form Validation

We will use ReactiveFormsModule. So if you are new to Angular Form Validation, please check out the article Angular Form Validation on this blog.

Import the ReactiveFormsModule inside the app.module.ts file.

// app.module.ts

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

imports: [
    ...
    ReactiveFormsModule
],

We need to write the code for the app.component.ts file. Remember, this is not a template-driven form. So we will change the code inside the app.component.ts file.

First, we import the FormGroup, FormBuilder, and Validators modules from @angular/forms.

Also, create a constructor and instantiate the FormBuilder.

So write the following code inside the gst-add.component.ts file.

// gst-add.component.ts

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

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

  angForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.angForm = this.fb.group({
      person_name: ['', Validators.required ],
      business_name: ['', Validators.required ],
      business_gst_number: ['', Validators.required ]
    });
  }

  ngOnInit() {
  }

}

We used form builder to handle all the validation. So in that constructor, we are creating a form with the validation rules. In our example, there are three fields. If the input text is empty, it will give an error, and we need to display it.

Write the following code inside the gst-add.component.html file.

<div class="card">
  <div class="card-body">
    <form [formGroup]="angForm" novalidate>
      <div class="form-group">
        <label class="col-md-4">Person Name</label>
        <input type="text" class="form-control" formControlName="person_name" #person_name />
      </div>
      <div *ngIf="angForm.controls['person_name'].invalid && (angForm.controls['person_name'].dirty || angForm.controls['person_name'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['person_name'].errors.required">
          Person Name is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Business Name </label>
        <input type="text" class="form-control" formControlName="business_name" #business_name />
      </div>
      <div *ngIf="angForm.controls['business_name'].invalid && (angForm.controls['business_name'].dirty || angForm.controls['business_name'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['business_name'].errors.required">
          Person Business is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Business GST Number </label>
        <input type="text" class="form-control" formControlName="business_gst_number" #business_gst_number />
      </div>
      <div *ngIf="angForm.controls['business_gst_number'].invalid && (angForm.controls['business_gst_number'].dirty || angForm.controls['business_gst_number'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['business_gst_number'].errors.required">
          Business GST Number is required.
        </div>
      </div>
      <div class="form-group">
        <button type="submit" 
        [disabled]="angForm.pristine || angForm.invalid" 
        class="btn btn-primary">Add Business</button>
      </div>
    </form>
  </div>
</div>

Save the file and go to the browser, and you can see if you do not put any value inside the input box, you will see the errors.

Angular 7 Form Validation Example

Step 8: Configure the HttpClientModule

Import the HttpClientModule inside the app.module.ts file.

// app.module.ts

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

imports: [
   ...
    HttpClientModule
 ],

Step 9: Create a model.

Inside the src >> app folder, create one file called Business.ts and add the following code.

// Business.ts

export default class Business {
  person_name: String;
  business_name: String;
  business_gst_number: Number;
}

Step 10: Create an Angular Service file.

Type the following command to generate the service file.

ng g service business --spec=false

So, your primary business.service.ts file looks like this.

// business.service.ts

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

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

  constructor() { }
}

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

// app.module.ts

import { BusinessService } from './business.service';

providers: [ BusinessService ],

Step 11: Submit the data to the node server

We need to write the code to send the HTTP POST request with the data to the Node.js server and save the data into the MongoDB database.

Write the following code inside the business.service.ts file.

// business.service.ts

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

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

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

  constructor(private http: HttpClient) { }

  addBusiness(person_name, business_name, business_gst_number) {
    const obj = {
      person_name: person_name,
      business_name: business_name,
      business_gst_number: business_gst_number
    };
    console.log(obj);
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }
}

We have defined our backend API URL, but we have not created any backend yet, but we will do it in a couple of steps.

We need to add the click event to the Add Business Button. So add the following code inside the gst-add.component.html file.

<div class="form-group">
    <button (click)="addBusiness(person_name.value, business_name.value, business_gst_number.value)"
        [disabled]="angForm.pristine || angForm.invalid" 
        class="btn btn-primary">
        Add Business
     </button>
</div>

When there are no errors, we can submit the form, which will call the component’s addBusiness function. From there, we will call the angular service, and the service will send the HTTP Post request to the Node.js server.

Add the addBusiness function inside the gst-add.component.ts file. So write the following code inside the gst-add.component.ts file.

// gst-add.component.ts

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

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

  angForm: FormGroup;
  constructor(private fb: FormBuilder, private bs: BusinessService) {
    this.createForm();
  }

  createForm() {
    this.angForm = this.fb.group({
      person_name: ['', Validators.required ],
      business_name: ['', Validators.required ],
      business_gst_number: ['', Validators.required ]
    });
  }

  addBusiness(person_name, busines_name, business_gst_number) {
    this.bs.addBusiness(person_name, busines_name, business_gst_number);
  }

  ngOnInit() {
  }

}

Here, we have defined the function and also imported the business.service.ts file. Next, instantiate the object inside the constructor and call the function of the businsess.service.ts file.

We have already coded the addBusiness function inside the business.service.ts file. Now, we need to configure the backend API.

Step 12: Create a Node.js backend API

Inside the angular root folder, create one folder called api and go inside that folder. Remember, it will be a completely separate project from Angular. So its node_modules are different from an Angular.

Open the terminal inside the api folder and type the following command.

npm init -y

Install the following node-specific modules.

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

Now, inside the api folder, create one server.js file.

// server.js

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

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

    const 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

So, Now, I connected the app to the database.

Create one file called DB.js inside api root project folder. Then, write the following code inside the DB.js file.

// DB.js

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

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('./DB');

    mongoose.Promise = global.Promise;
    mongoose.connect(config.DB, { useNewUrlParser: true }).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 the file and go to the terminal and start the node server.

nodemon server

Right now, you have three servers running.

  1. Angular Development Server
  2. Nodemon server
  3. MongoDB server

Remember, all three servers are running fine without any errors; otherwise, our application will not work.

Step 13: Create a model and routes for our application.

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

In the models’ folder, create one model called Business.js.

// Business.js

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

// Define collection and schema for Business
let Business = new Schema({
  person_name: {
    type: String
  },
  business_name: {
    type: String
  },
  business_gst_number: {
    type: Number
  }
},{
    collection: 'business'
});

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

We defined our schema for the business collection. We have three fields called person_name, business_name, business_gst_number.

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

Write the CRUD code inside the business.route.js file.

// business.route.js

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

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

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

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

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

//  Defined update route
businessRoutes.route('/update/:id').post(function (req, res) {
    Business.findById(req.params.id, function(err, next, business) {
    if (!business)
      return next(new Error('Could not load Document'));
    else {
        business.person_name = req.body.person_name;
        business.business_name = req.body.business_name;
        business.business_gst_number = req.body.business_gst_number;

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

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

module.exports = businessRoutes;

We have used the Mongoose model to save, update, and delete the database. Mongoose is an ORM used in the MongoDB database. We have all the CRUD operations on the route file; we must import them inside the server.js file.

Our final server.js file looks like this.

// server.js

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

const businessRoute = require('./routes/business.route');
mongoose.Promise = global.Promise;
mongoose.connect(config.DB, { useNewUrlParser: true }).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());
app.use('/business', businessRoute);
const port = process.env.PORT || 4000;

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

Step 14: Test the store data functionality

If all the servers are running, you can go to the browser, fill in the form data, and add the business. You can see something like this on your screen if you are successful.

MEAN Stack Tutorial

We can check on the database using the following commands.

First, open the Mongo shell on the 4th tab because all three other tabs are occupied.

mongo

 

MongoDB CRUD

Here, we can see that the values are stored in the MongoDB database. Yes!! We have succeeded.

Now, the remaining operations are Read, Updated, and Delete.

Step 15: Display the data on the frontend

In the gst-get.component.html file, write the following code.

<table class="table table-hover">
  <thead>
  <tr>
      <td>Person Name</td>
      <td>Business Name</td>
      <td>GST Number</td>
      <td colspan="2">Actions</td>
  </tr>
  </thead>

  <tbody>
      <tr *ngFor="let business of businesses">
          <td>{{ business.person_name }}</td>
          <td>{{ business.business_name }}</td>
          <td>{{ business.business_gst_number }}</td>
          <td><a [routerLink]="['/edit', business._id]" class="btn btn-primary">Edit</a></td>
          <td><a [routerLink]="" class="btn btn-danger">Delete</a></td>
      </tr>
  </tbody>
</table>

Inside the business.service.ts file, we need to write the function fetching the business data from the MongoDB database and displaying it in the Angular application.

// business.service.ts

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

We must include this business.service.ts file and Business.ts file inside the gst-get.component.ts file.

Write the following code inside the gst-get.component.ts file.

// gst-get.component.ts

import { Component, OnInit } from '@angular/core';
import Business from '../Business';
import { BusinessService } from '../business.service';

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

  businesses: Business[];

  constructor(private bs: BusinessService) { }

  ngOnInit() {
    this.bs
      .getBusinesses()
      .subscribe((data: Business[]) => {
        this.businesses = data;
    });
  }
}

Save the file, go to the browser, and switch to this URL: http://localhost:4200/business. You can see the listing of the businesses.

Step 16: Edit and Update Data

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

So first, write the following code inside the gst-edit.component.ts file.

// gst-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
import { BusinessService } from '../business.service';

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

  business: any = {};
  angForm: FormGroup;

  constructor(private route: ActivatedRoute,
    private router: Router,
    private bs: BusinessService,
    private fb: FormBuilder) {
      this.createForm();
 }

  createForm() {
    this.angForm = this.fb.group({
        person_name: ['', Validators.required ],
        business_name: ['', Validators.required ],
        business_gst_number: ['', Validators.required ]
      });
    }


  ngOnInit() {
    this.route.params.subscribe(params => {
        this.bs.editBusiness(params['id']).subscribe(res => {
          this.business = res;
      });
    });
  }
}

Here, when the gst-edit component.ts render, it will call the ngOnInit method, send an HTTP request to the node server, and fetch the data from an _id to display inside the gst-edit.component.html file.

Inside the business.service.ts file, we need to code the editBusiness function to send an HTTP request.

// business.service.ts

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

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

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

  constructor(private http: HttpClient) { }

  addBusiness(person_name, business_name, business_gst_number) {
    const obj = {
      person_name: person_name,
      business_name: business_name,
      business_gst_number: business_gst_number
    };
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }

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

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

Finally, we need to write the form inside the gst-edit.component.html file.

<div class="card">
  <div class="card-body">
    <form [formGroup]="angForm" novalidate>
      <div class="form-group">
        <label class="col-md-4">Person Name</label>
        <input type="text" class="form-control" formControlName="person_name" #person_name [(ngModel)] = "business.person_name" />
      </div>
      <div *ngIf="angForm.controls['person_name'].invalid && (angForm.controls['person_name'].dirty || angForm.controls['person_name'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['person_name'].errors.required">
          Person Name is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Business Name </label>
        <input type="text" class="form-control" formControlName="business_name" #business_name [(ngModel)] = "business.business_name" />
      </div>
      <div *ngIf="angForm.controls['business_name'].invalid && (angForm.controls['business_name'].dirty || angForm.controls['business_name'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['business_name'].errors.required">
          Person Business is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Business GST Number </label>
        <input type="text" class="form-control" formControlName="business_gst_number" #business_gst_number [(ngModel)] = "business.business_gst_number" />
      </div>
      <div *ngIf="angForm.controls['business_gst_number'].invalid && (angForm.controls['business_gst_number'].dirty || angForm.controls['business_gst_number'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['business_gst_number'].errors.required">
          Business GST Number is required.
        </div>
      </div>
      <div class="form-group">
        <button (click)="updateBusiness(person_name.value, business_name.value, business_gst_number.value)"
        [disabled]="angForm.invalid" 
        class="btn btn-primary">Update Business</button>
      </div>
    </form>
  </div>
</div>

Save the file, go to the listing page, click on the edit button, and see the populated form from the database.

You can also see the warning like the following. Ignore this demo tutorial.

forms.js:1193
You’re using ngModel on the same form field as formControlName.
Support for using the ngModel input property and ngModelChange event with
reactive form directives has been deprecated in Angular v6 and removed
in Angular v7.
Now, update the data. Inside the business.service.ts file, we need to write the function that updates the data.
// business.service.ts

updateBusiness(person_name, business_name, business_gst_number, id) {

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

Write the updateBusiness() function inside the gst-edit.component.ts file.

// gst-edit.component.ts

updateBusiness(person_name, business_name, business_gst_number) {
   this.route.params.subscribe(params => {
      this.bs.updateBusiness(person_name, business_name, business_gst_number, params['id']);
      this.router.navigate(['business']);
});

Save the file, and you will be able to update the data.

Step 17: Delete the data.

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

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

We must define the click event on the delete button inside the gst-get.component.html file.

<tr *ngFor="let business of businesses">
          <td>{{ business.person_name }}</td>
          <td>{{ business.business_name }}</td>
          <td>{{ business.business_gst_number }}</td>
          <td><a [routerLink]="['edit', business._id]" class="btn btn-primary">Edit</a></td>
          <td><a (click) = "deleteBusiness(business._id)" class="btn btn-danger">Delete</a></td>
</tr>

Write the deleteBusiness function inside the gst-get.component.ts file.

// gst-get.component.ts

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

Finally, create the deleteBusiness() function inside the business.service.ts file.

// business.service.ts

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

That’s it, mates!

Github Code

106 thoughts on “Angular 13 CRUD Application Tutorial”

  1. Why didn’t you use angular material instead of bootstrap? It would be very nice article for me. Anyway, thanks for this article tho.

    Reply
  2. Firstly, I would like to thank you for this article. I am learning Angular for the first time now and your article was very helpful.

    I had a problem with the edit form. When I click on Edit button, change any field and submit, the following error was displayed in the console: “Form submission canceled because the form is not connected”. To workaround this, was necessary add type=”button” on the submit button.

    Now I have another issue, when I submit the edit form with new values, I’m redirected to the initial page but to see the new values, I need to refresh manually. How can I fix it?

    Thank you,
    Cheers from Brazil.

    Reply
    • My work around for this was: window.location.href = `/business/edit/${params[‘id’]}`;
      in place of: this.router.navigate([‘business’]);
      I also tried this.router.navigate([‘business/edit’]); but got a similar error I think I’m going to try it with ${params[‘id’]} later tonight and see where that gets me.

      Reply
    • Excuse me I meant I used
      window.location.href = ‘/business’;

      not: window.location.href = `/business/edit/${params[‘id’]}`;

      sorry about that

      Reply
  3. I’m getting this error ,
    Can’t able to find where i went wrong
    `this.bs.addBusiness is not a function
    at GstAddComponent.push../src/app/gst-add/gst-add.component.ts.GstAddComponent.addBusiness (gst-add.component.ts:30)`

    Reply
  4. I really like this tutorial except for one little thing. Why didn’t you write the back-end API in Typescript? You did the front end in Typescript.

    Reply
  5. project is working. Add Business button is clicking value added in mongodb. but page cannot be refreshed. same problem for delete and view. how can set for page reload in value added.

    Reply
  6. Hi, i’m new in Angular, Nodejs development. I would like to thank you for this Article.
    unfortunately, i’m not able to figure out why i get following error.
    POST http://localhost:4000/business/add 404 (Not Found)
    core.js:12501 ERROR HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: “Not Found”, url: “http://localhost:4000/business/add”, ok: false, …}error: “↵↵↵↵Error↵↵↵Cannot POST /business/add↵↵↵”headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: “Http failure response for http://localhost:4000/business/add: 404 Not Found”name: “HttpErrorResponse”ok: falsestatus: 404statusText: “Not Found”url: “http://localhost:4000/business/add”__proto__: HttpResponseBase

    When i start the nodeserver everything looks fine.
    [nodemon] starting `node server.js`
    Listening on port 4000
    Database is connected

    The mongodb is up and running. i’ve tried local, and also with a db on cloud.mongodb.com atlas.

    Could you help me please,
    Thx,
    Bert

    Reply
    • Same problem here tried to restart nodemon but now i cannot run error 48 on my ubuntu.. Have you tried to edit the service change to uri = ‘/business ‘ only? Thanks

      Reply
    • I encountered the same problem and i solved now by adding permission on mongodb. My problem now is unable to submit after the edit and cant delete item.. Anyone can help? I check my node it stop after delete or edit and need to restart..

      Reply
      • I did not face issue with delete, but yes with edit.
        Changed business.route.js where “Business.findById(req.params.id, function(err, next, business)” the retrieved data was present in NEXT and ended up using that object instead of the BUSINESS for the update.

        Reply
    • Remove process.ENV || from the port variable in server.js and send the port as a parameter in app.listen() function of server variable. Don’t forget to change keep the same port number at your client business.service.ts in uri variable and port variable in server.js

      Reply
    • POST http://localhost:4000/business/add 404 (Not Found)
      core.js:12501 ERROR HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: “Not Found”, url: “http://localhost:4000/business/add”, ok: false, …}error: “↵↵↵↵Error↵↵↵Cannot POST /business/add↵↵↵”headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: “Http failure response for http://localhost:4000/business/add: 404 Not Found”name: “HttpErrorResponse”ok: falsestatus: 404statusText: “Not Found”url: “http://localhost:4000/business/add”__proto__: HttpResponseBase HOW DID YOU FIX THIS PROBLEM?

      Reply
      • In the server.js file, include the routing to the const express variable:

        const express = require(‘express’),
        path = require(‘path’),
        bodyParser = require(‘body-parser’),
        cors = require(‘cors’),
        mongoose = require(‘mongoose’),
        config = require(‘../api/DB’),
        api = require(‘../api/routes/business.route’);

        then lower in the serve.js file in the const app variable include:

        const app = express();
        app.use(bodyParser.json());
        app.use(cors());
        app.use(‘/business’,api);

        Reply
    • In business.service.ts file the uri variable change it to ‘/business’. In Server.js change port to 4200 and remove process.ENV ||.

      Reply
  7. Same problem here tried to restart nodemon but now i cannot run error 48 on my ubuntu.. Have you tried to edit the service change to uri = ‘/business ‘ only? Thanks

    Reply
  8. Hi! Good tutorial.
    i’m a beginner in angular and I meet a problem when i run nodemon server, can you help me to understand this error!
    That’s my error code:

    [nodemon] 1.18.7
    [nodemon] to restart at any time, enter `rs`
    [nodemon] watching: *.*
    [nodemon] starting `node server index.js`
    internal/modules/cjs/loader.js:582
    throw err;
    ^

    Error: Cannot find module ‘/home/odon/Bureau/angular7CRUD/index.js’
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
    at startup (internal/bootstrap/node.js:285:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
    [nodemon] app crashed – waiting for file changes before starting…

    Reply
    • I fixed my issue by first running $npm i in the /api directory
      Then I ran $npx nodemon server.js

      NOTE in the second node command you want to use npx not npm.

      $ npx nodemon server.js
      [nodemon] 1.18.11
      [nodemon] to restart at any time, enter `rs`
      [nodemon] watching: *.*
      [nodemon] starting `node server.js`
      Listening on port 4000
      Database is connected

      Reply
  9. Hi,
    This is a nice tutorial so far, but I’m getting an error while edit

    enableProdMode() to enable the production mode.
    core.js:14597 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘edit/5c0504f2c89130599b6199f7’
    Error: Cannot match any routes. URL Segment: ‘edit/5c0504f2c89130599b6199f7’
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at

    Reply
  10. Thank you for your tutorial.

    By the way, is there any way to get a page refresh a data after edit page?
    I try to get it work even with a navigate to homepage then back to business page but it doesn’t work

    Reply
  11. hello,
    thank you for your tutoriel, it was very helpful.
    I think there is a little mistake in the text you wrote at the begining of paragraph #13.
    you say :
    “Now, we need to create two folders inside the root folder called routes and models.”

    i think you should add the word “api” so the sentence would become:
    “Now, we need to create two folders inside the api root folder called routes and models.”

    Regards

    Reply
  12. Hi kunal,
    I am issue when we migrated our Angular 4 application served up via nodejs to Angular 7. All the migration went smooth and was able to make the necessary coding changes. But I keep getting the following error – “ERROR in ./node_modules/jsonpath/generated/parser.js
    Module not found: Error: Can’t resolve ‘fs’… ” along with similar error for ‘path’ … So then I realized that while building the app it is trying to compile the server.js file as well and that is where both the require(‘fs’) and require(‘path’) are in the code. I am not sure what in addition we have to do here in Angular 7 so this error doesn’t occur. Any help is greatly appreciated.
    Thanks

    Reply
  13. Hi

    Thanks for the tutorial. I had a few errors with delete function, and mongose functions, and had to copy paste your code from github to make it work.

    Please, what is the easiest way to make the initial homepage UPDATE whenever there is an update or deletion ?

    Also, what’s the easiest and most efficient sanitizing methods that would be of use here server side I mean to avoid mysql injection

    Reply
  14. // plz add port variable in app.listen like this so node server is available
    const server = app.listen(port,function(){
    console.log(‘Listening on port ‘ + port);
    });

    Reply
  15. Every is working fine but data in updating in real time. i am pretty new in this. Suppose i have edited a business and cam back t business list but nothing reflected until i refresh the page. Please help..

    Reply
  16. to have the page update automatically after an edit, change the business service “updateBusiness()” so it no longer subscribes response, and return the response instead:

    updateBusiness(person_name, business_name, business_gst_number,id){
    const obj = {
    person_name: person_name,
    business_name: business_name,
    business_gst_number: business_gst_number
    };
    return this.http.post(`${this.uri}/update/${id}`, obj);
    }

    Then, in your gst-edit.component, subscribe to the response so you know when the async call is finished, then navigate back to the business page:

    updateBusiness(person_name, business_name, business_gst_number){
    this.route.params.subscribe(params => {
    this.bs.updateBusiness(person_name, business_name, business_gst_number, params[‘id’]).subscribe((data: string) =>{
    console.log(data);
    this.router.navigate([‘business’]);
    });
    })
    }

    To auto-update on a delete, create a function that pulls the records just like ngOnInit() does:

    getBusinesses(): void {
    this.bs
    .getBusinesses()
    .subscribe((data: Business[]) => {
    this.businesses = data;
    })
    }

    Change the deleteBusiness() function as follows:

    deleteBusiness(id) {
    this.bs.deleteBusiness(id).subscribe(res => {
    console.log(‘Deleted’);
    this.getBusinesses();
    });
    }

    You can now also replace the function in ngOnInit() with your new function:

    ngOnInit() {
    this.getBusinesses();
    }

    Reply
    • Thanks Luke;

      to piggyback on this idea, I added code to navigate to the business list page and update on adding a business.

      in business.service.ts:

      addBusiness(person_name, business_name, business_gst_number) {
      const obj = {
      person_name: person_name,
      business_name: business_name,
      business_gst_number: business_gst_number
      };
      console.log(obj);
      return this.http.post(`${this.uri}/add`, obj);
      }

      In gst-add.component.ts:

      addBusiness(person_name, business_name, business_gst_number) {
      this.route.params.subscribe(params => {
      this.bs.addBusiness(person_name, business_name, business_gst_number).subscribe((data:string) =>{
      console.log(data);
      this.router.navigate([‘business’]);
      });
      })
      }

      Reply
  17. For some reason my update doesn’t work…i made some few changes to be able to view the edit page..once i edit the information and try to update…it throws an error..as well as crushes my back end..wondering there was an issue in routing ..or we sending data the wrong way…anyone who has encountered similar issue and figured it out would appreciate any ideas..

    errors

    throw er; // Unhandled ‘error’ event..this pops up on my console..together with app crashed waiting for file changes before starting..

    when i inspect my page on the browser…i get bellow error
    Failed to load :4000/business/update/5c58867ae9b49122530bbfb8:1 F
    resource: net::ERR_CONNECTION_REFUSED

    Reply
    • I could solve this error by removing next in update in business.route.js
      // Defined update route
      businessRoutes.route(‘/update/:id’).post(function (req, res) {

      and also implemented changes suggested by Luke Harris for auto-refresh after successful update.

      Reply
  18. Thanks a lot Krunal.

    After searching, and following loads of video tutorials, I have found what I was looking … A Simple Mean Stack Tutorial that works. I wanted to know how the back end and the front end connects. Its all there!!!

    Reply
  19. “If you have not installed the MongoDB database then install it…”

    could someone please give instructions to install the MongoDB database? I have installed the node package for MongoDB but I don’t see where there are instructions to install the database.

    Reply
    • edit: I am getting a 400 error when I try to add a business so I believe my problem is missing this step… I get the same error both on the code I built from the tutorial and on the code that i cloned from github.

      Reply
      • edit: my issue was that I was trying to enter a non-numeric entry for the GST Number.

        To validate this field to be sure it’s a number, in gst-add.component.ts, replace this line:
        business_gst_number: [”, Validators.required ]

        with this line:
        business_gst_number: [”, Validators.compose([
        Validators.required,
        Validators.pattern(‘[0-9]+’)
        ]) ]

        Then, in gst-add.component.ts, add this block under the “business gst number is required” div:

        Business GST Number must be an integer.

        Reply
  20. I was getting a 400 error trying to enter a non-numeric entry for the GST Number.

    To validate this field to be sure it’s a number, in gst-add.component.ts, replace this line:
    business_gst_number: [”, Validators.required ]

    with this line:
    business_gst_number: [”, Validators.compose([
    Validators.required,
    Validators.pattern(‘[0-9]+’)
    ]) ]

    Then, in gst-add.component.ts, add this block under the “business gst number is required” div:

    Business GST Number must be an integer.

    Reply
  21. Edit Function is not working. It show error :
    ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘edit/5c80a7850c013406ecac4c74’
    Error: Cannot match any routes. URL Segment: ‘edit/5c80a7850c013406ecac4c74’
    Please help me to solve this.

    Reply
    • Hi Lovely,

      In gst-get.component.html change this router link from this:
      [routerLink]=”[‘/edit’, business._id]”

      To this:
      [routerLink]=”[‘/business/edit’, business._id]”

      Also, in your business.route.js update route function remove the ‘next’ param.
      Change from this:

      Business.findById(req.params.id, function(err, next, business)

      To this:
      Business.findById(req.params.id, function(err, business)

      Reply
      • Hi Lala,

        I had the same problem as Lala, but adding your changes did not help. adding /business to the router link makes an incorrect url (buiness/business/edit/id) and removing the next in the route did not change it. I still get this error:

        Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘edit/5ca95027e4b02b44b4f31181’
        Error: Cannot match any routes. URL Segment: ‘edit/5ca95027e4b02b44b4f31181’

        Any ideas?

        Reply
  22. I have tried each and every step but add, display data didn’t work, there is no error while compiling, please help.

    Reply
  23. thank you for this angular code understanding.
    did you have code for backend using mysql?
    If yes then please send to me.
    I really need it.

    Reply
  24. hii Kunal I Get This Error :

    headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) }
    ​message: “Http failure response for http://localhost:4000/business: 0 Unknown Error”
    ​name: “HttpErrorResponse”
    ​ok: false
    ​status: 0
    ​statusText: “Unknown Error”
    ​url: “http://localhost:4000/business”
    ​: Object { constructor: HttpErrorResponse() }

    Reply
  25. hii Kunal I Get Error In Post Data To Mongo Db …

    headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) }
    ​message: “Http failure response for http://localhost:4000/business: 0 Unknown Error”
    ​name: “HttpErrorResponse”
    ​ok: false
    ​status: 0
    ​statusText: “Unknown Error”
    ​url: “http://localhost:4000/business”
    ​: Object { constructor: HttpErrorResponse() }

    Reply
  26. Hii Kunal I Get This Error Please Reply…

    error: “nnnnErrornnnCannot POST /business/addnnn”

    headers: Object { normalizedNames: Map(0), lazyUpdate: null, lazyInit: lazyInit()
    }
    ​message: “Http failure response for http://localhost:4200/business/add: 404 Not Found”
    ​name: “HttpErrorResponse”
    ​ok: false
    ​status: 404
    ​statusText: “Not Found”
    ​url: “http://localhost:4200/business/add”
    ​: {…}
    ​​constructor: function HttpErrorResponse()​​
    : {…}
    ​​​constructor: function HttpResponseBase()​​​
    : {…}
    ​​​​__defineGetter__: function __defineGetter__()
    ​​​​__defineSetter__: function __defineSetter__()
    ​​​​__lookupGetter__: function __lookupGetter__()
    ​​​​__lookupSetter__: function __lookupSetter__()
    ​​​​__proto__:
    ​​​​constructor: function Object()
    ​​​​hasOwnProperty: function hasOwnProperty()
    ​​​​isPrototypeOf: function isPrototypeOf()
    ​​​​propertyIsEnumerable: function propertyIsEnumerable()
    ​​​​toLocaleString: function toLocaleString()
    ​​​​toSource: function toSource()
    ​​​​toString: function toString()​​​​
    ValueOf: function valueOf()
    ​​​​: function __proto__()
    ​​​​: function __proto__()

    Reply
  27. I would like to try this with a cloud mongodb instead of using a local mongodb. What would need to be changed to do this?

    Reply
    • See Lala’s fix above for the server side business.route.js – you need to remove the next param from the callback function on findById(); also instead of return next(…) you should return something like this:
      res.status(400).send(err);

      Ignore the client side change in that comment, should just remove the leading slash from Edit.

      Reply
  28. //get-edit.component.ts

    updateBusiness(person_name,business_name,business_gst_number){

    this.route.params.subscribe((params)=>{
    this.bs.updateBusiness(person_name, business_name, business_gst_number, params[‘id’]).subscribe((data:any)=>{
    console.log(data)
    });
    this.router.navigate([‘business’]);
    })
    }

    //business.service.ts file

    updateBusiness(person_name,business_name,business_gst_number,id){
    const obj={
    person_name:person_name,
    business_name:business_name,
    business_gst_number:business_gst_number

    };
    return this.http.put(`${url}/update/${id}`,obj);
    }

    Reply
  29. Thank you very much for this remarkable course.
    I have two small remarks :
    1. to install nodemon, you need to be root and add -g option : “sudo npm install -g nodemon –save””
    2. you should launch “ng serve” after having launch the server.
    That’s all !

    Reply
  30. hi, i have been following the tutorial but can’t start nodemon server, i get this error:
    PS E:\Projects\Angular\angular7CRUD\api> nodemon server
    [nodemon] 1.19.0
    [nodemon] to restart at any time, enter `rs`
    [nodemon] watching: *.*
    [nodemon] starting `node server.js`
    E:\Projects\Angular\angular7CRUD\api\server.js:1
    (function (exports, require, module, __filename, __dirname) { ��c
    ^

    SyntaxError: Invalid or unexpected token
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:754:12
    at startup (internal/bootstrap/node.js:283:19)
    [nodemon] app crashed – waiting for file changes before starting…

    i can’t find a solution, can anyone help me pleae 🙂

    Reply
  31. Well. after several hours of trying to solve this, the answer was a bit embarrassing.
    i had my server.js and DB.js files with some hidden chars that started the file, therefore they were not executing correctly (i should have happened by copying the content, along with some hidden format or something), now i got the server running, and going to try to finish this great guide.

    Reply
  32. Hello sir..where to create api folder??
    inside src or inside app or anywhere else…there is error showing in server.js file that
    const express = require(‘express’),
    path = require(‘path’),
    bodyParser = require(‘body-parser’),
    cors = require(‘cors’),
    mongoose = require(‘mongoose’),
    config = require(‘./DB’);

    mongoose not found and body parser not fount etc.

    Reply
  33. Amazing POST for MEAN stack beginners. Thanks Krunal. I also faced the refresh issue and solved it after
    calling this.router.navigate([‘business’]); inside subscribe.

    Update example:
    updateBusiness(person_name, business_name, business_gst_number) {
    this.route.params.subscribe(params => {
    this.bs.updateBusiness(person_name, business_name, business_gst_number, params.id).subscribe(res => {
    alert(res);
    this.router.navigate([‘business’]);
    }
    );
    });
    }

    Vijaya from India

    Reply
  34. in the step
    So first, write the following code inside the gst-edit.component.ts file.

    you missed the actual update code, so it won’t work.
    The missing code is:

    updateBusiness(person_name, business_name, business_gst_number) {
    this.route.params.subscribe(params => {
    this.bs.updateBusiness(person_name, business_name, business_gst_number, params[‘id’]);
    this.router.navigate([‘business’]);
    });

    Thanks!

    Reply
  35. also in business routes you have this line
    Business.findById(req.params.id, function(err, next, business) {

    which is wrong, and in your github, the working version, is
    Business.findById(req.params.id, function(err, business) {

    otherwise the backend server crashes with TypeError: next is not a function

    Otherwise, thanks for the tutorial!

    Reply
  36. HI,
    I wanted to know, if i can check the existing data in DB and SHOULD NOT allow the user to enter the same user name/business name that already exists in DB.

    Can you please help me with this

    Reply
  37. HI,
    When I update a business row , I navigate back to ‘business’ route to get a list of all business routes.
    I added the line this.router.navigate([‘business’]);
    updateBusiness(person_name, business_name, business_gst_number) {
    this.route.params.subscribe(params => {
    this.bs.updateBusiness(person_name, business_name, business_gst_number, params[‘id’]);
    this.router.navigate([‘business’]);
    });
    }

    However I noticed that on the list of business rows I change is NOT listed, although the row is updated correctly in Mongodb.
    Maybe the call to this.router.navigate([‘business’]); is performed before the update takes place (async?)
    How can I correct this.

    Many Thanks,
    Wim.

    Reply
  38. excellent article, really helped me get started using Mongo and Angular.Has one mistake about the business edit routing but the comments are all over it!

    Reply
  39. Hello,
    Thank you for the article however I have an issue here, so how can I fixe it? please
    export class AppComponent {
    title = ‘angular7crud’;
    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();
    }
    }
    }
    ERROR in src/app/app.component.ts(14,35): error TS2345: Argument of type ‘(event: Event) => void’ is not assignable to parameter of type ‘(value: Event) => void’. Types of parameters ‘event’ and ‘value’ are incompatible.
    Type ‘import(“D:/Angular/angular7crud/node_modules/@angular/router/src/events”).Event’ is not assignable to type ‘Event’.
    Type ‘RouterEvent’ is missing the following properties from type ‘Event’: bubbles, cancelBubble, cancelable, composed, and 18 more.

    Reply
  40. Moreover, when I click the edit button I get the following error:
    Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘edit/5d5bdeea119c3d3714eacf92’
    Error: Cannot match any routes. URL Segment: ‘edit/5d5bdeea119c3d3714eacf92’

    Reply
  41. Hi,
    This was a great tutorial . I learned much from this.
    I have one question as well as i am facing this issue in update section.
    When i am updating any new data , after click on Update Business button ‘data updated in database’. But Updated data not reflecting on business list view . When i refreshed the page new data populate .

    Please can you tell me how can do this without refreshing the page ?
    Thanks and Regards

    Reply
  42. On gst-get.component.ts,

    I keep getting this error: import Business from ‘../Business’;

    I already tried to change it or even import it automatically.

    Should it be like this by any chance? import Business from ‘../business.model’;

    Reply
  43. I am implementing similar example referring above example but data don’t bind to table unless click on input field which is outside table. Once I click on input field table shows automatically. I want to show table data on component loads. I am calling a component in app.component (trough Menu) using router link .

    Reply
  44. Hi Sir,

    Thank you for this great tutorial.
    I have some doubt. How can I join two collections and get the result and return back to angular component.

    Please help me. I am using above code for my custom application. I stucked in joining of collections.
    Waiting for reply.

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.