Unknown Pipe in Angular

Question

In the indice page, I would like to format the number to two decimal in the cours column.

Example: 11345.654589 to 11345.65.

I created a format-num.pipe folder in shared/pipes.

pipes.module.ts

import { NgModule } from '@angular/core';
import { CommonModule, DecimalPipe } from '@angular/common';
import { FormatNumPipe } from './format-num.pipe';

@NgModule({
  declarations: [
    FormatNumPipe
  ],
  imports: [
    CommonModule
  ],

  providers: [
    DecimalPipe,
  ]

})
export class PipesModule { }

format-num.pipe.ts

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

@Pipe({
  name: 'formatNum'
})
export class FormatNumPipe implements PipeTransform {


  constructor(private decimalPipe: DecimalPipe) {
  }

  transform(input: number | string | null | undefined, digitsInfo?: string): string | null {
    return this.decimalPipe.transform(input, digitsInfo);
  }

}

indice.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { IndiceComponent } from './indice.component';
import { PipesModule } from 'src/app/shared/pipes/pipes.module';


@NgModule({
  declarations: [
    IndiceComponent
  ],
  imports: [
    CommonModule,
    PipesModule,
  ]
})
export class IndiceModule { }

indice.component.html

<td class="text-end"> {{ indiceData.valeur | formatNum:'1.2-2' }} </td>

The error message is:

src/app/views/dashboard/views/market/views/indice/indice.component.html:18:66 - error NG8004: No pipe found with name 'formatNum'.

18  <td class="text-end"> {{ indiceData.valeur | formatNum:'1.2-2' }} </td>

My code is available on Stackblitz.

On this page here... They say that it's a problem with the module declaration? But I made a declaration.

Answer 1

I guess that you miss to export your pipe.

In pipes.module.ts:

exports: [
    FormatNumPipe
  ],

NOTE: you have an error (an extra '}') at the final of the format-num.pipe file.