@angular/common#DecimalPipe TypeScript Examples

constructor(
    private sysfs: SysFsService,
    private electron: ElectronService,
    private decimalPipe: DecimalPipe,
    public overlayContainer: OverlayContainer,
    @Inject(LOCALE_ID) localeId) {
      this.localeId = localeId;
      this.languageMap = {};
      for (const lang of this.getLanguagesMenuArray()) {
        this.languageMap[lang.id] = lang;
      }

      if (localStorage.getItem('themeClass')) {
        this.themeClass = new BehaviorSubject<string>(localStorage.getItem('themeClass'));
      } else {
        this.themeClass = new BehaviorSubject<string>('light-theme');
      }
    }

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
        PlayersModule,
    ],
    providers: [
        DecimalPipe,
        ...maintenanceServices.services,
    ],
    declarations: [
        ...maintenanceContainers.containers,
    ],
    exports: [
        ...maintenanceContainers.containers,
    ],
})
export class MaintenanceModule {}

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
        PlayersModule,
    ],
    providers: [
        DecimalPipe,
        ...services.services,
    ],
    declarations: [
        ...containers.containers,
    ],
    exports: [
        ...containers.containers,
    ],
})
export class SettingsModule {}

public constructor(
        protected pipe: DecimalPipe,
        protected appCommon: AppCommonService,
    ) {

        this.listenToPlayerChanges();

        this._search$
            .pipe(
                tap(() => this._loading$.next(true)),
                debounceTime(120),
                switchMap(() => this._search()),
                delay(120),
                tap(() => this._loading$.next(false)),
            )
            .subscribe((result) => {
                this._players$.next(result.players);
                this._total$.next(result.total);
            });

        this._search$.next();
    }

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
    ],
    providers: [
        DecimalPipe,
        ...playersServices.services,
        ...playersDirectives.directives,
    ],
    declarations: [
        ...playersContainers.containers,
        ...playersComponents.components,
        ...playersDirectives.directives,
    ],
    exports: [
        ...playersContainers.containers,
        ...playersComponents.components,
    ],
})
export class PlayersModule {}

describe('PlayerTableComponent', () => {
    let fixture: ComponentFixture<TestHostComponent>;
    let hostComponent: TestHostComponent;
    let hostComponentDE: DebugElement;
    let hostComponentNE: Element;

    let component: PlayerTableComponent;
    let componentDE: DebugElement;
    let componentNE: Element;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [TestHostComponent, PlayerTableComponent],
            imports: [NoopAnimationsModule],
            providers: [DecimalPipe],
            schemas: [NO_ERRORS_SCHEMA],
        }).compileComponents();

        fixture = TestBed.createComponent(TestHostComponent);
        hostComponent = fixture.componentInstance;
        hostComponentDE = fixture.debugElement;
        hostComponentNE = hostComponentDE.nativeElement;

        componentDE = hostComponentDE.children[0];
        component = componentDE.componentInstance;
        componentNE = componentDE.nativeElement;

        fixture.detectChanges();
    });

    it('should display the component', () => {
        expect(hostComponentNE.querySelector('sb-player-table')).toEqual(jasmine.anything());
    });
});

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
        LeafletModule,
    ],
    providers: [
        DecimalPipe,
        ...services.services,
    ],
    declarations: [
        ...containers.containers,
    ],
    exports: [
        ...containers.containers,
    ],
})
export class MapModule {}

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        CdkScrollableModule,
        ScrollingModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
    ],
    providers: [
        DecimalPipe,
        ...services.services,
    ],
    declarations: [
        ...containers.containers,
        LogMonitorComponent,
    ],
    exports: [
        ...containers.containers,
        LogMonitorComponent,
    ],
})
export class LogsModule {}

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
        PlayersModule,
        AgGridModule.withComponents([
            ...renderers,
        ]),
        NgSelectModule,
    ],
    providers: [
        DecimalPipe,
        ...services.services,
    ],
    declarations: [
        ...containers,
        ...renderers,
    ],
    exports: [
        ...containers,
        ...renderers,
    ],
})
export class FilesModule {}

public constructor(
        protected pipe: DecimalPipe,
        protected appCommon: AppCommonService,
    ) {

        this.listenToPlayerChanges();

        this._search$
            .pipe(
                tap(() => this._loading$.next(true)),
                debounceTime(120),
                switchMap(() => this._search()),
                delay(120),
                tap(() => this._loading$.next(false)),
            )
            .subscribe((result) => {
                this._audits$.next(result.audits);
                this._total$.next(result.total);
            });

        this._search$.next();
    }

describe('PlayerTableComponent', () => {
    let fixture: ComponentFixture<TestHostComponent>;
    let hostComponent: TestHostComponent;
    let hostComponentDE: DebugElement;
    let hostComponentNE: Element;

    let component: PlayerTableComponent;
    let componentDE: DebugElement;
    let componentNE: Element;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [TestHostComponent, PlayerTableComponent],
            imports: [NoopAnimationsModule],
            providers: [DecimalPipe],
            schemas: [NO_ERRORS_SCHEMA],
        }).compileComponents();

        fixture = TestBed.createComponent(TestHostComponent);
        hostComponent = fixture.componentInstance;
        hostComponentDE = fixture.debugElement;
        hostComponentNE = hostComponentDE.nativeElement;

        componentDE = hostComponentDE.children[0];
        component = componentDE.componentInstance;
        componentNE = componentDE.nativeElement;

        fixture.detectChanges();
    });

    it('should display the component', () => {
        expect(hostComponentNE.querySelector('sb-player-table')).toEqual(jasmine.anything());
    });
});

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
        PlayersModule,
    ],
    providers: [
        DecimalPipe,
        ...auditServices.services,
    ],
    declarations: [
        ...auditContainers.containers,
        AuditTableComponent,
    ],
    exports: [
        ...auditContainers.containers,
        AuditTableComponent,
    ],
})
export class AuditModule {}

constructor(private currencyPipe: CurrencyPipe,
              private decimalPipe: DecimalPipe,
              private percentPipe: PercentPipe) {
  }

public constructor(
        protected pipe: DecimalPipe,
        protected appCommon: AppCommonService,
    ) {

    }

public constructor(
        protected pipe: DecimalPipe,
        protected appCommon: AppCommonService,
    ) {
        super(pipe, appCommon);
    }

constructor(
    private apiService: ApiService,
    private decimalPipe: DecimalPipe,
    private datePipe: DatePipe,
    private authService: AuthService
  ) {}

@NgModule({
  declarations: [
    AppComponent,
    ProfileManagerComponent,
    SupportComponent,
    ProfileOverviewTileComponent,
    ProfileDetailsEditComponent,
    InfoComponent,
    CpuDashboardComponent,
    GlobalSettingsComponent,
    ShutdownTimerComponent,
    ToolsComponent,
    ChangeCryptPasswordComponent,
    FanGraphComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxElectronModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatIconModule,
    MatTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatButtonModule,
    MatCardModule,
    MatChipsModule,
    MatExpansionModule,
    MatInputModule,
    MatTooltipModule,
    MatCheckboxModule,
    MatDividerModule,
    MatSliderModule,
    MatGridListModule,
    MatStepperModule,
    MatButtonToggleModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MarkdownModule.forRoot(),
    OverlayModule,
    GaugeModule.forRoot(),
    ChartsModule
  ],
  providers: [
    DecimalPipe,
    ThemeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [
    AdvanceState,
    InitialsPipe,
    EllipsisPipe,
    HighlightPipe,
    HumanizeCurrencyPipe,
    ReportState,
    SnakeCaseToSpaceCase,
    DateFormatPipe,
    FySelectComponent,
    FySelectModalComponent,
    FySelectVendorComponent,
    FySelectVendorModalComponent,
    FyLocationComponent,
    FyMultiselectComponent,
    FyUserlistComponent,
    FyLocationModalComponent,
    FyMultiselectModalComponent,
    FyUserlistModalComponent,
    FyAlertComponent,
    FyDuplicateDetectionComponent,
    FyDuplicateDetectionModalComponent,
    DelegatedAccMessageComponent,
    CurrencyComponent,
    CommentsHistoryComponent,
    ViewCommentComponent,
    AuditHistoryComponent,
    StatusesDiffComponent,
    FyPreviewAttachmentsComponent,
    FyZeroStateComponent,
    FyPreviewAttachmentsComponent,
    FyPopupComponent,
    FyApproverComponent,
    ApproverDialogComponent,
    FyPreviewAttachmentsComponent,
    FyCategoryIconComponent,
    FyMenuIconComponent,
    FyPolicyViolationInfoComponent,
    FyAddToReportComponent,
    FyAddToReportModalComponent,
    FormButtonValidationDirective,
    FySelectProjectComponent,
    FyProjectSelectModalComponent,
    FyViewAttachmentComponent,
    FyHighlightTextComponent,
    FormatDateDirective,
    ExpenseState,
    FooterComponent,
    FyLoadingScreenComponent,
    FyAlertInfoComponent,
    ReviewFooterComponent,
    NavigationFooterComponent,
    FyConnectionComponent,
    FyCriticalPolicyViolationComponent,
    PopupAlertComponentComponent,
    CreateNewReportComponent,
    ExpensesCardComponent,
    ToastMessageComponent,
    FyHeaderComponent,
    FyDeleteDialogComponent,
    FyFiltersComponent,
    FyFilterPillsComponent,
    ReceiptPreviewThumbnailComponent,
    RouteVisualizerComponent,
    RouteSelectorComponent,
    RouteSelectorModalComponent,
    PolicyViolationDetailsComponent,
    FyViewReportInfoComponent,
    BankAccountCardsComponent,
    BankAccountCardComponent,
    DeleteButtonComponent,
    AddApproversPopoverComponent,
    ExpenseCardLiteComponent,
    BankAccountCardsComponent,
    BankAccountCardComponent,
    DeleteButtonComponent,
    PersonalCardTransactionComponent,
    FyInputPopoverComponent,
    FyPopoverComponent,
    SidemenuComponent,
    SidemenuHeaderComponent,
    SidemenuFooterComponent,
    SidemenuContentComponent,
    SidemenuContentItemComponent,
    FyNavFooterComponent,
    SendEmailComponent,
    CaptureReceiptComponent,
    ReceiptPreviewComponent,
    AddMorePopupComponent,
    CropReceiptComponent,
    FyNumberComponent,
    FyStatisticComponent,
    FySummaryTileComponent,
    ViewExpenseSkeletonLoaderComponent,
    SpentCardsComponent,
    CardDetailComponent,
    MaskNumber,
  ],
  imports: [
    CommonModule,
    IonicModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    MatInputModule,
    MatFormFieldModule,
    MatIconModule,
    MatCheckboxModule,
    MatButtonModule,
    ReactiveFormsModule,
    PinchZoomModule,
    PdfViewerModule,
    MatRippleModule,
    MatRadioModule,
    MatDatepickerModule,
    MatChipsModule,
    GoogleMapsModule,
    MatChipsModule,
    SwiperModule,
    MatSnackBarModule,
    RouterModule,
    MatBottomSheetModule,
    ImageCropperModule,
  ],
  exports: [
    EllipsisPipe,
    HumanizeCurrencyPipe,
    ReportState,
    DateFormatPipe,
    FySelectComponent,
    FySelectVendorComponent,
    FyLocationComponent,
    FyMultiselectComponent,
    FyUserlistComponent,
    FyAlertComponent,
    FyDuplicateDetectionComponent,
    AdvanceState,
    SnakeCaseToSpaceCase,
    InitialsPipe,
    DelegatedAccMessageComponent,
    IconModule,
    CurrencyComponent,
    CommentsHistoryComponent,
    AuditHistoryComponent,
    StatusesDiffComponent,
    FormButtonValidationDirective,
    MatProgressSpinnerModule,
    FyPreviewAttachmentsComponent,
    FyZeroStateComponent,
    FyPreviewAttachmentsComponent,
    FyPopupComponent,
    FyApproverComponent,
    FyPreviewAttachmentsComponent,
    FyCategoryIconComponent,
    FyMenuIconComponent,
    FyPolicyViolationInfoComponent,
    FyAddToReportComponent,
    FySelectProjectComponent,
    FyProjectSelectModalComponent,
    FyViewAttachmentComponent,
    FyHighlightTextComponent,
    FormatDateDirective,
    ExpenseState,
    FooterComponent,
    FyLoadingScreenComponent,
    FyAlertInfoComponent,
    ReviewFooterComponent,
    NavigationFooterComponent,
    FyConnectionComponent,
    FyCriticalPolicyViolationComponent,
    PopupAlertComponentComponent,
    CreateNewReportComponent,
    ExpensesCardComponent,
    ToastMessageComponent,
    FyHeaderComponent,
    FyDeleteDialogComponent,
    FyFiltersComponent,
    FyFilterPillsComponent,
    ReceiptPreviewThumbnailComponent,
    RouteVisualizerComponent,
    RouteSelectorComponent,
    MatChipsModule,
    PolicyViolationDetailsComponent,
    ExpenseCardLiteComponent,
    BankAccountCardsComponent,
    PersonalCardTransactionComponent,
    FyPopoverComponent,
    SidemenuComponent,
    FyNavFooterComponent,
    SendEmailComponent,
    CaptureReceiptComponent,
    ReceiptPreviewComponent,
    AddMorePopupComponent,
    CropReceiptComponent,
    FyNumberComponent,
    FyStatisticComponent,
    FySummaryTileComponent,
    ViewExpenseSkeletonLoaderComponent,
    SpentCardsComponent,
    CardDetailComponent,
    MaskNumber,
  ],
  providers: [DecimalPipe, DatePipe, HumanizeCurrencyPipe, ImagePicker],
})
export class SharedModule {}

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.scss'],
  providers: [CurrencyPipe, DecimalPipe, PercentPipe]
})
export class OrdersComponent implements OnInit {
  orders: Order[];
  ordersTableColumns: TableColumn[];

  constructor(private currencyPipe: CurrencyPipe,
              private decimalPipe: DecimalPipe,
              private percentPipe: PercentPipe) {
  }

  ngOnInit(): void {
    this.initializeColumns();
    this.orders = this.getOrders();
  }

  sortData(sortParameters: Sort) {
    const keyName = sortParameters.active;
    if (sortParameters.direction === 'asc') {
      this.orders = this.orders.sort((a: Order, b: Order) => a[keyName].localeCompare(b[keyName]));
    } else if (sortParameters.direction === 'desc') {
      this.orders = this.orders.sort((a: Order, b: Order) => b[keyName].localeCompare(a[keyName]));
    } else {
      return this.orders = this.getOrders();
    }
  }

  removeOrder(order: Order) {
    this.orders = this.orders.filter(item => item.id !== order.id);
  }

  initializeColumns(): void {
    this.ordersTableColumns = [
      {
        name: 'book name',
        dataKey: 'description',
        position: 'left',
        isSortable: true
      },
      {
        name: 'ordered amount',
        dataKey: 'amount',
        position: 'right',
        isSortable: false
      },
      {
        name: 'book price',
        dataKey: 'price',
        position: 'right',
        isSortable: true
      },
      {
        name: 'book discount',
        dataKey: 'discount',
        position: 'right',
        isSortable: false
      },
    ];
  }

  getOrders(): any[] {
    return [
      {
        id: 1,
        description: 'first book',
        amount: this.decimalPipe.transform(2, '.1'),
        price: this.currencyPipe.transform(15),
        discount: this.percentPipe.transform(0, '.2')
      },
      {
        id: 2,
        description: 'second book',
        amount: this.decimalPipe.transform(1, '.1'),
        price: this.currencyPipe.transform(42.5),
        discount: this.percentPipe.transform(0.1, '.2')
      },
      {
        id: 3,
        description: 'third book',
        amount: this.decimalPipe.transform(4, '.1'),
        price: this.currencyPipe.transform(12.99),
        discount: this.percentPipe.transform(0.05, '.2')
      },
      {
        id: 4,
        description: 'fourth book',
        amount: this.decimalPipe.transform(1, '.1'),
        price: this.currencyPipe.transform(19.99),
        discount: this.percentPipe.transform(0.02, '.2')
      },
      {
        id: 5,
        description: 'fifth book',
        amount: this.decimalPipe.transform(8),
        price: this.currencyPipe.transform(10.25),
        discount: this.percentPipe.transform(0.2, '.2')
      }
    ];
  }
}