Angular : Pipes

<!doctype html>

<html>

<head>
  <script src="./lib/main.ts"></script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {BuiltInPipe} from './builtin_pipes'
import {AsyncPipe} from './async_pipes'
import {CustomPipe} from './custom_pipes'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <b>Built-in Pipes :</b>
      <person></person>
      ------------------------------------------
      <br />
      <b>Async Pipes :</b>
      <person-async></person-async>
      <br />
      ------------------------------------------
      <br />
      <b>Custom Pipes :</b>
      <br />
      <p>
      You owe {{500 | appendUSD}}
      </p>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, BuiltInPipe, AsyncPipe, CustomPipe ],
  bootstrap: [ App ]
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

h1,
p {
    font-family: sans-serif;
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'appendUSD' })
export class CustomPipe implements PipeTransform {
  transform(amount: string) {
    return amount + ' USD';
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'person',
  template: `<p>The {{name}}'s birthday is {{ birthday | date }}</p>`
})
export class BuiltInPipe {
  name = 'Alex';
  birthday = new Date(1987, 1, 10); // April 15, 1988
}

import { Component } from '@angular/core';
import { Observable, interval, pipe } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Component({
  selector: 'person-async',
  template: `
    <p>Comment: {{ comment$ | async }}</p>
    <button (click)="getComment()">Get Comment</button>`,
})
export class AsyncPipe {
  comment$: Observable<string>;

  private comments = [
    'Comment 1',
    'Comment 2',
    'Comment 3'
  ];

  constructor() { this.getComment(); }

  getComment() {
    this.comment$ = interval(500).pipe(
      map(i => this.comments[i]),
      take(this.comments.length));
  }
}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^7.0.0-rc.0",
        "@angular/compiler": "^7.0.0-rc.0",
        "@angular/core": "^7.0.0-rc.0",
        "@angular/platform-browser": "^7.0.0-rc.0",
        "@angular/platform-browser-dynamic": "^7.0.0-rc.0",
        "core-js": "^2.5.5",
        "rxjs": "^6.1.0",
        "zone.js": "^0.8.26"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}