Taiga UI 5.0 is out!

Like KIT

GitHub

On this page

A like component based on native checkbox with icons and custom color for icon when :checked state.

Basic 

    
      
    

      
      
    

  
    
      <input
    tuiLike="var(--tui-status-negative)"
    type="checkbox"
/>

<input
    size="s"
    tuiLike
    type="checkbox"
    [checkedIcon]="'@tui.star-filled'"
    [uncheckedIcon]="'@tui.star'"
/>

Icons from DI 

    
      
    

      
      
    

  
    
      <input
    tuiLike="var(--tui-status-warning)"
    type="checkbox"
/>

External icons 

    
      
    

      
      
    

  
    
      <input
    tuiLike
    type="checkbox"
/>

Other appearances 

    
      
    

      
      
    

  
    
      @for (appearance of appearances; track appearance) {
    <input
        tuiLike
        type="checkbox"
        [appearance]="appearance"
    />
}

With forms

NgModel

Liked: false

Reactive form

Liked: false

    
      
    

      
      
    

  
    
      <div>
    <h3>NgModel</h3>

    <input
        tuiLike="var(--tui-status-negative)"
        type="checkbox"
        [(ngModel)]="liked"
    />

    <p>Liked: {{ liked }}</p>
</div>

<div>
    <h3>Reactive form</h3>

    <form [formGroup]="likeForm">
        <input
            formControlName="liked"
            tuiLike="var(--tui-status-negative)"
            type="checkbox"
        />
    </form>

    <p>Liked: {{ likeForm.value.liked }}</p>
</div>

<button
    size="m"
    tuiButton
    type="button"
    (click)="changeValue()"
>
    Toggle
</button>
GitHub StackBlitz