MEAN App tutorial with Angular 4 (Part 2)

Welcome to the Part 2 of the MEAN App Tutorial. Now we have already built a NodeJS REST API for our Todo App. This is the first part of the tutorial — MEAN App Tutorial with Angular 4(Part 1)

We are going to use that to build the frontend in Angular 4.

Setup Angular Project-

1. First run npm install -g @angular/cli to install the Official Angular CLI globally
2. Now run ng new todoapp-angular --style=scss to generate an Angular app.
3. cd todoapp-angular and then npm install
4. Now run ng serve and Go to http://localhost:4200 to see the generated app.

Add Bootstrap and Font-awesome

Run npm install --save bootstrap@4.0.0-beta @ng-bootstrap/ng-bootstrap font-awesome To install Font-awesome and Bootstrap to the project. Now go to the src/styles.scssFile and import both of the css files to the Project.

Import the NgbModule from the Angular bootstrap Library and add that to the imports array of app.module.ts file.

src/app/app.Component.html

Replace the auto generated contents of the app.component.html by the following snippet.

At this point the browser at http://localhost:4200 has become blank. Now we’ll start adding the Models to the Angular Project.

ToDo Model

Go to the src/app directory and create a models folder. Create a todo.models.ts file under the folder.

cd src/app

mkdir models

cd models

code todo.model.ts

src/app/models/todo.model.ts

ToDo Service

Go to the app directory and create a folder named services. Create a file named todo.service.ts under the folder.

cd src/app

mkdir services

cd services

code todo.service.ts

todo.service.ts

We’ve imported the Todo class at first. And then we have declared api_url and todoUrl properties.

In the constructor we have injected HttpClient object to the ToDoService. Let’s import HttpClient Module to the app.module.ts files imports array.

And we also need to add ToDoService in the providers array of the Module.

Now first lets Populate the todo.service.ts file.

Now we’ll dive into the app.component.ts file. Before that we need to update the todo.model.ts file to contain a default constructor — that will initialize all the values of the ToDo object.

App.component.ts

Now go to the app.component.html and write the following -

Now the http://localhost:4200 will show the list of the ToDos from the API. Let’s create the click event handler that we’ve made in this HTML template.

After creating a new Todo we are adding that todo to the list and then resetting the newtodo Value.

We are creating an Edit List for tracking the editable ToDos list.

Now make an editTodo function that takes todo as argument and pass that onto the todoservice. We are checking the xistence of the object in the todolist and if It exists then if it exists in editTodos then remove from that, If it doesn’t then add to the editTodo list.

For changing the status of the ToDos, to Done we have created a button. We will make a function doneTodo for that —

For Checking if the user has entered the enter key to Edit the Todo — we are making a short event handler —

Update the table of app.component.html file. If the todolist exists in the editTodo list then, show the input controls instead of the plain td view. We’ve used ngIf — else new feature to achieve this functionality-

Finally make a delete function to handle delete request.

Now the app is completed. Run ng serve to see the finished app. Go to http://localhost:4200 to access the app.

Running the Application-

You can find the project in Github — https://github.com/nomanHasan/todoapp-angular

You can get the source code and run the project from there.

This is a very basic Angular app. You can modify it as much as you want. For example you can try the datepicker of the ng-bootstrap library to implement the start/end date input feature. You can make drop downs for the status field, or sort by the fields or implement pagination.

Experiment and Learn.

Next, We will convert this into an NgRx app— Getting Started with NgRx