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. 整理wmic使用,不重启变环境变量 .

    整理wmic使用,不重启变环境变量 . 利用wmic修改是直接生效的:(e:\tools 是新添加的目录) wmic ENVIRONMENT where "name='path' and u ...

  2. Android睡眠唤醒机制--Kernel态

    一.简介 Android系统中定义了几种低功耗状态:earlysuspend.suspend.hibernation.       1) earlysuspend: 是一种低功耗的状态,某些设备可以选 ...

  3. 14.ZooKeeper Java API 使用样例

    转自:http://www.aboutyun.com/thread-7332-1-1.html package com.taobao.taokeeper.research.sample; import ...

  4. select into from 与 insert into select 区别

    1.INSERT INTO SELECT语句 语句形式为:Insert into Table2(field1,field2,...) select value1,value2,... from Tab ...

  5. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  6. ASP.NET Core 2.2 十九. 你扔过来个json,我怎么接

    原文:ASP.NET Core 2.2 十九. 你扔过来个json,我怎么接 前文说道了Action的激活,这里有个关键的操作就是Action参数的映射与模型绑定,这里即涉及到简单的string.in ...

  7. Nginx分发服务

    nginx配置分发tomcat服务 http://blog.csdn.net/yan_chou/article/details/53265775 http://www.cnblogs.com/deng ...

  8. AIX上安装Oracle10G软件

    安装准备 (1)确认系统版本号.内核版本号 # oslevel –r   //查看操作系统版本号 //-08能够安装10g,-09能够安装11g watermark/2/text/aHR0cDovL2 ...

  9. Spring Profiles example--转载

    原文地址:http://www.mkyong.com/spring/spring-profiles-example/ Spring @Profile allow developers to regis ...

  10. 第一个hello word 驱动载入失败--------

    今天尝试自己载入第一个驱动模块,依据惯例hello word 然后失败了,如今说明我的操作过程.请个位看看. 首先我的内核版本号: 模块代码与MAKEFILE #include<linux/in ...