Filesize formatter automatically converts values into kilobytes, megabytes, gigabytes, etc., taking localization into account. Rounding can also be customized.

Add KbqDataSizePipe to the component’s imports. It works like a standard Angular pipe:

import { KbqDataSizePipe } from '@koobiq/components/core';

@Component({
    imports: [KbqDataSizePipe],
    template: `
        <div>{{ 1024 | kbqDataSize }}</div>
    `
})

The formatter supports localization, choice of measurement system (SI/IEC), and rounding precision settings.

You can set parameters directly in the template using pipe arguments:

@Component({
    imports: [KbqDataSizePipe],
    template: `
        <div>{{ 1536 | kbqDataSize : 1 : 'IEC' : 'en-US' }}</div><!-- 1.5 KB -->
    `
})

To define common formatting settings across the entire application or module, use a provider:

import { kbqFilesizeFormatterConfigurationProvider } from '@koobiq/components/core';

@NgModule({
    providers: [
        kbqFilesizeFormatterConfigurationProvider({
            defaultPrecision: 3,
            defaultUnitSystem: 'SI'
        })
    ]
})

• A non-breaking space ( ) is used between the number and the unit.
• By default, numbers are formatted using the KbqDecimalPipe.
• To format numbers specifically for tables, use the KbqTableNumberPipe.

To apply table-style number formatting with the kbqTableNumber pipe, override the KbqDecimalPipe by registering the appropriate provider in your component or module: