Dart. Academy /pipe-tricks…

Academy/Author/Mont…

Published: June 30, 2016-4 minutes to read

Pipes in Angular (called filters in Angular 1.x) are a great, convenient way to keep your application data clean and free of visual illusion, but still present that data to your users in an attractive way. Currencies are a good example of this. Users like to see currency symbols, like dollar signs and their numbers, but internally, your code doesn’t use those symbols. You want to do math on these numbers. Users also disdain to see more than two decimal points of currency. With pipes, you can keep everyone happy.

The code was tested with Dart SDK 1.24.2 and AngularDart 4.0.0.

Dart

Dart is an open source, extensible, object-oriented programming language with powerful libraries and runtimes for building Web, server, and mobile applications. It was originally developed by Google, but has since become an ECMA standard.

Introduction to the Dart

Check out the Dart Language Tour for a crash course in the Dart language. If you already know JavaScript, Java, PHP, ActionScript, C/C++/C#, or other “curly brace” languages, you’ll find Dart is familiar and you can use Dart for production in an hour or so.

If you like learning from videos, check out Learn Dart in a Video.

To obtain the Dart

Before you enter the exciting world of Dart code writing, you’ll need to download the Dart SDK and a special browser called Dartium for web apps.

• The Dart SDK and Dartium
  • On Windows? Try the Dart for Windows installer, or use Chocolatey.
  • On the Mac? Use Homebrew.
  • On Linux? Use apt-get or Dart Debian packages.
  • Dart-up is a great choice for Windows, Mac, or Linux.

AngularDart

AngularDart is the Dart version of the popular Angular Web application framework. The current concepts and semantics are almost identical, but since AngularDart is a standalone project, it is not guaranteed to be completely in sync with the TypeScript version. If you’re wondering why you might want to use AngularDart instead of the more mainstream Angular, here are seven reasons.

Quick start

To get the AngularDart app up and running quickly, try the quick start tutorial.

The pipe

A pipe is basically an intermediate converter that takes a value, operates on it in some way, and then spits out new values. Angular provides a number of ready-made pipes, including pipes for formatting dates, capitalizing or lowercase strings, and pipes for formatting percentage values. You can also create custom pipes.

Make the pipe available

The typical approach is to import the pipe class into your Angular Component and then include it in the @Component Decorator pipes list.

lib/app_component.dart

import 'package:angular/angular.dart';

@Component(selector: 'my-app',
    templateUrl: 'app_component.html',
    pipes: const [CurrencyPipe]
)
class AppComponent {

  AppComponent();
}
Copy the code

If this declaration of common pipes seems like an effort, there is a trick that allows any given component to use all Angular pipes. Angular defines a constant called COMMON_PIPES that you can use to get all pipes at once.

lib/app_component.dart

import 'package:angular/angular.dart';

@Component(selector: 'my-app',
    templateUrl: 'app_component.html',
    pipes: const [COMMON_PIPES]
)
class AppComponent {

  AppComponent();
}
Copy the code

With these, you can access all Angular’s convenient pipes without having to declare them separately.

Percentage pipe

Using one of Angular’s built-in pipes, let’s take a look at an example. Suppose you have a floating point value that represents a percentage, called progress, and you want to display it in your view.

lib/app_component.dart

class AppComponent {

  num progress = 0.259;

  AppComponent();
}
Copy the code

lib/app_component.html

<p>Total progress is: {{progress}}</p>
Copy the code

Angular’s interpolation output will be.

The Total progress is: 0.259Copy the code

This output can be confusing to your users because it does not provide any indication that this is a percentage. Let’s improve the display with PercentPipe.

lib/app_component.html

<p>Total progress is: {{progress | percent}}</p>
Copy the code

Now it looks something like this.

The Total progress is: 25.9%Copy the code

Much better! It is now clear that we are talking about a part of a whole. What if we wanted more control over how the numbers were displayed? Maybe in a table, we want all the numbers to line up nicely.

Pipes can accept parameters

Fortunately, the Angular team did not disappoint us here. PercentPipe, like many pipes, is configurable. It can take a value, digitInfo, which allows you to format the position of the number, including using padding if necessary.

lib/app_component.html

<p>The Total progress is: {{progress | percent: '4.3 5'}}</p>
Copy the code

The parameters passed here follow the pattern: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

Now you have it.

The Total progress is: 0025.900%Copy the code

Asynchronous pipe

Maybe you don’t have your percentages yet. It may come from a remote source and be sent asynchronously to your client. This is where AsyncPipe comes in. Looking at this example, we’re linking AsyncPipe and PercentPipe to show progress.

lib/app_component.html

<p>The Total progress is: {{progressStream | async | percent: '1.2 2}}</p>
Copy the code

lib/app_component.dart

import 'dart:async';
import 'package:angular/angular.dart';

@Component(selector: 'my-app',
    templateUrl: 'app_component.html'
)
class AppComponent {

  Stream<num> progressStream;

  AppComponent() {
    Duration delay = new Duration(milliseconds: 500);
    progressStream = 
      new Stream.periodic(delay, (int index) => index * 0.005); }}Copy the code

If you run this code, you’ll see that the value increases by 0.5% every half second as data is fed into the progressStream.

The Total progress is: 8.50%Copy the code

Create custom pipes

Of course, you can create your own pipes. Pipes are free to transform a value in any complex way you want, but in this case, it will be very simple. It will add the “degree” sign to the end of any value passed in.

First, create the pipe class.

lib/degrees_pipe.dart

import 'package:angular/angular.dart';

@Pipe(name: 'degrees')
class DegreesPipe extends PipeTransform {
  String transform(val, [List args]) => "$val°";
}
Copy the code

Then tell it to your component. For custom pipes, you need to remember to add it to the list of pipes in your @Component decorator, otherwise your template won’t know what you’re talking about.

lib/app_component.dart

import 'package:angular/angular.dart';

import 'degrees_pipe.dart';

@Component(selector: 'my-app',
    templateUrl: 'app_component.html',
    pipes: const [DegreesPipe]
)
class AppComponent {

  num temperature = 65;

  AppComponent();
}
Copy the code

Finally, use it in your view template.

lib/app_component.html

<p>Temperature is: {{temperature | degrees}}</p>
Copy the code

And the output.

Temperature is: 65 °Copy the code

conclusion

Thank you for joining us for this (and probably the only) episode of Tube Tips. Until next time, use Angular, use Dart, and use good judgment.

---

Translation via www.DeepL.com/Translator (free version)