Taiga UI 5.0 is out!

format CDK / CORE

GitHub

On this page

A set of format utils

px

Adds 'px' to a number
'11px' = px(value); 
    
      
    

      
      
    

  
    
      '{{ px }}' = px(value);

<form [formGroup]="parametersForm">
    <div class="parameters">
        <tui-textfield class="tui-space_top-2">
            <label tuiLabel>value</label>

            <input
                formControlName="value"
                tuiInputNumber
            />
        </tui-textfield>
    </div>
</form>

    

      
      
    

  
    
      .parameters {
    margin-block-start: 0.75rem;
    inline-size: 13.75rem;
}

getCurrencySymbol

Returns a currency symbol from its three letter code or ISO 4217
= getCurrencySymbol(currency); 
    
      
    

      
      
    

  
    
      {{ currency }} = getCurrencySymbol(currency);

<form [formGroup]="parametersForm">
    <div class="parameters">
        <tui-textfield
            tuiChevron
            class="tui-space_top-2"
        >
            <label tuiLabel>currency</label>

            <input
                formControlName="currency"
                tuiSelect
            />

            <tui-data-list-wrapper
                *tuiDropdown
                [items]="items"
            />
        </tui-textfield>
    </div>
</form>

    

      
      
    

  
    
      .parameters {
    margin-block-start: 0.75rem;
    inline-size: 13.75rem;
}

formatNumber

Formats a number with separators
'123 456.78' = tuiFormatNumber(value, precision, decimalSeparator, thousandSeparator); 
    
      
    

      
      
    

  
    
      '{{ formattedNumber }}' = tuiFormatNumber(value, precision, decimalSeparator, thousandSeparator);

<form [formGroup]="parametersForm">
    <div class="parameters">
        <tui-textfield class="tui-space_top-2">
            <input
                formControlName="value"
                tuiInput
            />
            <label tuiLabel>value</label>
        </tui-textfield>

        <tui-textfield class="tui-space_top-2">
            <input
                formControlName="precision"
                tuiInput
            />
            <label tuiLabel>precision</label>
        </tui-textfield>

        <tui-textfield class="tui-space_top-2">
            <input
                formControlName="decimalSeparator"
                tuiInput
            />
            <label tuiLabel>decimalSeparator</label>
        </tui-textfield>

        <tui-textfield class="tui-space_top-2">
            <input
                formControlName="thousandSeparator"
                tuiInput
            />
            <label tuiLabel>thousandSeparator</label>
        </tui-textfield>
    </div>
</form>

    

      
      
    

  
    
      .parameters {
    margin-block-start: 0.75rem;
    inline-size: 13.75rem;
}
GitHub StackBlitz