Angular number pipe doesn't work in a modal-CodePudding

I get an error - Error: NG0302: The pipe 'number' could not be found! when I used it in a modal of my Ionic Framework Angular app. The code below works fine in the parent page and other places in the app without any pipe declarations. It just fails in the modal.

{{ data.amount | number: '1.2-2'}}

I even tried the following to see if I can somehow convert my amount to two decimal places or may be put through a pipe but no success.

{{ data.amount*1.00 }}

CodePudding user response：

Without really knowing your file-structure I think the following is happening, correct me if im wrong:

Pages-folder
- parent-page-folder
  - parent.page.html
  - parent.page.ts
  - parent.page.scss
  - parent.module.ts
  - parent-routing.module.ts
  - modal-component-folder
    - modal.component.ts
    - modal.component.html
    - modal.component.scss

As you can see by this structure your modal.component does not have a module and thus do not have the necessary imports to use any built in functions from angular. What you can do is create a modal.module.ts and import the modules needed. it could look like this:

Parent-module:

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

import { IonicModule } from '@ionic/angular';

import { ParentPageRoutingModule } from './parent-routing.module';

import { ParentPage } from './parent.page';
import { ModalModule } from './modal/modal.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ModalModule, // <-- needs to be declared in parent module 
    ParentPageRoutingModule,
  ],
  declarations: [ParentPage]
})
export class ParentPageModule {}

and the manually created modal-module:

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

import { IonicModule } from '@ionic/angular';
import { ModalComponent } from './modal.component';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,

  ],
  exports: [
    CommonModule,
    FormsModule,
    IonicModule],
  declarations: [ModalComponent]
})
export class ModalModule {}

Hopefully this gives you some insight in how you make different functionalities known to components in angular, even if they are built in.

CodePudding user response：

Found a much simpler and easier workaround for this -

In my page.ts file - I got the amount value from the array and used the javascript toFixed function to convert my amount to 2 decimals. This is not ideal but it works. To use the angular way, it required importing and declaring DecimalPipe at so many places.

 this.amount = this.amount.toFixed(2);

Angular 1.0 used to be so simple to use. After that it has become a bag of frustrations. Next app in React for sure.