Create My Todo List

In this topic we will create one todo component for our todo list and route it from welcome component we will use some angular directive.

Lets create one todo component using command "ng generate component todosList" 

Once created lets add it to route and route is present in app-routing.module.ts always add new route before ** route as ordering is important in angular. If you put ** above, and you put the new route down below it, what would happen is this ** would match the component route so because that would match anything, it's a regular expression to match anything and we end up in error page.

Now we will add some list in todo list component, for that the best practice is to create class in typescript file as we know typescript file is javascript module and we can have any number of class in it. Now create a todosList class and add a constructor with some parameter and these parameter must be public.

Here you can see we have created a list of todos and we need to show all todos in our HTML file so how do we loop it for looping we use ng directives i.e. *ngFor = "let todo of todos" here let and of are keywords we are creating todo object of todos list and it will for for loop.

Now hit http://localhost:4200/todos you will see the table is created with details.

Now we have to route to this todos page from our welcome page for that we need to update our welcome.component.html file as below

 Now in browse open http://localhost:4200/ and check for your self if routing is working properly or not.

so we have built navigation between login page, welcome page, todo page and error page. Check all of them by yourself.

Previous Topic (Angular Routes)                                                                         Next Topic