As I said previously, I am starting a demo series of CRUD (Create, read, update, and delete) operations in Angular2. This is part two of that series. In case you missed part one, “How to Create RESTful API using Node.js and MySQL”, you can read it from here.
In this second part of the tutorial, I am going to cover the following topics:
- Fetching JSON data from URL
- Filter pipe
- Introduction to HTTP module
- Services
- Conditionally apply CSS class and more
At the end of the article, you can find the link to the source code on Github. So, feel free to play with the code yourself.
Command
ng g c “name of the component”
ng g c demo
Explanation
Here, ng stands for Angular, g stands for generate, and c stands for component.
Create new component but not the directory (inside the directory )
Command
ng g c demo1 –flat–flat will not create new directoryCreate component with inline CSS and inline HTML
Command
ng g c “name of the component” –flat -is -it
Example
ng g c demo1 –flat -is -it
-is stands for Inline Style
-it stands for Inline template
Deleting Component
Command
ng destroy component “name of the component”
Create Service
Command
ng g s data
Explanation
s stands for service
Create Class
Command
ng g cl “name of class”Example
ng g cl demo
Explanation
Command
ng g p “name of pipe”
ng g p powerExplanation
p stands for pipe
Creating data structure/Class
- cmd > ng g cl tasks
export class Task { constructor(public Id:String,public Title:String,public Status:String){ } }
So, it will generate one class for us. Now, inside the class, create three properties Id,Title and Status, so that now the object of Task class has 3 properties.
Creating Service
cmd>ng g s taskdata
First, navigate to shared folder, then write the above code to generate service.
- Communicate with database.
- Communicate with components /classes.
- Some other business logic which is accessible from various places of our application.
public url:string="https://localhost:3000/Tasks/"; getAllTasks(){ return this._http.get(this.url) .map((response:Response)=>response.json()); }
import { Injectable } from '@angular/core'; import { Task } from '../tasks/task'; import { Http,Headers,Response,RequestOptions } from '@angular/http'; import 'rxjs/Rx'; @Injectable() export class TaskdataService { public url:string="https://rkdemotask.herokuapp.com/Tasks/"; constructor(private _http:Http) { } getAllTasks(){ return this._http.get(this.url) .map((response:Response)=>response.json()); } deleteTask(item:Task){ let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this._http.delete(this.url+item.Id,options) .map((response:Response)=>response.json()); } addTask(item:Task){ let body = JSON.stringify(item); let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this._http.post(this.url,body, options) .map((response:Response)=>response.json()); } getTaskId(id:any){ return this._http.get(this.url+id) .map((response:Response)=>response.json()); } editTask(item:Task){ let body = JSON.stringify(item); let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this._http.put(this.url+item.Id, body, options) .map((response:Response)=>response.json()); } }
Now, the component is divided into two portions – .html and .ts. Let’s create .ts first.
Tasks.component.ts
import { Component, OnInit  } from '@angular/core'; import { Task } from './task'; import { TaskdataService } from '../shared/taskdata.service'; import { Router } from '@angular/router'; @Component({ selector: 'app-tasks', templateUrl: './tasks.component.html', styleUrls: ['./tasks.component.css'] }) export class TasksComponent implements OnInit { allTasks:Task[]=[]; constructor(private _datatask:TaskdataService) { } ngOnInit() { this._datatask.getAllTasks().subscribe( (data: Task[]) => { this.allTasks = data; } ); } }
TypeScript file can be divide into 3 sections –
- imports section – contains all the library files used in component. Like task, taskdata.service,etc.
- component metadata – contains the metadata like selector, templateurl, styleurl and more.
- class – contains all the logic.
So, in our example –
- First, create the array named allTasks which is the type of task.
- Then, inject the taskdataservice inside the constructor and create the instance of our service.
- And then finally, call getAllTasks method of our service inside the ngOnInIt event that is a life-cycle hook called by Angular2 for indicating that Angular is done creating the component.
So now, we are good to go for displaying data on our .html. To display the data on HTML, I am using string interpolation method – remember this {{ }}. You can find more about data bindings here.
tasks.component.html
</pre> <div class="container"> <div class="row"> <div [hidden]="allTasks.length>0" class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span></div> </div> <div class="row"> <table class="table"> <thead> <th>Id</th> <th>Title</th> <th>Status</th> </thead> <tr *ngFor="let item of allTasks "> <td>{{item.Id}}</td> <td>{{item.Title}}</td> <td>{{item.Status}}</td> </tr> </table> </div> </div> <pre>
Output
Now, you all are wondering by seeing the output that the color of status is changing depending on the values ‘done’ and ‘pending’. It is very simple to assign runtime CSS class to any element of HTML, conditionally. So now, let’s see how we can do so.
First, I am creating two CSS classes named as .donestatus and .pendingstatus.
Syntax
Creating filter pipe
If you don’t know what pipe is? You don’t need to worry about that, because I had already described what pipes are in my previous article. You can read it here.
cmd>ng g p filter
Note – To use this pipe anywhere in the application, we must declare the pipe inside app.module.ts, same as what we did with components.
Filter.pipe.ts
So in the above example, I have created transform function which takes two parameters – array (of type task) and arg ( the search term). I have performed a simple search filter operation on an array.
Final task.component.html will look like the following, after applying the filter.
tasks.component.html
What I did is simply add one input box and created a (keyup) event so that when user inputs data, it filters the below table. I also used template binding.
</pre> <input type="text" (keyup)="0" #input1 class="form-control" placeholder="Search for..."> <tr *ngFor="let item of (allTasks |filter:input1.value)"> <pre>
Filter will take allTasks array as first argument and input1.value as second argument for that transform function inside the filter.pipe.ts.
Output
Summary
Angular 2 is simply awesome. Isn’t it?
We covered a lot in this tutorial. Let’s just summarize it.
- Angular-CLI
- Created class
- Services
- Components
- Run time css class
- Filter pipe and more…
There is a lot more to come in the next part of the tutorial (routing, insert, validations, update, and delete). So, stay tuned for more. I will provide the Github link of the demo application in the last part of this tutorial.
[…] Part 2-working with read operation in angular 2/Pipes/http […]
LikeLike
[…] I also required to add method for delete in my back end which I had created in part1: […]
LikeLike
[…] Part2 (Fetching Data,Pipe etc) […]
LikeLike
[…] crud in angular2 part1 https://github.com/jinalshah999/angular2cruddemo […]
LikeLike