AngularDart v4 Custom pipe, OrderByPipe

wp-admin

7 years ago

AngularDart v4 Sample Code,Demo

AngularDart : 4.0.0
Dart : 1.24.1

Loading…

(html)
<head>
.....
  <script defer src="main.dart" type="application/dart"></script>
  <script defer src="packages/browser/dart.js"></script>
</head>
<body>
  <my-app>Loading...</my-app>
</body>

(pubspec.yaml)
.....
environment:
  sdk: '>=1.24.0

(main.dart)
import 'package:angular/angular.dart';
import 'orderby_pipe.dart';

@Component(
  selector: 'my-app',
  template: '''
<table class="table">
  <thead>
    <tr><th>Product Name</th><th>Product Price</th></tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of products | orderby: key">
      <td>{{item["name"]}}</td>
      <td>{{item["price"] | currency:'JPY':true}}</td>
    </tr>
  </tbody>
</table>
    ''',
  directives: const [CORE_DIRECTIVES],
  pipes: const [COMMON_PIPES, OrderbyPipe]
)
class AppComponent {
  List<Map> products = [
    { "name": "digital camera-A","price": 8500},
    { "name": "digital camera-D","price": 3500},
    { "name": "computer-B"      ,"price": 15900},
    { "name": "digital camera-B","price": 9800},
    { "name": "computer-D"      ,"price": 5900},
    { "name": "computer-C"      ,"price": 25900},
    { "name": "computer-A"      ,"price": 14900}
  ];
  String key = 'price';
}

void main() {
  bootstrap(AppComponent);
}


(orderby_pipe.dart)
import 'package:angular/angular.dart';

@Pipe('orderby')
class OrderbyPipe extends PipeTransform {
  List<Map> transform(List<Map> array, String key) {
    array.sort((Map a, Map b) {
      if (a[key] < b[key]) {
        return -1;
      } else if (a[key] > b[key]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}