For example we want to create a pipe, to tranform byte to Mb.

We using it in html like:

    <div>
<div *ngFor="let file of files">
<p>{{ file.size | filesize: 'MB' }}</p>
</div>
</div>

Create pipe:

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

@Pipe({
name: 'filesize'
})
export class FileSizePipe implements PipeTransform{
transform(value: number, ext: string = "MB") {
return (value / ( * )).toFixed() + ' ' + ext;
}
}

[Angular] Create a custom pipe的更多相关文章

  1. [Angular] Create a custom validator for reactive forms in Angular

    Also check: directive for form validation User input validation is a core part of creating proper HT ...

  2. [Angular] Create a custom validator for template driven forms in Angular

    User input validation is a core part of creating proper HTML forms. Form validators not only help yo ...

  3. Part 13 Create a custom filter in AngularJS

    Custom filter in AngularJS 1. Is a function that returns a function 2. Use the filter function to cr ...

  4. [转]How do you create a custom AuthorizeAttribute in ASP.NET Core?

    问: I'm trying to make a custom authorization attribute in ASP.NET Core. In previous versions it was ...

  5. How could I create a custom windows message?

    [问题] Our project is running on Windows CE 6.0 and is written in C++ . We have some problems with the ...

  6. [RxJS] Chain RxJS Operators Together with a Custom `pipe` Function using Array.reduce

    Instead of writing complex operators, it's usually best to write simple, single-purpose operators th ...

  7. how to create react custom hooks with arguments

    how to create react custom hooks with arguments React Hooks & Custom Hooks // reusable custom ho ...

  8. [Angular] Create custom validators for formControl and formGroup

    Creating custom validators is easy, just create a class inject AbstractControl. Here is the form we ...

  9. [Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor

    If you're coming from AngularJS (v1.x) you probably remember the ng-true-value and ng-false-value di ...

随机推荐

  1. SFC梯形图编程

    SFC是居首的PLC编程语言 !: 不能为PLC所执行, 还需要其他的编程语言(梯形图) 转换成PLC可执行程序. 常用的SFC编程方法有三种 >  应用启保停电路进行 >  应用 置/复 ...

  2. 用py2exe打包成一个exe文件

    用py2exe打包成一个exe文件 http://blog.csdn.net/franktan2010/article/details/46514607

  3. 10. ZooKeeper之搭建伪集群模式。

    转自:https://blog.csdn.net/en_joker/article/details/78673456 在集群和单机两种模式下,我们基本完成了分别针对生产环境和开发环境ZooKeeper ...

  4. amazeui学习笔记--css(常用组件13)--进度条Progress

    amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...

  5. Perl——正则表达式(四) 查找替换s///

    转自http://blog.csdn.net/blog_abel/article/details/40589227 侵删 一. 介绍 使用 s/regex/replacement/modifiers  ...

  6. [React] Close the menu component when click outside the menu

    Most of the time, your components respond to events that occur within the component tree by defining ...

  7. Kinect开发笔记之三Kinect开发环境配置具体解释

            0.前言:        首先说一下我的开发环境,Visual Studio是2013的,系统是win8的64位版本号,SDK是Kinect for windows SDK 1.8版本 ...

  8. Android JavaMail介绍及发送一封简单邮件

    本文来自:高爽|Coder,原文地址:http://blog.csdn.net/ghsau/article/details/17839983,转载请注明.       JavaMail是SUN提供给开 ...

  9. python课程:python3函数

    摘自廖雪峰的网站:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014316 ...

  10. 《ECMAScript6入门》笔记——Generator函数

    今天在看<ECMAScript6入门>的第17章——Generator函数的语法.理解起来还是有点费劲,几段代码看了很多遍.总算有点点理解了. 示例代码如下:(摘自阮一峰<ECMAS ...