├── .DS_Store ├── .gitignore ├── LICENSE ├── gulpfile.js ├── index.html ├── package.json ├── readme.md └── src └── app.ts /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/auth0-blog/angular2-pipes/7829914a85b21345ab5c1297e2be4c05c825cc5e/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Auth0, Inc. (http://auth0.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | var PATHS = { 4 | src: 'src/**/*.ts' 5 | }; 6 | 7 | gulp.task('clean', function (done) { 8 | var del = require('del'); 9 | del(['dist'], done); 10 | }); 11 | 12 | gulp.task('ts2js', function () { 13 | var typescript = require('gulp-typescript'); 14 | var tsResult = gulp.src(PATHS.src) 15 | .pipe(typescript({ 16 | noImplicitAny: true, 17 | module: 'system', 18 | target: 'ES5', 19 | moduleResolution: 'node', 20 | emitDecoratorMetadata: true, 21 | experimentalDecorators: true 22 | })); 23 | 24 | return tsResult.js.pipe(gulp.dest('dist')); 25 | }); 26 | 27 | gulp.task('play', ['ts2js'], function () { 28 | var http = require('http'); 29 | var connect = require('connect'); 30 | var serveStatic = require('serve-static'); 31 | var open = require('open'); 32 | 33 | var port = 9000, app; 34 | 35 | gulp.watch(PATHS.src, ['ts2js']); 36 | 37 | app = connect().use(serveStatic(__dirname)); 38 | http.createServer(app).listen(port, function () { 39 | open('http://localhost:' + port); 40 | }); 41 | }); 42 | 43 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular2 playground 6 | 7 | 8 | 9 | Loading... 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 | 26 | 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng2-play.ts", 3 | "version": "1.0.0-SNAPSHOT", 4 | "description": "A minimal Angular2 playground using TypeScript", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/pkozlowski-opensource/ng2-play.ts.git" 8 | }, 9 | "bugs": { 10 | "url": "https://github.com/pkozlowski-opensource/ng2-play.ts/issues" 11 | }, 12 | "homepage": "https://github.com/pkozlowski-opensource/ng2-play.ts#readme", 13 | "devDependencies": { 14 | "connect": "^3.4.0", 15 | "del": "^1.2.0", 16 | "gulp": "^3.9.0", 17 | "gulp-typescript": "^2.8.0", 18 | "open": "0.0.5", 19 | "serve-static": "^1.10.0" 20 | }, 21 | "dependencies": { 22 | "angular2": "2.0.0-alpha.44", 23 | "es6-shim": "^0.33.6", 24 | "systemjs": "0.18.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Angular 2 Pipes 2 | ## Based on [ng2-play.ts](https://github.com/pkozlowski-opensource/ng2-play) 3 | 4 | This is the code for Auth0's Angular 2 series tutorial on [working with pipes](#). In the tutorial, we cover: 5 | 6 | 1. A comparison of Angular 1.x filters to Angular 2 pipes 7 | 2. How to use pipes, including the `async` pipe 8 | 3. How to create custom pipes 9 | 10 | ## Installation 11 | 12 | Clone the repo and then: 13 | 14 | ```bash 15 | npm install 16 | gulp play 17 | ``` 18 | 19 | The app will be served at `localhost:9000`. 20 | 21 | ## Important Snippets 22 | 23 | In this tutorial, we work with everything out of one file, `app.ts`. 24 | 25 | ```js 26 | // app.ts 27 | 28 | import {Component, View, bootstrap, Pipe, PipeTransform, bind} from 'angular2/angular2'; 29 | 30 | // We use the @Pipe decorator to register the name of the pipe 31 | @Pipe({ 32 | name: 'tempConvert' 33 | }) 34 | // The work of the pipe is handled in the tranform method with our pipe's class 35 | class TempConvertPipe implements PipeTransform { 36 | transform(value: number, args: any[]) { 37 | if(value && !isNaN(value) && args[0] === 'celsius') { 38 | var temp = (value - 32) * 5/9; 39 | var places = args[1]; 40 | return temp.toFixed(places) + ' C'; 41 | } 42 | 43 | return; 44 | } 45 | } 46 | @Component({ 47 | selector: 'pipes' 48 | }) 49 | @View({ 50 | templateUrl: 'pipesTemplate.html', 51 | // We can pass the pipe class name into the pipes key to make it usable in our views 52 | pipes: [TempConvertPipe] 53 | }) 54 | 55 | class PipesAppComponent { 56 | date: Date; 57 | rating: number; 58 | grade: number; 59 | temperature: number; 60 | promise: Promise; 61 | 62 | constructor() { 63 | this.date = new Date(); 64 | this.rating = 9.1243; 65 | this.grade = 0.99; 66 | this.temperature = 85; 67 | this.promise = new Promise(function(resolve, reject) { 68 | setTimeout(function() { 69 | resolve("Hey, I'm from a promise."); 70 | }, 2000) 71 | }); 72 | } 73 | } 74 | 75 | bootstrap(PipesAppComponent); 76 | ``` 77 | 78 | ## What is Auth0? 79 | 80 | Auth0 helps you to: 81 | 82 | * Add authentication with [multiple authentication sources](https://docs.auth0.com/identityproviders), either social like **Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others**, or enterprise identity systems like **Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider**. 83 | * Add authentication through more traditional **[username/password databases](https://docs.auth0.com/mysql-connection-tutorial)**. 84 | * Add support for **[linking different user accounts](https://docs.auth0.com/link-accounts)** with the same user. 85 | * Support for generating signed [Json Web Tokens](https://docs.auth0.com/jwt) to call your APIs and **flow the user identity** securely. 86 | * Analytics of how, when and where users are logging in. 87 | * Pull data from other sources and add it to the user profile, through [JavaScript rules](https://docs.auth0.com/rules). 88 | 89 | ## Create a Free Auth0 Account 90 | 91 | 1. Go to [Auth0](https://auth0.com) and click Sign Up. 92 | 2. Use Google, GitHub or Microsoft Account to login. 93 | 94 | ## Issue Reporting 95 | 96 | If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/whitehat) details the procedure for disclosing security issues. 97 | 98 | ## Author 99 | 100 | [Auth0](auth0.com) 101 | 102 | ## License 103 | 104 | This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info. 105 | -------------------------------------------------------------------------------- /src/app.ts: -------------------------------------------------------------------------------- 1 | import {Component, View, bootstrap, Pipe, PipeTransform, bind} from 'angular2/angular2'; 2 | 3 | // We use the @Pipe decorator to register the name of the pipe 4 | @Pipe({ 5 | name: 'tempConvert' 6 | }) 7 | // The work of the pipe is handled in the tranform method with our pipe's class 8 | class TempConvertPipe implements PipeTransform { 9 | transform(value: number, args: any[]) { 10 | if(value && !isNaN(value) && args[0] === 'celsius') { 11 | var temp = (value - 32) * 5/9; 12 | var places = args[1]; 13 | return temp.toFixed(places) + ' C'; 14 | } 15 | 16 | return; 17 | } 18 | } 19 | @Component({ 20 | selector: 'pipes' 21 | }) 22 | @View({ 23 | template: ` 24 |

Dates

25 | 26 |

{{ date | date:'mediumDate' }} 27 | 28 |

{{ date | date:'yMMMMd' }} 29 | 30 |

{{ date | date:'shortTime' }} 31 | 32 |

Decimals/Percentages

33 | 34 |

35 | 36 |

37 | 38 |

Async

39 |

40 | 41 |

Custom Pipes - Convert Temperature

42 | 43 |

Fahrenheit: {{ temperature + ' F' }}

44 | 45 |

Celsius: {{ temperature | tempConvert:'celsius':1 }}

46 | `, 47 | // We can pass the pipe class name into the pipes key to make it usable in our views 48 | pipes: [TempConvertPipe] 49 | }) 50 | 51 | class PipesAppComponent { 52 | date: Date; 53 | rating: number; 54 | grade: number; 55 | temperature: number; 56 | promise: Promise; 57 | 58 | constructor() { 59 | this.date = new Date(); 60 | this.rating = 9.1243; 61 | this.grade = 0.99; 62 | this.temperature = 85; 63 | this.promise = new Promise(function(resolve, reject) { 64 | setTimeout(function() { 65 | resolve("Hey, I'm from a promise."); 66 | }, 2000) 67 | }); 68 | } 69 | } 70 | 71 | bootstrap(PipesAppComponent); --------------------------------------------------------------------------------