Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily. Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <...
index.html
<html>
<head>
<title>Angular 2 Create And Inject Service With Examples</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<task-list>
loading...
</task-list>
</body>
</html>
config.js
System.config({ //use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./app",
'@angular': 'https://npmcdn.com/@angular',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'@angular/core': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'index.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
app/main.ts
import {TaskList} from './taskList.component';
bootstrap(TaskList, []).catch(err => console.error(err));
app/taskList.component.ts
import {Component} from '@angular/core'
/* import OnInit */
import {OnInit} from '@angular/core'
/* import service */
import {TaskService} from './task.service'
/* create TaskList class decorator */
/* define selector of component */
/* include HTML file as template */
@Component ({
selector: 'task-list',
templateUrl: 'app/task-list.html',
providers: [TaskService]
})
/* create TaskList class */
/* Export TaskList Class */
export class TaskList implements OnInit {
private tasks
private taskTitle = ''
constructor(private taskService:TaskService){
this.tasks = []
}
ngOnInit(){
this.tasks = this.taskService.getTasks()
}
addTask(taskTitle){
if(taskTitle !='' && taskTitle){
this.taskService.addTask(taskTitle)
}
this.taskTitle = ''
}
deleteTask(taskIndex){
this.taskService.deleteTask(taskIndex)
}
}
app/task.service.ts
import {Injectable} from '@angular/core'
/* Create and export TaskService class */
/*@Injectable()*/
export class TaskService{
/* create empty tasks property */
private tasks = []
addTask(task){
this.tasks.push(task)
}
deleteTask(taskIndex){
delete(this.tasks[taskIndex])
}
getTasks(){
return this.tasks;
}
}
app/task-list.html
<div class="container">
<h1>Task List</h1>
<table class="table table-striped">
<tr>
<td width="200">Title</td>
<td width="70">Delete</td>
</tr>
<tr *ngFor="#task of tasks; #i = index">
<td>{{task}}</td>
<td>
<input type="button" value="Delete" (click)="deleteTask(i)">
</td>
</tr>
</table>
<br/>
<br/>
<p>Add Task</p>
<input type="text" [(ngModel)]="taskTitle" placeholder="Task Title" class="form-control">
<br/>
<input type="button" value="Add" (click)="addTask(taskTitle)" class="btn btn-primary pull-right">
<br/>
<br/>
<br/>
<br/>
<p class="text-center"><a href="http://learningturn.com/angular-2/angular-2-create-inject-service-examples/">Read Full Tutorial: Angular 2 Create And Inject Service With Examples</a></p>
</div>
Comments
Post a Comment
Comment