Taiga UI 5.0 is out!

Miscellaneous CDK

Examples Setup GitHub

On this page

Some utils to simplify the development process

assert

Logs assert into console in dev mode

There is a console assert:
"Today is not a friday"

    
      
    

      
      
    

  
    
      <p [innerHTML]="assertResult"></p>

getPaymentSystem

Card number to its payment system
'' = getPaymentSystem(cardNumber); 
    
      
    

      
      
    

  
    
      '{{ paymentSystem }}' = getPaymentSystem(cardNumber);

<form [formGroup]="parametersForm">
    <tui-textfield
        tuiChevron
        class="parameters"
        [tuiTextfieldCleaner]="false"
    >
        <input
            formControlName="cardNumber"
            placeholder="Choose card number"
            tuiSelect
        />

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

    

      
      
    

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

isPresent

Checks value not to be null or undefined
false = isPresent(value); 
    
      
    

      
      
    

  
    
      {{ isPresent }} = isPresent(value);

<tui-textfield
    tuiChevron
    class="parameters"
>
    <label tuiLabel>value</label>

    <input
        tuiSelect
        [(ngModel)]="value"
    />

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

    

      
      
    

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

markControlAsTouchedAndValidate

Recursively marks form control as touched and triggers validation

Value is invalid

Value is invalid

Value is invalid

Value is invalid

    
      
    

      
      
    

  
    
      <form [formGroup]="userDetailsForm">
    <p>
        <tui-textfield>
            <input
                formControlName="name"
                tuiInput
            />
            <label tuiLabel>Name</label>
        </tui-textfield>
        <tui-error formControlName="name" />
    </p>

    <div formGroupName="address">
        <p>
            <tui-textfield>
                <input
                    formControlName="street"
                    tuiInput
                />
                <label tuiLabel>Street</label>
            </tui-textfield>
            <tui-error formControlName="street" />
        </p>

        <p>
            <tui-textfield>
                <input
                    formControlName="zipCode"
                    tuiInput
                />
                <label tuiLabel>Zip code</label>
            </tui-textfield>
            <tui-error formControlName="zipCode" />
        </p>

        <p>
            <tui-textfield>
                <input
                    formControlName="city"
                    tuiInput
                />
                <label tuiLabel>City</label>
            </tui-textfield>
            <tui-error formControlName="city" />
        </p>
    </div>
</form>
GitHub StackBlitz