In this tutorial, I will show you how to build an Angular 10 CRUD Application to consume Web APIs, display, modify & search data.
Other versions:
– Angular 8 CRUD example with Web API
– Angular 11 CRUD example with Web API
– Angular 12 CRUD example with Web API
– Angular 13 CRUD example with Web API
– Angular 14 CRUD example with Web API
– Angular 15 CRUD example with Web API
Fullstack CRUD Application:
– Angular 10 + Node.js Express + MySQL example
– Angular 10 + Node.js Express + MongoDB example
– Angular 10 + Node.js Express + PostgreSQL example
– Angular 10 + Spring Boot + MySQL example
– Angular 10 + Spring Boot + PostgreSQL example
– Angular 10 + Spring Boot + MongoDB example
– Angular 10 + Django example
– Angular 10 + Django + MySQL example
– Angular 10 + Django + PostgreSQL example
– Angular 10 + Django + MongoDB example
Authentication: Angular 10 JWT Authentication example with Web Api
More Practice:
– Angular 10 Form Validation example (Reactive Forms)
– Angular 10 File upload example with progress bar
– Angular 10 Multiple Files upload example
Contents
- Overview of Angular 10 CRUD Application
- Web API
- Angular App Component Diagram
- Setup Angular 10 Project
- Project Structure
- Set up App Module
- Define Routes for Angular AppRoutingModule
- Add Navbar and Router View to Angular CRUD App
- Create Data Service
- Create Angular Components
- Run the Angular App
- Source Code
- Conclusion
- Further Reading
Overview of Angular 10 CRUD Application
We will build an Angular 10 front-end Tutorial Application in that:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- There is a Search bar for finding Tutorials by title.
Here are screenshots of our Angular CRUD Application.
– Create a Tutorial:
– Retrieve all Tutorials:
– Click on Edit button to update a Tutorial:
On this Page, you can:
- change status to Published using Publish button
- delete the Tutorial using Delete button
- update the Tutorial details with Update button
If you want to implement Form Validation, please visit:
Angular 10 Form Validation example (Reactive Forms)
– Search Tutorials by title:
Web API
The introduction above is for Angular Client with assumption that we have a Server exporting REST APIs:
Methods | Urls | Actions |
---|---|---|
POST | /api/tutorials | create new Tutorial |
GET | /api/tutorials | retrieve all Tutorials |
GET | /api/tutorials/:id | retrieve a Tutorial by :id |
PUT | /api/tutorials/:id | update a Tutorial by :id |
DELETE | /api/tutorials/:id | delete a Tutorial by :id |
DELETE | /api/tutorials | delete all Tutorials |
GET | /api/tutorials?title=[keyword] | find all Tutorials which title contains keyword |
You can find step by step to build a Server like this in one of these posts:
– Express, Sequelize & MySQL
– Express, Sequelize & PostgreSQL
– Express, Sequelize & SQL Server
– Express & MongoDb
– Spring Boot & MySQL
– Spring Boot & PostgreSQL
– Spring Boot & MongoDB
– Spring Boot & SQL Server
– Spring Boot & H2
– Spring Boot & Cassandra
– Spring Boot & Oracle
– Python/Django & MySQL
– Python/Django & PostgreSQL
– Python/Django & MongoDB
All of them can work well with this Angular App.
Angular 10 CRUD App Component Diagram
– The App
component is a container with router-outlet
. It has navbar that links to routes paths via routerLink
.
– TutorialsList
component gets and displays Tutorials.
– Tutorial
component has form for editing Tutorial’s details based on :id
.
– AddTutorial
component has form for submission new Tutorial.
– These Components call TutorialService
methods which use Angular HTTPClient
to make HTTP requests and receive responses.
Setup Angular 10 Project
Let’s open cmd and use Angular CLI to create a new Angular Project as following command:
ng new Angular10Crud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
We also need to generate some Components and Services:
ng g s services/tutorial
ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list
Now you can see that our project directory structure looks like this.
Project Structure
Let me explain it briefly.
– There are 3 components: tutorials-list
, tutorial-details
, add-tutorial
.
– tutorial.service
has methods for sending HTTP requests to the Apis.
– app-routing.module.ts defines routes for each component.
– app
component contains router view and navigation bar.
– app.module.ts
declares Angular components and import necessary modules.
Set up App Module
Open app.module.ts and import FormsModule
, HttpClientModule
:
...
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [ ... ],
imports: [
...
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Define Routes for Angular AppRoutingModule
There are 3 main routes:
– /tutorials
for tutorials-list
component
– /tutorials/:id
for tutorial-details
component
– /add
for add-tutorial
component
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TutorialsListComponent } from './components/tutorials-list/tutorials-list.component';
import { TutorialDetailsComponent } from './components/tutorial-details/tutorial-details.component';
import { AddTutorialComponent } from './components/add-tutorial/add-tutorial.component';
const routes: Routes = [
{ path: '', redirectTo: 'tutorials', pathMatch: 'full' },
{ path: 'tutorials', component: TutorialsListComponent },
{ path: 'tutorials/:id', component: TutorialDetailsComponent },
{ path: 'add', component: AddTutorialComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Let’s open src/app.component.html, this App
component is the root container for our application, it will contain a nav
element.
<div>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a href="#" class="navbar-brand">bezKoder</a>
<div class="navbar-nav mr-auto">
<li class="nav-item">
<a routerLink="tutorials" class="nav-link">Tutorials</a>
</li>
<li class="nav-item">
<a routerLink="add" class="nav-link">Add</a>
</li>
</div>
</nav>
<div class="container mt-3">
<router-outlet></router-outlet>
</div>
</div>
Create Data Service
This service will use Angular HTTPClient
to send HTTP requests.
You can see that its functions includes CRUD operations and finder method.
services/tutorial.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
const baseUrl = 'http://localhost:8080/api/tutorials';
@Injectable({
providedIn: 'root'
})
export class TutorialService {
constructor(private http: HttpClient) { }
getAll(): Observable<any> {
return this.http.get(baseUrl);
}
get(id): Observable<any> {
return this.http.get(`${baseUrl}/${id}`);
}
create(data): Observable<any> {
return this.http.post(baseUrl, data);
}
update(id, data): Observable<any> {
return this.http.put(`${baseUrl}/${id}`, data);
}
delete(id): Observable<any> {
return this.http.delete(`${baseUrl}/${id}`);
}
deleteAll(): Observable<any> {
return this.http.delete(baseUrl);
}
findByTitle(title): Observable<any> {
return this.http.get(`${baseUrl}?title=${title}`);
}
}
Create Angular Components
As you’ve known before, there are 3 components corresponding to 3 routes defined in AppRoutingModule
.
Add new Item Component
This component has a Form to submit new Tutorial with 2 fields: title
& description
. It calls TutorialService.create()
method.
components/add-tutorial/add-tutorial.component.ts
import { Component, OnInit } from '@angular/core';
import { TutorialService } from 'src/app/services/tutorial.service';
@Component({
selector: 'app-add-tutorial',
templateUrl: './add-tutorial.component.html',
styleUrls: ['./add-tutorial.component.css']
})
export class AddTutorialComponent implements OnInit {
tutorial = {
title: '',
description: '',
published: false
};
submitted = false;
constructor(private tutorialService: TutorialService) { }
ngOnInit(): void {
}
saveTutorial(): void {
const data = {
title: this.tutorial.title,
description: this.tutorial.description
};
this.tutorialService.create(data)
.subscribe(
response => {
console.log(response);
this.submitted = true;
},
error => {
console.log(error);
});
}
newTutorial(): void {
this.submitted = false;
this.tutorial = {
title: '',
description: '',
published: false
};
}
}
components/add-tutorial/add-tutorial.component.html
<div style="width: 400px; margin: auto;">
<div class="submit-form">
<div *ngIf="!submitted">
<div class="form-group">
<label for="title">Title</label>
<input
type="text"
class="form-control"
id="title"
required
[(ngModel)]="tutorial.title"
name="title"
/>
</div>
<div class="form-group">
<label for="description">Description</label>
<input
class="form-control"
id="description"
required
[(ngModel)]="tutorial.description"
name="description"
/>
</div>
<button (click)="saveTutorial()" class="btn btn-success">Submit</button>
</div>
<div *ngIf="submitted">
<h4>You submitted successfully!</h4>
<button class="btn btn-success" (click)="newTutorial()">Add</button>
</div>
</div>
</div>
List of items Component
This component calls 3 TutorialService
methods:
getAll()
deleteAll()
findByTitle()
components/tutorials-list/tutorials-list.component.ts
import { Component, OnInit } from '@angular/core';
import { TutorialService } from 'src/app/services/tutorial.service';
@Component({
selector: 'app-tutorials-list',
templateUrl: './tutorials-list.component.html',
styleUrls: ['./tutorials-list.component.css']
})
export class TutorialsListComponent implements OnInit {
tutorials: any;
currentTutorial = null;
currentIndex = -1;
title = '';
constructor(private tutorialService: TutorialService) { }
ngOnInit(): void {
this.retrieveTutorials();
}
retrieveTutorials(): void {
this.tutorialService.getAll()
.subscribe(
data => {
this.tutorials = data;
console.log(data);
},
error => {
console.log(error);
});
}
refreshList(): void {
this.retrieveTutorials();
this.currentTutorial = null;
this.currentIndex = -1;
}
setActiveTutorial(tutorial, index): void {
this.currentTutorial = tutorial;
this.currentIndex = index;
}
removeAllTutorials(): void {
this.tutorialService.deleteAll()
.subscribe(
response => {
console.log(response);
this.retrieveTutorials();
},
error => {
console.log(error);
});
}
searchTitle(): void {
this.tutorialService.findByTitle(this.title)
.subscribe(
data => {
this.tutorials = data;
console.log(data);
},
error => {
console.log(error);
});
}
}
components/tutorials-list/tutorials-list.component.html
<div class="list row">
<div class="col-md-8">
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Search by title"
[(ngModel)]="title"
/>
<div class="input-group-append">
<button
class="btn btn-outline-secondary"
type="button"
(click)="searchTitle()"
>
Search
</button>
</div>
</div>
</div>
<div class="col-md-6">
<h4>Tutorials List</h4>
<ul class="list-group">
<li
class="list-group-item"
*ngFor="let tutorial of tutorials; let i = index"
[class.active]="i == currentIndex"
(click)="setActiveTutorial(tutorial, i)"
>
{{ tutorial.title }}
</li>
</ul>
<button class="m-3 btn btn-sm btn-danger" (click)="removeAllTutorials()">
Remove All
</button>
</div>
<div class="col-md-6">
<div *ngIf="currentTutorial">
<h4>Tutorial</h4>
<div>
<label><strong>Title:</strong></label> {{ currentTutorial.title }}
</div>
<div>
<label><strong>Description:</strong></label>
{{ currentTutorial.description }}
</div>
<div>
<label><strong>Status:</strong></label>
{{ currentTutorial.published ? "Published" : "Pending" }}
</div>
<a class="badge badge-warning" routerLink="/tutorials/{{ currentTutorial.id }}">
Edit
</a>
</div>
<div *ngIf="!currentTutorial">
<br />
<p>Please click on a Tutorial...</p>
</div>
</div>
</div>
If you click on Edit button of any Tutorial, You will be directed to Tutorial page with url: /tutorials/:id
.
You can add Pagination to this Component, just follow instruction in the post:
Angular 10 Pagination example | ngx-pagination
Item details Component
For getting data & update, delete the Tutorial, this component will use 3 TutorialService
methods:
get()
update()
delete()
components/tutorial-details/tutorial-details.component.ts
import { Component, OnInit } from '@angular/core';
import { TutorialService } from 'src/app/services/tutorial.service';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-tutorial-details',
templateUrl: './tutorial-details.component.html',
styleUrls: ['./tutorial-details.component.css']
})
export class TutorialDetailsComponent implements OnInit {
currentTutorial = null;
message = '';
constructor(
private tutorialService: TutorialService,
private route: ActivatedRoute,
private router: Router) { }
ngOnInit(): void {
this.message = '';
this.getTutorial(this.route.snapshot.paramMap.get('id'));
}
getTutorial(id): void {
this.tutorialService.get(id)
.subscribe(
data => {
this.currentTutorial = data;
console.log(data);
},
error => {
console.log(error);
});
}
updatePublished(status): void {
const data = {
title: this.currentTutorial.title,
description: this.currentTutorial.description,
published: status
};
this.tutorialService.update(this.currentTutorial.id, data)
.subscribe(
response => {
this.currentTutorial.published = status;
console.log(response);
},
error => {
console.log(error);
});
}
updateTutorial(): void {
this.tutorialService.update(this.currentTutorial.id, this.currentTutorial)
.subscribe(
response => {
console.log(response);
this.message = 'The tutorial was updated successfully!';
},
error => {
console.log(error);
});
}
deleteTutorial(): void {
this.tutorialService.delete(this.currentTutorial.id)
.subscribe(
response => {
console.log(response);
this.router.navigate(['/tutorials']);
},
error => {
console.log(error);
});
}
}
components/tutorial-details/tutorial-details.component.html
<div style="width: 400px; margin: auto;">
<div *ngIf="currentTutorial" class="edit-form">
<h4>Tutorial</h4>
<form>
<div class="form-group">
<label for="title">Title</label>
<input
type="text"
class="form-control"
id="title"
[(ngModel)]="currentTutorial.title"
name="title"
/>
</div>
<div class="form-group">
<label for="description">Description</label>
<input
type="text"
class="form-control"
id="description"
[(ngModel)]="currentTutorial.description"
name="description"
/>
</div>
<div class="form-group">
<label><strong>Status:</strong></label>
{{ currentTutorial.published ? "Published" : "Pending" }}
</div>
</form>
<button
class="badge badge-primary mr-2"
*ngIf="currentTutorial.published"
(click)="updatePublished(false)"
>
UnPublish
</button>
<button
*ngIf="!currentTutorial.published"
class="badge badge-primary mr-2"
(click)="updatePublished(true)"
>
Publish
</button>
<button class="badge badge-danger mr-2" (click)="deleteTutorial()">
Delete
</button>
<button
type="submit"
class="badge badge-success"
(click)="updateTutorial()"
>
Update
</button>
<p>{{ message }}</p>
</div>
<div *ngIf="!currentTutorial">
<br />
<p>Cannot access this Tutorial...</p>
</div>
</div>
Run the Angular 10 App
You can run this App with command: ng serve
.
If you use this front-end app for one of these back-end Rest APIs:
– Express, Sequelize & MySQL
– Express, Sequelize & PostgreSQL
– Express, Sequelize & SQL Server
– Express & MongoDb
– Spring Boot & MySQL
– Spring Boot & PostgreSQL
– Spring Boot & MongoDB
– Spring Boot & SQL Server
– Spring Boot & H2
– Spring Boot & Cassandra
– Spring Boot & Oracle
– Python/Django & MySQL
– Python/Django & PostgreSQL
– Python/Django & MongoDB
It configures CORS for port 8081
, so you have to run command: ng serve --port 8081
instead.
This is our Angular 10 CRUD application demo and brief instruction:
Conclusion
Today we’ve built an Angular 10 CRUD Application successfully working with Web API. Now we can, display, modify, delete or search data in a clean way. I hope you apply it in your project at ease.
You can also find how to implement Authentication with the post:
Angular 10 JWT Authentication example with Web Api
Or you can add Pagination Component:
Angular 10 Pagination example | ngx-pagination
Implement File Upload Component:
Angular 10 File upload example with progress bar
Happy learning, see you again!
Further Reading
Serverless with Firebase:
– Angular 10 Firebase CRUD Realtime Database
– Angular 10 Firestore CRUD with AngularFireStore
– Firebase Storage + Angular 10: File Upload/Display/Delete example
Integration:
– Integrate Angular 10 with Node.js Restful Services
– Integrate Angular with Spring Boot Rest API
Source Code
You can find the complete source code for this tutorial on Github.
Form Validation:
Angular 10 Form Validation example (Reactive Forms)
Code is working fine.Thanks lot
Nice Angular tutorial. Thanks for sharing.
Hello Bezkode,
First, let me thank you for your work, it’s really great and easy to follow, and it’s helping me a lot right now.
I am new in Angular. I followed all your steps n my app is running successfully. But thing I am not getting how to work in MySQL .
As per showing in project demo video both port working fine i.e. http://localhost:4200/add and http://localhost:8081/.
But I am not able to understand how to work in MySQL.
mysql> describe tutorials.
Thank you in advanced.
It is very useful blog for freshers like me, Thanks a lot keep sharing
Adding some more details to the above comment
downloaded zip folder from Github
Running on -> ng serve –port 8081
My app is running successfully but when I am clicking on submit button, nothing happens. Other buttons are working fine
It would be so kind of you, if you can respond as soon as possible as it is urgent!
Thanking you in advance.
Hi, please show me the browser console log 🙂
bezkoder you done a wondeful job, but I have a suggestion for you to create a crud of ruby on rails with and without restful. one more thing create a crud operation of multi relatio DB that that have one to many, many to many and one to one relation, that would be very helpful. thanks
Error: src/app/components/tutorials-list/tutorials-list.component.html:8:9 – error NG8002: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.
At line [(ngModel)]=”title”
thx much for the invitation :).
PS: How are you? I am from France 🙂 very good forum 🙂 mixx
Dear Bezkoder,
Thank you very much for your tutorial. For the purpose of my modified app, I would like to add the “add” button on the front page. However when I put the
Add
code in tutorials-list.component.html, it directs to tutorials/add, not /add!
This is odd because in app-routing.module.ts, it says
const routes: Routes = [
… { path: ‘add’, component: AddTutorialComponent }
Is there an easy way to fix that, and make a button linking to http://localhost:8081/add to http://localhost:8081/tutorials?
Thanks,
Anna K.
Hi, thanks a lot for this great tutorial !!
Everything works as expected but my edit button doesn’t work, any fix for this ?
Hello bezkoder, thank you for these tutorials really well done. Thank you.
hi thank u for your amazing tutorial ,i have a problem i thought u can help me with it ,im building Mean app so when i run my server and test my functions in postman everything is good but when i run the whole project i got tis error :Access to XMLHttpRequest at ‘http://localhost:4000/api/’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header has a value ‘http://localhost:4000/api/’ that is not equal to the supplied origin
i saerched for it and everyone say that u should add :
res.header(“Access-Control-Allow-Origin”, “*,http//localhost:4000/api/”);
to your code but it didnt worked for me so yeah ..
thnk u
Hi, this is because CORS configuration at backend side for port 8081,so you need to run client with
ng serve --port 8081
Hello Bezkode,
First, let me thank you for your work, it’s really great and easy to follow, and it’s helping me a lot right now.
I have something similar to Aicha, but I changed the frontend starting port to 8081. Backend listening to 8000.
Now I get this error : zone-evergreen.js:2845 GET http://localhost:3000/api/temperatures net::ERR_CONNECTION_REFUSE
Is the error due to a residue of an old configuration of the server.js ? If so, I tried npm cache clear and npm cache verify (but I was not sure at all if it would do anything).
I understand that node.js only works with port 3000, can you explain the reason you configure it to listen to port 8000 ?
Screenshot : https://i.postimg.cc/hGXKk3Jx/image.png
Hi, let me explain some points 🙂
– “node.js only works with port 3000”
This is not true. You can configure Node.js express server to work with another port 🙂
– Why I configure the server to listen to port 8080:
This is because I want the server will work with this Angular Client and other clients in my website which send http requests to port 8080 also 🙂
Oh, I did not refresh the page, I’m only seeing your answer now. Thank you for the fast answer time.
Now I’m locked with another problem, but I feel I’m gonna find a solution.
I’m trying to access information inside “Temperatures” the way you do with {{tutorials.title}}
But it is not working. A first guess is that I used lowerCamelCase, maybe it doesn’t like it.
Well, at least now, I can get a list based on the number of element on my collection in the database on the frontend. I’m using Nebular Theme.
Thank you again for your time !
Ps : I wish I could edit or remove my comments to no flood your website 🙂
Hi, don’t mind 🙂 You question and answers can help other people who have the same situation like you 🙂
Nevermind, I found what was wrong.
I started my frontend server with a specific –host which I though was equal to localhost, being the same machine, but I was wrong. Removing the “–host 192.168.x.x” made it works.
Hi! Thanks for this tutorial. I’m having a problem, my html is not showing my data but in console you can see it. Also, my submit button isn’t working. Here is my code, maybe could you help me please? https://github.com/stegarc/DesarrolloAppWeb/tree/master/3erParcial/DeberNodeAngular/ProyectoFrontEnd
Hi, you should run one of the servers that I mentioned in the tutorial 🙂
I used node.js but I already find my mistake, Your tutorial works. Thanks.
Please, I am using angular, mssql and aws lambda. Is there a way to perform the CRUD operation this way? Thank you
Hi,
Why my html page is different to your html page. Should I add any CSS file to this tutorials?
Thanks.
Hi, you can check each css file in the components.
Thanks for your replying. But I don’t find any CSS file in the github project – angular-10-crud-app.
Ah, please check index.html file for Bootstrap. 🙂
I added the bootstrap but still no changes?? there is no styling on my APP
Maybe a little late for you but for others it could help: what I did to get the styles up and running are those two easy steps:
1. in project’s root `npm install –save bootstrap @ng-bootstrap/ng-bootstrap jquery popper.js @angular/localize @angular/[email protected]`
2. in angular.json add “node_modules/bootstrap/dist/css/bootstrap.min.css” to styles as follows
“styles”: [
“node_modules/bootstrap/dist/css/bootstrap.min.css”,
“src/styles.css”
],
With this done you are also able to use the bootstrap NgbModule in your Angular App and setup other nice stuff like ngbDatePickers and so on.
Maybe there is a more common way to install bootstrap but for learning progress it works fine.
Hello bezkoder,
this tutorial is very valuable in that sense that you have described each and every thing very smoothly in it. But i don’t know why i am not getting response on console and error like,
(HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: “Unknown Error”, url: “http://localhost:8080/api/tutorials”, ok: false, …})
I have only tried to implement addTutorial and not getting response.
kindly help me out.
Hi, you should use one of the backend server that I mentioned in the tutorial 🙂
hello,
I run the code on localhost but after clicking on a button or adding a tutorial it is not reflecting in database.
what must have gone wrong? Please reply
Hi, you should give me moe details about the issue, browser log for example.
Sir I am getting CORS issue instead of modifying globalaspx and web.config…
Get and Post is working fine but delete and Put is giving CORS error
Hey, thank you so much for your tutorials! When I click ‘update’ on a tutorial I get the error:
cannot get http://localhost:8080/tutorials/tutorials
this part: this.getTutorial(this.route.snapshot.paramMap.get(‘id’));
does not seem to get the tutorial id but instead gets the name tutorial.
please do you know why?
Hi, the url for specific tutorial with
id=42
must behttp://localhost:8080/tutorials/42
.this.getTutorial(this.route.snapshot.paramMap.get(‘id’));
will get42
and send an HTTP GETtutorials/42
to the server.Hello, I have gotten everything working but mine does not look as nice as yours. Do I need to update my css files to make it look like yours? If so, what do your css files look like?
Hi, you can get the Github source code for all css files, we also add bootstrap in index.html 🙂
please i’m getting an error on the console whenever i add a new item. http://localhost:8080/api/tutorials 404 (not found)
Hi, did you run any backend server in the tutorial?
This tutorial and the Django REST Framework tutorial are AWESOME! Thank you so much for publishing this straightforward tutorial. I’ve spent so many hours trying to find helpful info, yet you simplified it in such a way that I can actually understand it all. Thank you again!
Hi, thank you for your comment. It gives me motivation to make more tutorials in the furture 🙂
Nice tutorial. Just one issue: How can i edit tutorial? the edit link doesn’t work for me.
Hi, please show the browser log.
Hi Web,
Edit link was also not working for me, for me it was that the id field is called _id, but the angular front end uses id.
On the page with the angular 10 front end example code (https://bezkoder.com/angular-10-mongodb-node-express/) there is a snippet which shows you how to modify the mongoose model so that the id field is returned as id. Alternatively, search for currentTutorial.id in tutorials-list.component.html and in tutorial-details.component.ts and replace each instance with currentTutorial._id. I think I found 4 instances covering the edit, update and delete methods.
Hello bezkoder, thank you for these tutorials really well done. Thank you.
Thank you 🙂
Hi, Dear bezkoder .i don’t know how to say thank you for your amazing and helpful tutorial. I search whole tutorials on the internet to help me in my project, but none of those works for me, at last, I found your website and your tutorial fixes my issue. Thanks
Hi, I’m so happy to know that my work helps you. Wish you all the best 🙂