After long time of waiting finally the Angular2 Framework, or ng2 if you prefer, passed in Beta stage. It’ s not the final version so, a lot of thing may change before the official release but for sure we can consider it more stable then when I wrote the first basic tutorial. In the new version of this powerful framework, there is lot of things to learn so i will start with a very basic tutorial.

First of all you can start by creating the basic application following the 5 minutes quickstart on the official site. Once done with the basic application we can start coding our little application. You will probably noticed that the new Angular applications is made by components. For our todo application we will follow the same pattern.

The first component we are going to create is a list of todo. In the app folder create a new file todo-list.component.ts and a new folder called templates where we will put the html files. The first html files is todo-list.html. You can write the html template for each component also directly in the TypeScript file but i prefer to maintain different files for code and the html.

As you can see in the first file we imported a Todo model so we need to define it in another file. Create a file Todo.ts and paste the simple code below.

The last thing in order to see something new on the screen is to import the newly created component in the main app component and change the layout to show the list. Modify the original app.component.ts file like show in the snippet below.

In the app component we imported the TodoComponentList and added it as a directive in our template. Now if you run the application you will see a first static todo on the screen.

The input component

Now that we have our todo list in place we need a way to insert new todo. It would be easly done by adding a simple form below the list but for this tutorial we want to complicate things a bit and create a new component to accomplish the task. Create a new file and call it todo-input.component.ts and paste the code below in it.

Its the first directive we created. As you can see this time the HTML template was placed directly in the Typescript file, it’s a single input text with a keyup.enter event bound to an addTodo() function. In the component class we defined an EventEmitter of type Todo as output for our directive and when the enter key is pressed in the text inout the event is fired.

The input component is ready, we can place it at the end of the list template previously created adding just a line to the HTML.

As you can see we have bound the newTodo event to a function we didn’t define in the list component. Add the following code to the list component to serve the fired event

You need also to import the directive and add it to the component :

Now if you run the application you will get an input text where you can add new todos.

Final touch

If you look to the HTML code of the todo-list.component from begin we used a function bound to a button to delete the todo and another function to toggle the checkbox. We didn’t implemented it so far. It is really easy and we can do that in the list component file. Add the following code to the file

The function above is almost self explanatory. The first remove the element at a specified index in the todos array. The change the isDone properties of the given todo and the last one cycle trough the entire array and add one for each element where the isDone property is false. The last function is defined asa  getter so we can use it with {{ }} syntax to show the result.

First impression with Angular 2

This is a first approach to Angular 2 also for me. Probably some thing could be done better and in different ways. The important thing i learned writing this tutorial is that Angular 2 is totally different from what we seen till now with Angular 1. In a next future i will try to write all the tutorial we have seen for AngularJS adapted to the version 2 of this beautiful framework.

I’ve made also a four parts video tutorial (it follow bit different implementation)  for the todo application. Below the last part where you can see the final result.

 


Also published on Medium.


Shares
Share This

Share This

Share this post with your friends!

Shares

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close