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. 【Codeforces Round #455 (Div. 2) B】Segments

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 处理出所有的线 其实就是区间. 总共有n*(n+1)/2个 然后按照左端点.右端点排序 每次取最左边的线. 多种可能就取右端点尽量小 ...

  2. 巧用数据流让 Word 文档在线阅读

            常常写博客或空间日记的朋友,对网络编辑器(如图1,是CSDN的博客编辑器)并不陌生.也比較easy做出非常绚烂的排版.但这次在做一个BS的项目,客户一直在用Office的软件中的Wor ...

  3. Oracle实现数据不存在则插入,数据存在则更新(insert or update)

    思路是写一个函数,先按条件查询数据,假设查询到数据则更新.假设没有查询到数据则插入: create or replace function fn_merge_index(statdate in dat ...

  4. ubuntu-系统卡慢解决(转载)

    ubuntu系统狠慢 或者很卡的原因 1.  涉及内存小或者虚拟SWAP分区调整问题    可以通过 系统监视器 进行查看      在UBUNTU系统里面,并不是你的物理内存全部耗尽之后,系统才使用 ...

  5. 84.setlocale

    用法示例 #include <Windows.h> #include <stdio.h> #include<locale.h> void main() { //se ...

  6. Android 技巧 - Debug 判断不再用 BuildConfig

    Android 开发中一般会通过 BuildConfig.DEBUG 判断是否是 Debug 模式,从而做一些在 Debug 模式才开启的特殊操作,比如打印日志.这样好处是不用在发布前去主动修改,因为 ...

  7. (错误记录)git push 报错 403

    在push的时候遇到错误: RPC failed; HTTP curl The requested URL returned error: Forbidden 如果是自己创建的项目的话,可以在网上找到 ...

  8. TabControl里面添加From

    private void dynamicDll() { string dllName = "dll"; Assembly ass = Assembly.Load(dllName); ...

  9. vue项目在其他电脑运行报错

    解决方法1.先删除node_modules文件夹2.$ cnpm cache clean 命令清除掉cache缓存3.cnpm install4.npm run dev

  10. 《你不知道的JavaScript(上)》笔记——let和const

    笔记摘自:<你不知道的JavaScript(上)>第3章 函数作用域和块作用域 let 1.let 关键字可以将变量绑定到所在的任意作用域中 2.let 为其声明的变量隐式地劫持了所在的块 ...