Счетчик символов в угловой трубе

Вам когда-нибудь требовался счетчик для получения количества символов в поле ввода и отображения значения, например, в метке под полем ввода!?

Это нормально видеть в поле формы, как на изображении ниже!

Поэтому, чтобы решить эту «проблему», я создал простую Angular трубу для этого!

Сначала я создал трубу:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'counterCharacters'
})
export class CounterCharactersPipe implements PipeTransform {

  transform(value: string, ...args: unknown[]): number {
    if (value) {
      return value.length;
    }

    return 0;
  }

}

Войти в полноэкранный режим Выйти из полноэкранного режима

После этого нам нужно объявить трубу в нашем модуле:

@NgModule({
  declarations: [
    MySiteComponent,
    CounterCharactersPipe
  ],
  imports: [
    ...
  ]
})

Enter fullscreen mode Выйти из полноэкранного режима

И, наконец, мы можем просто использовать пользовательскую трубу в нашем span!

 <app-form-input-text labelDescription="Name"                                
                      formControlName="name"
                      inputName="Name"
                      #name                                                                                                                                  
                      [classInput]="applyError('name')"                                       
                      [control]="getField('name')"></app-form-input-text>
<span class="d-block">
  {{ this.name.value | counterCharacters }}/30
</span>

Войти в полноэкранный режим Выйти из полноэкранного режима

И теперь, когда мы вставляем значение, тег span показывает нам длину вводимого значения!

Вот и все, спасибо за чтение!