Angular Js Built-in components - ngFor component demo app
In this app we are going to demonstrate the use of repetitive structure which Angular 2 provides as a built-in component so that we can use it in our components.
/* Angular 2 built-in components - ngFor demo app */
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
@Component({
selector: 'ng-for-sample-app',
template: `
<h4 class="ui horizontal divider header">
Simple list of strings
</h4>
<div class="ui list" *ngFor="#c of cities">
<div class="item">{{ c }}</div>
</div>
<h4 class="ui horizontal divider header">
List of objects
</h4>
<table class="ui celled table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tr *ngFor="#p of people">
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
<td>{{ p.city }}</td>
</tr>
</table>
<h4 class="ui horizontal divider header">
Nested data
</h4>
<div *ngFor="#item of peopleByCity">
<h2 class="ui header">{{ item.city }}</h2>
<table class="ui celled table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tr *ngFor="#p of item.people">
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
</tr>
</table>
</div>
<h4 class="ui horizontal divider header">
List with index
</h4>
<div class="ui list" *ngFor="#c of cities; #num = index">
<div class="item">{{ num+1 }} - {{ c }}</div>
</div>
`
})
class NgForSampleApp {
cities: Array<string>;
people: Array<Object>;
peopleByCity: Object;
constructor() {
this.cities = ['Miami', 'Sao Paulo', 'New York'];
this.people = [
{ name: 'Anderson', age: 35, city: 'Sao Paulo' },
{ name: 'John', age: 12, city: 'Miami' },
{ name: 'Peter', age: 22, city: 'New York' }
];
this.peopleByCity = [
{
city: 'Miami',
people: [
{ name: 'John', age: 12 },
{ name: 'Angel', age: 22 }
]
},
{
city: 'Sao Paulo',
people: [
{ name: 'Anderson', age: 35 },
{ name: 'Felipe', age: 36 }
]
}
];
};//constructor ends here.
}//class NgForSampleApp ends here.
bootstrap(NgForSampleApp);
/******************************************************************************/
The code for index.html is here:
<!doctype html>
<html>
<head>
<title>Angular 2 - ngFor demo</title>
<link rel="icon" type="image/png" href="resources/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="resources/images/favicon.ico" />
<!-- Libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Configure System.js, our module loader -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app.js')
.then(null, console.error.bind(console));
</script>
<!-- Menu Bar -->
<div class="ui menu">
<div class="ui container">
<a href="#" class="header item">
<img class="logo" src="resources/images/ng-book-2-minibook.png">
ng-book 2
</a>
<div class="header item borderless">
<h1 class="ui header">
Angular 2 ngFor demo
</h1>
</div>
</div>
</div>
<div class="ui main text container">
<ng-for-sample-app></ng-for-sample-app> <!-- Our app loads here -->
</div>
</body>
</html>
/******************************************************************************/
No comments:
Post a Comment