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. codevs 5960 信使

    codevs 5960 信使 题目描述 Description 战争时期,前线有n个哨所,每个哨所可能会与其他若干个哨所之间有通信联系.信使负责在哨所之间传递信息,当然,这是要花费一定时间的(以天为单 ...

  2. python 命令行參数解析

    本文是从我还有一个博客转载过来的,欢迎大家点击进去看一下,帮我添加点人气^_^ ImPyy 选择模块 依据python參考手冊的提示,optparse 已经废弃,应使用 argparse 教程 概念 ...

  3. 18. springboot整合jsp

    转自:https://blog.csdn.net/u012562943/article/details/51836729

  4. ES5比较Jquery中的each与map 方法?

    1.each es5: var arr = [1, 5, 7, 8, 9];var arr1 = []; arr.forEach(function (v, i) { arr1.push(v * 4) ...

  5. GO语言学习(十二)Go 语言函数

    Go 语言函数 函数是基本的代码块,用于执行一个任务. Go 语言最少有个 main() 函数. 你可以通过函数来划分不同功能,逻辑上每个函数执行的是指定的任务. 函数声明告诉了编译器函数的名称,返回 ...

  6. Android车载导航的一些困境

    车载导航从最初的用解码芯片,过渡到用WinCE系统,已经形成了一个较大的产业.车载导航使用上的一些大原则,基本上被固定了下来.如今WinCE走到了尽头,Android车载导航開始发力,但由于Andro ...

  7. NHibernate3剖析:Mapping篇之集合映射基础(2):Bag映射

    系列引入 NHibernate3.0剖析系列分别从Configuration篇.Mapping篇.Query篇.Session策略篇.应用篇等方面全面揭示NHibernate3.0新特性和应用及其各种 ...

  8. 策略模式 VS 桥梁模式

    这对冤家终于碰头了,策略模式与桥梁模式是如此相似,简直就是孪生兄弟,要把它们两个分开需要花费大量智力,我们来看看两者的通用类图,如图33-1所示. 图33-1 策略模式(左)和桥梁模式(右)通用类图 ...

  9. oled屏幕模块

    oled屏幕模块似乎是厂家提供的 也许可以根据屏幕驱动芯片去写 根据现在了解的芯片一般有两个:SH1106和SSD1306 不过这次我们用的是SSD1306芯片驱动的屏幕 下面是从裸屏到模块的pcb: ...

  10. Python 极简教程(三)数据类型

    每种语言都有各种数据类型.这就像在现实生活中,我们计数的时候需要用到数字,在表述金额.重量.距离等需要精确计数时用到小数,在日常交谈中要用文字,等等.在计算机语言中,为了表述不同的情况,也需要用到各种 ...