Taiga UI 5.0 is out!

Element CDK

GitHub

Directive is used to get a link to a native element as template reference variable (analogue of @ViewChild('ref', {read: ElementRef} for template)

Usage

component instanceof TuiAvatar : false

element instanceof ElementRef : true

    
      
    

      
      
    

  
    
      <button
    #component
    tuiAvatar
    type="button"
    class="tui-space_right-3"
>
    C
</button>
<button
    #element="elementRef"
    tuiAvatar
    tuiElement
    type="button"
    class="tui-space_right-3"
>
    E
</button>
<p>
    component instanceof
    <code>TuiAvatar</code>
    :
    <b>{{ isLink(component) }}</b>
</p>
<p>
    element instanceof
    <code>ElementRef</code>
    :
    <b>{{ isElement(element) }}</b>
</p>
<button
    tuiButton
    type="button"
    (click)="element.nativeElement.focus()"
>
    Focus element
</button>
GitHub StackBlitz