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.
You will create a new Angular project using the following command.
ng new angular7crud cd angular7crud
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
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
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.
- NavigationStart
- NavigationEnd
- NavigationError
- NavigationCancel
- Router
- 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>
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.
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.
- Angular Development Server
- Nodemon server
- 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.
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
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.
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.
// 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!
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.
Why didn’t you use angular material instead of bootstrap? It would be very nice article for me. Anyway, thanks for this article tho.
Why didn’t you use Angular Material instead of bootstrap? it would be very nice. Thanks anyway.
Why didn’t you use Angular Material instead of bootstrap? it would be very nice. Thank you!
Will use for future projects.
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.
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.
Excuse me I meant I used
window.location.href = ‘/business’;
not: window.location.href = `/business/edit/${params[‘id’]}`;
sorry about that
Thanks a lot, it works for me. I had to change the link in the list to the edit component from /edit to /business/edit
Yes I had to do that also to get the Edit link to work:
Edit
actually that breaks the page, what worked for me is to remove the leading / and just use edit – there is another post to that effect below
for me is to remove the leading / and just use edit
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)`
You need to add the addBusiness function. You can refer my GitHub code.
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.
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.
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
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
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..
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.
Thanks , update works as per your solution .. changed to Business.findById(req.params.id, function(err, business, next)
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
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?
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);
In business.service.ts file the uri variable change it to ‘/business’. In Server.js change port to 4200 and remove process.ENV ||.
Hi @Arnold I tried the same that you specify above but still i am also getting same problem that Ifthikar encounter. How can i resolve.
Still same Problem coming for me i have tried above mentionne=d fixes
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
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…
run the nodemon server in /api directory
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
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
You need to change the routerlink in gst-get.component.html file to:Edit
in the gst-edit-html where the[routerlink]=[‘/edit’, business._id] you need to remove the “/” and just have [routerlink]=[‘edit’, business._id]
Update function not working.
Hey can you do this with ms sql instead of mongodb. I tried to do it but i cant get it to work
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
Nice article
Hey, tnx for the article, nice work.
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
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
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
// 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);
});
Exactly this is the correct way 🙂 this will solve issues like @Bert Wilms Says
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..
Very nice article.
Now how to publish this whole project?
By simply using “ng build –prod” command ?
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();
}
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’]);
});
})
}
This is great. I found this really useful.
I’d like to know how I can containerize this entire project using docker.
Great tutorial ! One little mistake though: It needs to be
Add Business
its very good and easy to understand
i am from india
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
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.
Thank You!
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!!!
“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.
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.
edit: Nevermind, my 400 error was from trying to use letters for the business number field.
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.
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.
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.
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)
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?
nevermind, i removed the “/” from “/edit” and it works
Step #3 doesn’t seem to work with Angular 7.2.8. Nothing shows up in the browser.
I have tried each and every step but add, display data didn’t work, there is no error while compiling, please help.
it was really helpful, don’t stop creating such project it helps a lot for freshers
Thanks, really useful boilerplate or starter kit
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.
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() }
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() }
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__()
I am also getting same error while saving data.
http://localhost:4200/business/add 404 (Not Found)
How to resolve this?
hello could you help me ?, where is tje angular root folder i can t find it
hello , i need a help where is the root angular folder , is it in the project or outside , thank you
Great tutorial but it will helpful if use observable so it will update data on the fly
hello Santoch Kori , how to import js file inside server.js , could you help me 🙂
please try with mysql database instead of mongodb…
CRUD operation
please try with mysql database instead of mongodb for same CRUD operation
thanks,
hi thank you
Great post, except that it doesn’t work.
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?
update not working
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.
//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);
}
unable to update data
what to do
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 !
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 🙂
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.
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.
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
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!
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!
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
I am going to try this app this weekend.
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.
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!
Nice tutorial
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.
Whenever I try to submit the data, I get the following error:
http://localhost:4000/business/add 500 (Internal Server Error)
zone-evergreen.js:2952 POST
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’
you have to change /edit by business/edit
Good article for the beginners. Stick to the basic it won’t give you any error. Keep posting.
Cheers!
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
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’;
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 .
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.