3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia

godb) | Adrian Mejia Blog

 

Home Trending Popular About Blog

Coding > Web Development > Angular

Modern MEAN Stack Tutorial with

Docker (Angular, Node, Typescript
and Mongodb)
 Last updated February 27th 2020  4.6k 3 Comments
 angular angularjs mean stack

The MEAN stack allows you to build complete applications using one programming
language: JavaScript. In this tutorial, we made upon the first part (Creating an
Angular app) which built the front-end, and this part builds the backend with a
RESTful API and Database.

REST API with Node.js

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 1/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

We are going to use express-generator and create a folder called server .

First, install the generator packages:

1 npm i -g express-generator

Note: You should have Node and NPM/Yarn installed.

REST API using ExpressJS

Now let’s scaffold the App using the generator:

1 express server -e

Let’s install all its dependencies on the server folder:

1 cd server && npm i

and now let’s make sure it’s working:

1 npm start

Go to localhost on port 3000 and make sure you can see a “Welcome to Express.”

http://localhost:3000/

“ Changes: a3fcacd - REST API using ExpressJS: scaffold

Creating a host alias for the server

We want to run the server to work regardless of the environment where we run it. (It
will be useful for Docker later on)

For that we can create an alias by editing the hosts :

Windows: c:\windows\system32\drivers\etc\hosts
https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 2/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

Linux/Mac: /etc/hosts

Once you can open the file, you drop the following line at the end:

1 127.0.0.1 server

Now you should be able to access the server by visiting:

http://server:3000/

(If you have trouble editing the host file, take a look here)

Creating API routes and responding to requests

Now we are going to create a new route:

1 /api/todos[/:id]

This route will get all our todos, update, and delete them.

Create a new router file called todos in the following path:

1 touch server/routes/todos.js

and add this initial content:

server/routes/todos.js

1 const express = require('express');

2 const router = express.Router();
3
4 const TODOS = [
5 { title: 'Create API to get this list', isDone: true },
6 { title: 'Connect API with Angular', isDone: true },
7 { title: 'Connect server with mongo', isDone: false },
8 { title: 'Publish app', isDone: false },
9 ];
10
11 /* GET /api/todos */
12 router.get('/', async (req, res) => {
13 try {

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 3/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

14 res.json(TODOS);
15 } catch (error) {
16 res.status(500).json({ error });
17 }
18 });
19
20 module.exports = router;

All this is doing is replying to the GET commands and returning a hard-coded list of
todos. We will replace it later to get data from mongo instead.

Then we need to register the route as follows:

server/app.js

1 var todosRouter = require('./routes/todos');

2
3 // ...
4
5 app.use('/api/todos', todosRouter);

The method use registers the new path /api/todos . When we get any call on this
path, our todosRouter will handle it.

You can restart your server or use nodemon to pick up changes and refresh the
browser.

1 ## npm i -g nodemon
2 nodemon server/bin/www

That should get your server running. Now you can see it in action using cURL:

1 curl -XGET server:3000/api/todos

2 ## curl -XGET localhost:3000/api/todos

This command should get you all the lists in JSON format!

In the next step, we will query the server using Angular instead of curl . After that,
we will complete the rest of the operations (update, delete, create).

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 4/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

“ 6f8a502 - Creating API routes and responding to requests

Connecting REST API with Angular App.

Let’s now prepare our angular App to use the server API that we just created.

As you might know, when you run ng serve , it will trigger a development server.
However, our API is an entirely different server. To be able to connect the two, we
need to create a proxy.

Creating a proxy in Angular to talk to the API server

Let’s create a new file that will tell Angular when to look for specific HTTP paths. In
this case, we are going to defer all /api to our express server.

src/proxy.conf.json

1 {
2 "/api": {
3 "target": "http://server:3000",
4 "secure": false
5 }
6 }

(This will need the host alias from the step before)

Then, we have to tell Angular to load this file when we are serving the App. We are
going to do that in the angular.json file.

If you are using the same version of angular CLI, you need to insert this on line 71:

1 "proxyConfig": "src/proxy.conf.json"

For some context, here are the surrounding elements:

angular.json > projects > Todos > architect > serve > options

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 5/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

1 {
2 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 // ...
4 "projects": {
5 "Todos": {
6 // ...
7 "architect": {
8 // ...
9 "serve": {
10 "builder": "@angular-devkit/build-angular:dev-server",
11 "options": {
12 "browserTarget": "Todos:build",
13 "proxyConfig": "src/proxy.conf.json" // <-- Insert this l
14 },
15 // ...
16 },
17 // ...
18 }
19 }},
20 "defaultProject": "Todos"
21 }

Now our App will pass all requests that start with /api to http://localhost:3000
(or whatever path you specified on the proxy.conf).

Next, we are going to make use of these new routes!

“ e81ddb8 - Creating a proxy in Angular to talk to the API server

Using HTTP Client to talk to the server

To talk to the server, we are going to use the HttpClient module.

Let’s go to the app.module and let’s import it:

src/app/app.module.ts

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

2
3 // ...
4
https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 6/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

5 @NgModule({
6 declarations: [
7 AppComponent,
8 TodoComponent
9 ],
10 imports: [
11 BrowserModule,
12 AppRoutingModule,
13 FormsModule,
14 RouterModule.forRoot(routes),
15 HttpClientModule, // <---- import module
16 ],
17 providers: [],
18 bootstrap: [AppComponent]
19 })
20 export class AppModule { }

Now that the HttpClient is available in our App let’s add it to the service and make use
of it.

src/app/todo/todo.service.ts

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

2
3 //...
4
5 const API = '/api/todos';
6
7 //...
8
9 @Injectable({
10 providedIn: 'root'
11 })
12 export class TodoService {
13
14 constructor(private http: HttpClient) { }
15
16 get(params = {}) {
17 return this.http.get(API, { params });
18 }
19
20 // ...

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 7/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

We change the TodoService.get to use HTTP client. However, the component was
responding to a Promise, and the HTTP.get returns an Observable. So, let’s change
it.

Change the getTodos method from the old one to use this one that handles an
observable.

src/app/todo/todo.component.ts

1 getTodos(query = '') {
2 return this.todoService.get(query).subscribe(todos => {
3 this.todos = todos;
4 this.activeTasks = this.todos.filter(todo => !todo.isDone).length;
5 });
6 }

The main difference is that instead of a .then , we are using .subscribe .

Everything else remains the same (for now).

That’s it, let’s test it out!

Run these commands on your terminal:

1 ## run node server

2 nodemon server/bin/www

on another terminal session run also:

1 ## run angular App

2 ng serve

Once you have both running, you can go to http://localhost:4200/all, and you can
verify that it’s coming from your server!

If you are running nodemon , you can change the TODOS on

server/routes/todos.js and refresh the browser, and see how it changes.

But, we don’t want to have hard-coded tasks. Let’s create a proper DB with Mongo.

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 8/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

Setting up MongoDB
It’s time to get MongoDB up and running. If don’t have it installed, you have a couple
of options:

Docker (Windows/macOS/Linux) [Preferred]

Official Website (Windows/macOS/Linux)

Brew (macOS)

We are going to use Docker since it’s an excellent way to have everything running
together with one command. Also, you can deploy it to the cloud and scale it quickly.

Dockerizing the MEAN stack

Let’s get everything running (Node Server, Angular, and Mongo). We will create a
docker-compose file, which is going to list all our services, and we can run them all at
once.

docker-compose.yml

1 version: "3.7"
2
3 services:
4 app:
5 image: node:lts-alpine
6 working_dir: /app
7 volumes:
8 - ./:/app
9 ports:
10 - 4200:4200
11 # --host 0.0.0.0 to listen to all the interfaces from the containe
12 command: >
13 sh -c "npm install &&
14 npx ng serve --host 0.0.0.0"
15
16 server:
https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 9/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

17 image: node:lts-alpine
18 working_dir: /server
19 volumes:
20 - ./server:/server
21 # port 3000 has to match src/proxy.conf.json
22 ports:
23 - 3000:3000
24 depends_on:
25 - mongo
26 environment:
27 MONGO_HOST: mongo
28 command: >
29 sh -c "npm i -g nodemon && npm install && nodemon ./bin/www"
30
31 mongo:
32 image: mongo

All right, now we can get the whole full-stack App running with one command:

1 docker-compose up --build

NOTE: close other terminals running a web server so the ports don’t conflict. The
docker-compose command will create 3 containers for our Angular App, Node Server,
and Mongo DB. You can also see all the logs in one place.

After you wait a minute or so, you should be able to open the App on
http://localhost:4200/.

Now we can make use of mongo. Keep docker-compose running and now let’s
remove the hard-coded tests and use the database.

“ 0763db0 - docker compose

Creating MongoDB schema with Mongoose

Let’s install Mongoose, which is a library for managing MongoDB from Node.js.

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 10/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

1 cd server && npm i [email protected]

NOTE: make sure you installed it on the ./server/package.json , rather than the
client-side packages ./packages.json .

The first thing we need to do is to connect to Mongo when our server starts. Go to
server/app.js and add the following code:

server/app.js

1 const mongoose = require('mongoose');

2
3 // connect to db
4 const user = process.env.MONGO_USER;
5 const mongoPort = process.env.MONGO_PORT || 27017;
6 const mongoHost = process.env.MONGO_HOST || 'localhost';
7 const auth = user ? `${user}:${process.env.MONGO_PASS}@` : '';
8 const DB_STRING = `mongodb://${auth}${mongoHost}:${mongoPort}/todos`;
9
10 console.log(`Running node ${process.version}...`);
11 console.log(`Connecting to DB... ${DB_STRING}`);
12
13 const config = { useNewUrlParser: true, useUnifiedTopology: true};
14 mongoose.connect(DB_STRING, config)
15 .then(() => console.log(`Connected!`))
16 .catch(console.error);

“ 15f6e25 - add db string to connect to mongo

We can pass some ENV variables like MONGO_HOST . If we run it locally, it will use
localhost, but if you run it on Docker, we want to pass a hostname. You can see that
in the docker-compose.yml file.

Now, let’s define our data model for Mongo. Let’s create a folder models inside
server and add a file called “todos.js”.

server/models/todo.js

1 const mongoose = require('mongoose');

2

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 11/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

3 const { Schema, model } = mongoose;

4
5 const TodoSchema = new Schema({
6 title: String,
7 isDone: Boolean,
8 notes: String,
9 updated_at: { type: Date, default: Date.now },
10 });
11
12 module.exports = model('Todo', TodoSchema);

The new schema is defining what fields we want to store and what the types are. The
updated_at will update automatically when we create a new todo.

“ 436b0ad - npm i mongoose

“ b2674f3 - Creating MongoDB schema with Mongoose

Adding all the API routes to modify data in the DB

Let’s add all the routes to create, read, update, and delete data from Mongo.

The Mongoose library provides some convenient methods to do CRUD operations:

** Todo.find**: find data matching a given query. ( {} , get all, while {isDone:
true} get only completed tasks).
** Todo.create**: Create a new todo
** Todo.findByIdAndUpdate**: Find Todo by given id and update its content.
** Todo.findByIdAndDelete**: Find Todo by given id and delete it.
** Todo.deleteMany**: Delete everything matching a given query.

Here are the routes by their matching HTTP verb (GET, PUT, POST, DELETE). In the
next sections, we will test all these routes and go over some more details.

server/routes/todos.js

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 12/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

1 const express = require('express');

2 const router = express.Router();
3
4 const Todo = require('../models/todo');
5
6 /* GET /api/todos */
7 router.get('/', async (req, res) => {
8 try {
9 const list = await Todo.find(req.query);
10 res.json(list);
11 } catch (error) {
12 res.status(500).json({ error });
13 }
14 });
15
16 /* POST /api/todos */
17 router.post('/', async (req, res) => {
18 try {
19 const todo = await Todo.create(req.body);
20 res.json(todo);
21 } catch (error) {
22 res.status(500).json({ error });
23 }
24 });
25
26 /* PUT /api/todos/:id */
27 router.put('/:id', async (req, res) => {
28 try {
29 const options = { new: true };
30 const todo = await Todo.findByIdAndUpdate(req.params.id, req.body,
31 res.json(todo);
32 } catch (error) {
33 res.status(500).json({ error });
34 }
35 });
36
37 /* DELETE /api/todos/:id */
38 router.delete('/:id', async (req, res) => {
39 try {
40 const todo = await Todo.findByIdAndDelete(req.params.id);
41 res.json(todo);
42 } catch (error) {
43 res.status(500).json({ error });
44 }
45 });
46

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 13/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

47 // Beaware: it can delete all data from db if body is empty (DON'T exp
48 /* DELETE /api/todos */
49 router.delete('/', async (req, res) => {
50 try {
51 const todo = await Todo.deleteMany(req.body);
52 res.json(todo);
53 } catch (error) {
54 res.status(500).json({ error });
55 }
56 });
57
58 module.exports = router;

We added many routes to this step. Take your time to go through them. In the next
section, we will test them using curl and then integrated them with Angular.

“ f4f2281 - Adding all all the API routes to modify data in DB

Testing the API CRUD operations

Since we installed a new package, mongoose , we have to run npm install in the
docker containers. Otherwise, file changes are picked up automatically, and you don’t
need to restart.

Stop docker-compose and start it again docker-compose up --build .

Creating a new task and getting lists

You can create a new task using the following command:

1 curl -XPOST server:3000/api/todos -H "Content-Type: application/json" -

Now, let’s see if it’s there:

1 curl -XGET server:3000/api/todos

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 14/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

You should have got something like this:

1 [{"_id":"5edc2a6d0c41d60054ad715f","title":"CRUD API","isDone":false,"u

You can also check Angular on http://localhost:4200/all. The new task should be
there!

Update data with PUT method

If you remember from your routes file, we are using the method PUT to update tasks.

server/routes/todos.js

1 /* PUT /api/todos */
2 router.put('/:id', async (req, res) => {
3 try {
4 const options = { new: true };
5 const todo = await Todo.findByIdAndUpdate(req.params.id, req.body,
6 res.json(todo);
7 } catch (error) {
8 res.json(500, { error });
9 }
10 });

By default findByIdAndUpdate returns the original document. We are passing {

new: true } so we can return the updated document.

For updating a task you need the _id . You can get it from the previous step, when
we listed all the tasks. For my case the _id is 5edc2a6d0c41d60054ad715f , find yours
and replace it in the next command:

1 curl -XPUT server:3000/api/todos/5edc2a6d0c41d60054ad715f -H "Content-T

As you can see in the last update, we can modify existing fields and add new values
like the note field.

Erasing data with the DELETE method

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 15/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

For our todo route, we also defined the DELETE method. Similar to the update, we
need to pass and id .

server/routes/todos.js

1 /* DELETE /api/todos */
2 router.delete('/:id', async (req, res) => {
3 try {
4 const todo = await Todo.findByIdAndDelete(req.params.id);
5 res.json(todo);
6 } catch (error) {
7 res.status(500).json({ error });
8 }
9 });

Again, remember to replace the next call with yout _id :

1 curl -X DELETE server:3000/api/todos/5edc2a6d0c41d60054ad715f

If you check the UI, all tasks will be gone: http://localhost:4200/all.

As much fun as curl is, let’s move on and complete all these functionalities in
Angular.

Angular Service to talk to the server

There are two main changes that we need to make in other to use the API server.

1. We need to change the TodoService service to use HTTP client.

2. Change the TodoComponent component to use the methods.

Angular service using the HTTP client

In the following code, we are using the HTTP client, to make the appropriate calls:

src/app/todo/todo.service.ts

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

2 import { HttpClient } from '@angular/common/http';
3
4 export interface ITodo {
https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 16/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

5 _id?: string;
6 title: string;
7 isDone: boolean;
8 notes: string;
9 update_at: string;
10 editing ?: boolean;
11 }
12
13 const API = '/api/todos';
14
15 @Injectable({
16 providedIn: 'root'
17 })
18 export class TodoService {
19 constructor(private http: HttpClient) { }
20
21 get(params = {}) {
22 return this.http.get(API, { params });
23 }
24
25 add(data: ITodo) {
26 return this.http.post(API, data);
27 }
28
29 put(changed: ITodo) {
30 return this.http.put(`${API}/${changed._id}`, changed);
31 }
32
33 toggle(selected: ITodo) {
34 selected.isDone = !selected.isDone;
35 return this.put(selected);
36 }
37
38 delete(selected: ITodo) {
39 return this.http.delete(`${API}/${selected._id}`);
40 }
41
42 deleteCompleted(body = { isDone: true }) {
43 return this.http.request('delete', `${API}`, { body });
44 }
45 }

The Todo service matches the HTTP verbs that we used in curl and passes the
payloads.

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 17/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

Let’s now change the TodoComponent that goes along with these changes.

“ a93291c - Angular service using HTTP client

Angular TodoComponet updates

Here’s what your component should look like this:

src/app/todo/todo.component.ts

1 import { Component, OnInit } from '@angular/core';

2 import { ActivatedRoute } from '@angular/router';
3
4 import { TodoService, ITodo } from './todo.service';
5
6 @Component({
7 selector: 'app-todo',
8 templateUrl: './todo.component.html',
9 styleUrls: ['./todo.component.scss'],
10 providers: [TodoService]
11 })
12 export class TodoComponent implements OnInit {
13 public todos: ITodo[];
14 public activeTasks: number;
15 public newTodo: string;
16 public path: string;
17 public mapToQuery = {
18 all: {},
19 active: { isDone: false },
20 completed: { isDone: true },
21 };
22 constructor(private todoService: TodoService, private route: Activat
23
24 ngOnInit() {
25 this.route.params.subscribe(params => {
26 this.path = params.status;
27 this.getTodos(this.path);
28 });
29 }
30
31 addTodo() {
32 this.todoService

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 18/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

33 .add({ title: this.newTodo, isDone: false } as unknown as ITodo)

34 .subscribe(() => {
35 this.getTodos();
36 this.newTodo = ''; // clear input form value
37 });
38 }
39
40 getTodos(route = 'all') {
41 const query = this.mapToQuery[route];
42 return this.todoService
43 .get(query)
44 .subscribe((todos: ITodo[]) => {
45 this.todos = todos;
46 this.activeTasks = this.todos.filter(todo => !todo.isDone).len
47 });
48 }
49
50 updateTodo(todo: ITodo, newValue: string) {
51 todo.title = newValue;
52 return this.todoService.put(todo).subscribe(() => this.getTodos())
53 }
54
55 destroyTodo(todo: ITodo) {
56 this.todoService.delete(todo).subscribe(() => this.getTodos());
57 }
58
59 toggleTodo(todo: ITodo) {
60 this.todoService.toggle(todo).subscribe(() => this.getTodos());
61 }
62
63 clearCompleted() {
64 this.todoService.deleteCompleted().subscribe(() => this.getTodos()
65 }
66 }

Let’s go over each part in the next sections.

Sending Queries with HTTP GET

In the component, one the first thing we do is check the route params (path):

recap: src/app/todo/todo.component.ts (exerpt)

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 19/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

1 ngOnInit() {
2 this.route.params.subscribe(params => {
3 this.path = params['status'];
4 this.getTodos(this.path);
5 });
6 }

When you click on the buttons All , Active , and Completed , that will trigger a
route change.

To recap, these buttons use the router link. So, every time you click on them, they will
change the URL.

recap: src/app/todo/todo.component.html (exerpt)

1 <ul class="filters">
2 <li>
3 <a [routerLink]="['/all']" [class.selected]="path === 'all'">All</
4 </li>
5 <li>
6 <a [routerLink]="['/active']" [class.selected]="path === 'active'"
7 </li>
8 <li>
9 <a [routerLink]="['/completed']" [class.selected]="path === 'compl
10 </li>
11 </ul>

After we change the URL, the next thing we do is to call getTodos . Let’s see that
next.

Get all todos

We can get all services using the following:

src/app/todo/todo.component.ts (exerpt)

1 getTodos(route = 'all') {
2 const query = this.mapToQuery[route];
3 return this.todoService
4 .get(query)
5 .subscribe((todos: ITodo[]) => {
6 this.todos = todos;
7 this.activeTasks = this.todos.filter(todo => !todo.isDone).length
https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 20/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

8 });
9 }

We this.todoService.get will issue an HTTP get and retrieve all the tasks from the
database and update the todos. It also updates the number of active tasks (the ones
that are not done).

The getTodos receives an argument ( route ) with the path that will be one of these:
all , active , or complete . However, MongoDB doesn’t understand these words.
We have to map it ( mapToQuery ) to something a proper query like { isDone: true
} . This MongoDB will understand.

“ e33d540 - Angular TodoComponet updates

Modifying the todos

All the other operations, like the update, clear, toggle, are very similar. They trigger an
action and then call getTodos , so the UI is up to date with the latest changes.

That’s all!

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 21/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

 NEWER OLDER 
How to solve any graph/Maze interview questions in The JavaScript Promise
JavaScript? DFS vs. BFS Tutorial

Subscribe & stay up to date!

email address

Subscribe

About the author

Adrian Mejia is a Software Engineer located in Boston, MA.

Currently working at Google. Adrian enjoys writing posts about
Algorithms, programming, JavaScript, and Web Dev. Also, he likes
to travel ✈️ and biking 🚴‍.

Follow @iAmAdrianMejia

 Top  Edit this post

Contents
1. REST API with Node.js
2. Connecting REST API with Angular App.
3. Setting up MongoDB
4. Angular Service to talk to the server

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 22/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

ALSO ON ADRIAN MEJIA'S BLOG

6 years ago • 5 comments 6 years ago • 1 comment

Building a Understanding
Node.js static file JavaScript
server (files over Callbacks …

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 23/24
3/17/25, 2:19 PM Modern MEAN Stack Tutorial with Docker (Angular, Node, Typescript and Mongodb) | Adrian Mejia Blog

3 Comments 
1 Login

G Join the discussion…

LOG IN WITH OR SIGN UP WITH DISQUS ?

Name

 Share Best Newest Oldest

smog − ⚑
S 2 years ago

Do you have a repo that includes the code used in the MEAN stack? I have been getting quite a few
errors as I go through this tutorial. A full repo would do a lot to help get a full view of the project,
these little snippets can get messy.

0 0 Reply ⥅

ayush gupta − ⚑
A 4 years ago

I am glad to see this brilliant post. all the details are very helpful and good for us, keep up to good
work.I found some useful information in your blog, it was awesome to read, thanks for sharing this
great content to my vision, keep sharing.

Mean Stack Training in pune

0 0 Reply ⥅

ayush gupta − ⚑
A 4 years ago

I’m excited to uncover this page. I need to thank you for your time for this, particularly fantastic
read!! I definitely really liked every part of it and I also have you saved to fav to look at new
information in your site.
Mean Stack Training in pune

Mean Stack Classes in pune

0 0 Reply ⥅

© 2022 Adrian Mejia v.rk61qc

https://adrianmejia.com/angular-todo-mean-stack-node-mongodb-typescript-tutorial/ 24/24