Taiga UI 5.0 is out!

Math CDK

Examples Setup GitHub

On this page

A set of utils to calculate math

round

round, floor and ceil with fixed common problems of the native implementation

1.01 = round(value, precision);

1 = floor(value, precision);

1.01 = ceil(value, precision);

    
      
    

      
      
    

  
    
      <p>{{ rounded }} = round(value, precision);</p>
<p>{{ floored }} = floor(value, precision);</p>
<p>{{ ceiled }} = ceil(value, precision);</p>

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

            <input
                formControlName="value"
                tuiInputNumber
                [tuiNumberFormat]="{precision: 3}"
            />
        </tui-textfield>

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

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

    

      
      
    

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

inRange

Checks if the value is in range
true = inRange(value, fromInclude, toExclude); 
    
      
    

      
      
    

  
    
      {{ ranged }} = inRange(value, fromInclude, toExclude);

<form [formGroup]="parametersForm">
    <div class="parameters">
        @for (parameter of ['value', 'fromInclude', 'toExclude']; track parameter) {
            <tui-textfield class="tui-space_top-2">
                <label tuiLabel>{{ parameter }}</label>
                <input
                    tuiInputNumber
                    [formControlName]="parameter"
                />
            </tui-textfield>
        }
    </div>
</form>

    

      
      
    

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

normalizeToIntNumber

Normalizes any number to an integer within inclusive range
5 = normalizeToIntNumber(value, min, max); 
    
      
    

      
      
    

  
    
      {{ normalized }} = normalizeToIntNumber(value, min, max);

<form [formGroup]="parametersForm">
    <div class="parameters">
        @for (parameter of ['value', 'min', 'max']; track parameter) {
            <tui-textfield class="tui-space_top-2">
                <label tuiLabel>{{ parameter }}</label>
                <input
                    tuiInputNumber
                    [formControlName]="parameter"
                />
            </tui-textfield>
        }
    </div>
</form>

    

      
      
    

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

quantize

Rounds a number to the closest value in a fixed discrete series
4 = quantize(value, quantum); 
    
      
    

      
      
    

  
    
      {{ quantized }} = quantize(value, quantum);

<form [formGroup]="parametersForm">
    <div class="parameters">
        @for (parameter of ['value', 'quantum']; track parameter) {
            <tui-textfield class="tui-space_top-2">
                <label tuiLabel>{{ parameter }}</label>
                <input
                    tuiInputNumber
                    [formControlName]="parameter"
                />
            </tui-textfield>
        }
    </div>
</form>

    

      
      
    

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

clamp

Clamps a value between two inclusive limits
5 = clamp(value, min, max); 
    
      
    

      
      
    

  
    
      {{ clamped }} = clamp(value, min, max);

<form [formGroup]="parametersForm">
    <div class="parameters">
        @for (parameter of ['value', 'min', 'max']; track parameter) {
            <tui-textfield class="tui-space_top-2">
                <label tuiLabel>{{ parameter }}</label>
                <input
                    tuiInputNumber
                    [formControlName]="parameter"
                />
            </tui-textfield>
        }
    </div>
</form>

    

      
      
    

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