@angular/common#DecimalPipe TypeScript Examples

The following examples show how to use @angular/common#DecimalPipe. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: utils.service.ts    From tuxedo-control-center with GNU General Public License v3.0 7 votes vote down vote up 
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');
      }
    }
Example #2
Source File: maintenance.module.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
        PlayersModule,
    ],
    providers: [
        DecimalPipe,
        ...maintenanceServices.services,
    ],
    declarations: [
        ...maintenanceContainers.containers,
    ],
    exports: [
        ...maintenanceContainers.containers,
    ],
})
export class MaintenanceModule {}
Example #3
Source File: settings.module.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
        PlayersModule,
    ],
    providers: [
        DecimalPipe,
        ...services.services,
    ],
    declarations: [
        ...containers.containers,
    ],
    exports: [
        ...containers.containers,
    ],
})
export class SettingsModule {}
Example #4
Source File: players.service.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
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();
    }
Example #5
Source File: players.module.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
@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 {}
Example #6
Source File: player-table.component.spec.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
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());
    });
});
Example #7
Source File: map.module.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
        LeafletModule,
    ],
    providers: [
        DecimalPipe,
        ...services.services,
    ],
    declarations: [
        ...containers.containers,
    ],
    exports: [
        ...containers.containers,
    ],
})
export class MapModule {}
Example #8
Source File: logs.module.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
@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 {}
Example #9
Source File: files.module.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
@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 {}
Example #10
Source File: audit.service.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
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();
    }
Example #11
Source File: audit-table.component.spec.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
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());
    });
});
Example #12
Source File: audit.module.ts    From dayz-server-manager with MIT License 6 votes vote down vote up 
@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        ReactiveFormsModule,
        FormsModule,
        AppCommonModule,
        NavigationModule,
        PlayersModule,
    ],
    providers: [
        DecimalPipe,
        ...auditServices.services,
    ],
    declarations: [
        ...auditContainers.containers,
        AuditTableComponent,
    ],
    exports: [
        ...auditContainers.containers,
        AuditTableComponent,
    ],
})
export class AuditModule {}
Example #13
Source File: orders.component.ts    From material-reusable-table with Apache License 2.0 5 votes vote down vote up 
constructor(private currencyPipe: CurrencyPipe,
              private decimalPipe: DecimalPipe,
              private percentPipe: PercentPipe) {
  }
Example #14
Source File: map.service.ts    From dayz-server-manager with MIT License 5 votes vote down vote up 
public constructor(
        protected pipe: DecimalPipe,
        protected appCommon: AppCommonService,
    ) {

    }
Example #15
Source File: players.service.ts    From dayz-server-manager with MIT License 5 votes vote down vote up 
public constructor(
        protected pipe: DecimalPipe,
        protected appCommon: AppCommonService,
    ) {
        super(pipe, appCommon);
    }
Example #16
Source File: custom-inputs.service.ts    From fyle-mobile-app with MIT License 5 votes vote down vote up 
constructor(
    private apiService: ApiService,
    private decimalPipe: DecimalPipe,
    private datePipe: DatePipe,
    private authService: AuthService
  ) {}
Example #17
Source File: app.module.ts    From tuxedo-control-center with GNU General Public License v3.0 5 votes vote down vote up 
@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 { }
Example #18
Source File: shared.module.ts    From fyle-mobile-app with MIT License 4 votes vote down vote up 
@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 {}
Example #19
Source File: orders.component.ts    From material-reusable-table with Apache License 2.0 4 votes vote down vote up 
@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')
      }
    ];
  }
}