Routing, Validation, And Delete Operations In Angular 2

  • In the code above, I had imported Routes and RouterModule from @angular/router and created one const array, which is named as a router.
  • For my convenience, I am creating one component as a header.component in which I will create a menu for my project.
  • I create the click event for update button on which I am calling the updateStatus method.
  • I create the click event for delete button on which I am calling the deleteStatus method.
  • export class AddtasksComponent implements OnInit {

In this article, you will learn routing, validation, and delete operations in Angular 2.

@FourPeeNo1: Routing, Validation, And Delete Operations In Angular 2 #programming #angularjs #angularjs2

If you missed any of the previous articles, you can read them  here:

In this third part of the tutorial, I am going to cover the topics give below.

At the end of the article, you will find the link to the source code on GitHub, so feel free to play with the code yourself.

In part 1, I created RESTful API, using node.js and MySQL. In part 2, I discussed the read operation and also how to create custom filter pipe etc.

Now, in this article I am starting from routing.

Angular2 routing is all about the changing state of your Application and loading different components which depend on the URL that the user enters. Angular 2 first parses the URL entered by the user, identifies the routes and then finally loads the suitable component.

Thus, in the code above, I had imported Routes and RouterModule from @angular/router and created one const array, which is named as a router. Inside the array, I created the routing paths. For example, if the user does not enter anything in the URL, which is http//localhost4200/. It will redirect to ‘/allTask’ and it will load the tasks.component.

Now, on loading of the root component, it will directly go to app.routing.ts file and depending on the URL requested by the user, the component will be loaded..

Now, we need routing on each and every page. Thus, for my convenience, I am creating one component as a header.component in which I will create a menu for my project. I am using Bootstrap to design the menu.

Focus on AddTask. Now, as Angular2 has done all routing locally, so we will be using router link instead of href.

In this demo, I am using two way data binding for the add operation. You can get an idea about data binding from here.

So with the [(ngModel)]=”model.Id”, when I am changing the value in input box it will also reflects in model object in addtasks.component.ts file.

Here in above code as I said i created the Status array of type string and model object which can hold Id,Title,Status.

Subscribe method will take three arguments first is on success, second on error, third on complete.

Routing, Validation, And Delete Operations In Angular 2