[Angular] Pipes as providers

In this example, we are going to see how to use Pipe as providers inject into component.

 

We have the pipe:

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

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

 

We want to inject this pipe as provider to the component:

import { Component, OnInit } from '@angular/core';
import {FileSizePipe} from './filesize.pipe';

interface File {
  name: string,
  size: number | string,
  type: string
}

@Component({
  selector: 'app-root',
  template: `
    <div>
      <div *ngFor="let file of files">
        <p>{{ file.name }}</p>
        <p>{{ file.size | filesize: 'MB' }}</p>
      </div>
      <hr>
      <div *ngFor="let file of mapped">
        <p>{{ file.name }}</p>
        <p>{{ file.size }}</p>
      </div>
    </div>
  `,
  providers: [
    FileSizePipe
  ]
})
export class AppComponent implements OnInit {
  files: File[];
  mapped: File[];

  constructor(
      private fp: FileSizePipe
  ) {
  }

  ngOnInit() {
    this.files = [
      { name: 'logo.svg', size: 2120109, type: 'image/svg' },
      { name: 'banner.jpg', size: 18029, type: 'image/jpg' },
      { name: 'background.png', size: 1784562, type: 'image/png' }
    ];
    this.mapped = this.files.map((file) => ({
      name: file.name,
      type: file.type,
      size: this.fp.transform(Number(file.size), 'mb')
    }));
  }
}

 

As we can see, we use 'providers' keyword in the @Component:

  providers: [
    FileSizePipe
  ]

 

This enable us to inject pipe into component:

  constructor(
      private fp: FileSizePipe
  ) {
  }

 

Then we just need to call transform method on the pipe:

    this.mapped = this.files.map((file) => ({
      name: file.name,
      type: file.type,
      size: this.fp.transform(Number(file.size), 'mb')
    }));

 

In the html. we don't need to use '|filesize: 'MB'' anymore:

      <div *ngFor="let file of mapped">
        <p>{{ file.name }}</p>
        <p>{{ file.size }}</p>
      </div>