<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### Angular2 Starter Plunker - Typescript - RC.0
A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.
For opening
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
import { Component, NgModule, Input } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { PriceFilterPipe } from 'src/filter.pipe';
import { FilterComponent } from 'src/filter.component'
@Component({
selector: 'my-app',
templateUrl: 'src/app.html',
styleUrls: ['src/app.css']
})
export class App {
@Input() priceMinFilter: number;
filterPrice(filter) {
this.priceMinFilter = filter.priceMin;
}
_productList = [
{
"name": "Product One",
"price": 600,
},
{
"name": "Product Two",
"price": 1100,
},
{
"name": "Product Three",
"price": 2150,
},
{
"name": "Product Four",
"price": 3500,
},
{
"name": "Product Five",
"price": 4300,
},
{
"name": "Product Six",
"price": 5400,
},
{
"name": "Product Seven",
"price": 6900,
},
{
"name": "Product Eighth",
"price": 14000,
},
{
"name": "Product Nine",
"price": 26000,
},
{
"name": "Product Ten",
"price": 30000,
},
{
"name": "Product Eleven",
"price": 160000,
},
{
"name": "Product Twelve",
"price": 1000000,
}
]
}
@NgModule({
imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
declarations: [ App, FilterComponent, PriceFilterPipe ],
bootstrap: [ App ]
})
export class AppModule {}
<!-- Title -->
<h2 class="title">Price Filter Pipe with Data Driven Form Approach</h2>
<!-- Filter -->
<zt-filter (filterPrice)='filterPrice($event)'></zt-filter>
<!-- Notification -->
<div class="note" *ngIf="priceMinFilter">
<span>Filtering Products from <strong>{{ priceMinFilter }}</strong></span>
</div>
<!--Product List -->
<div class="price-list">
<div class="product-item" *ngFor="let _product of _productList | priceFilter:priceMinFilter">
<span class="name">{{ _product.name }}</span><span class="price">{{ _product.price | currency:'USD':true:'1.0-2' }}</span>
</div>
</div>
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'priceFilter'
})
export class PriceFilterPipe implements PipeTransform {
transform(value, args?) {
// ES6 array destructuring
let [minPrice] = args;
return value.filter(_product => {
return _product.valueP >= +minPrice;
});
}
}
.title {
text-align: center;
}
.price-filter-form {
text-align: center;
}
.price-list {
max-width: 500px;
margin: 1rem auto;
}
.product-item {
border-bottom: 1px solid #ddd;
padding: 1rem;
}
.product-item:nth-child(odd) {
background: #fafafa;
}
.name {
text-align: left
}
.price {
text-align: right;
float: right;
font-weight: bold;
letter-spacing: 1px;
}
.note {
max-width: 500px;
padding: 1rem;
margin: 1rem auto;
display: block;
text-align: center;
background: #ffffd2;
border: 1px solid #ffef25;
}
import { Component, OnInit, Output, EventEmitter} from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'zt-filter',
templateUrl: 'src/filter.component.html',
styleUrls: ['src/filter.component.css']
})
export class FilterComponent implements OnInit {
// Initializing Properties
priceMinFilter: number;
priceFilterForm: FormGroup;
// Outputs
@Output() filterPrice: EventEmitter<{
priceMin: number,
}> = new EventEmitter<{
priceMin: number,
}>();
// Constructor
constructor() {
this.priceFilterForm = new FormGroup({
priceMin: new FormControl('any')
});
this.priceFilterForm.controls['priceMin'].valueChanges.subscribe(
(data: any) => console.log(data)
)
}
// From Actions
onSubmit() {
this.filterPrice.emit({
priceMin: this.priceMinFilter
});
}
// Data
_priceOptions = [
{ "valueP": null },
{ "valueP": 500 },
{ "valueP": 1000 },
{ "valueP": 2000 },
{ "valueP": 3000 },
{ "valueP": 4000 },
{ "valueP": 5000 },
{ "valueP": 10000 },
{ "valueP": 20000 },
{ "valueP": 30000 },
{ "valueP": 40000 },
{ "valueP": 50000 },
{ "valueP": 60000 },
{ "valueP": 70000 },
{ "valueP": 80000 },
{ "valueP": 90000 },
{ "valueP": 100000 },
{ "valueP": 150000 },
{ "valueP": 200000 }
]
}
<form [formGroup]="priceFilterForm" class="price-filter-form" autocomplete="off" novalidate (ngSubmit)="onSubmit()">
<div class="form-group">
<!-- Min Price Select -->
<label for="price-min">Min Price</label>
<select id="price-min" class="form-control" name="pricemin" [(ngModel)]="priceMinFilter" (ngModelChange)="onPriceFromChange()" formControlName="priceMin">
<option *ngFor="let _priceMin of _priceOptions" [value]="_priceMin.valueP">{{ _priceMin.valueP | currency:'USD':true:'1.0-2' }}</option>
</select>
<!-- Filter Button -->
<button type="submit">Filter by Minimum Price!</button>
</div>
</form>
.title {
text-align: center;
}
.price-filter-form {
text-align: center;
}
.price-list {
max-width: 500px;
margin: 1rem auto;
background: #fff;
padding: 1rem;
border: 1px solid #bbb;
box-shadow: 3px 3px 6px #bbb;
}
.product-item {
border-bottom: 1px solid #ddd;
padding: 1rem;
}
.product-item:nth-child(odd) {
background: #fafafa;
}
.name {
text-align: left
}
.price {
text-align: right;
float: right;
font-weight: bold;
letter-spacing: 1px;
}
.note {
max-width: 500px;
padding: 1rem;
margin: 1rem auto;
display: block;
text-align: center;
background: #ffffd2;
border: 1px solid #ffef25;
}