Is there a property to determine when a textbox or textarea is focused?

[Software]

I'm placing a component inside textbox and textarea suffixes:

<kendo-textarea #noteInput
    [(ngModel)]="newNote"
    [maxlength]="MAX_LENGTH_NOTE"
  >
    <kendo-textarea-suffix>      
      <ci-counter
        [value]="noteInput.value"
        [max]="noteInput.maxlength"
        [displayAtThreshold]="100"
      ></ci-counter>
    </kendo-textarea-suffix>
</kendo-textarea>

 

That works fine, but I'd like to remove them when the input isn't being edited.  Is there any property or other way to know this through the template?  Such as:

<kendo-textarea #noteInput
    [(ngModel)]="newNote"
    [maxlength]="MAX_LENGTH_NOTE"
  >
    <kendo-textarea-suffix>      
      <ci-counter *ngIf="noteInput.???"
        [value]="noteInput.value"
        [max]="noteInput.maxlength"
        [displayAtThreshold]="100"
      ></ci-counter>
    </kendo-textarea-suffix>
</kendo-textarea>

[Hetali]

Hello,

Thank you for reaching out.

In order to hide the suffixes of the Kendo UI TextBox and the Kendo UI TextArea, use the focus and blur events to update the boolean variable in the NgIf directive. For example:

<kendo-textarea #noteInput
  [(ngModel)]="value1"
  (focus)="focused1=true"
  (blur)="focused1=false"                
>
  <kendo-textarea-suffix *ngIf="focused1" class="custom-styling">
    <span class="counter">{{ counter1 }}</span>
  </kendo-textarea-suffix>
</kendo-textarea>

<kendo-textbox
  [(ngModel)]="value2"
  (focus)="focused2=true"
  (blur)="focused2=false"
>
  <ng-template *ngIf="focused2" kendoTextBoxSuffixTemplate>
    <span class="counter">{{ counter2 }}</span>
  </ng-template>
</kendo-textbox>

Output:

Focused:

Blurred:

I have demonstrated the above snippet in this StackBlitz example. Please give it a try and let me know if it helps or if I can further assist you.

Regards,
Hetali
Progress Telerik