Как сделать, чтобы и для инпута работало округление?

Для того чтобы реализовать округление значения вводимого в инпут, вообще говоря, в Angular, вам потребуется применить соответствующую директиву или фильтр. Однако, такой функциональности нет встроенной в Angular, поэтому вам придется создать ее самостоятельно.

Самый простой способ добавления округления к значению в инпуте – это использование события input и функции округления JavaScript. Для этого вам придется создать директиву, которая будет привязываться к инпуту и выполнять округление введенного значения.

Вот пример кода, демонстрирующий, как можно реализовать это в Angular:

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: 'input[appRoundInput]'
})
export class RoundInputDirective {
  constructor(private el: ElementRef) { }

  @HostListener('input')
  onInput() {
    const value = this.el.nativeElement.value;
    const roundValue = Math.round(parseFloat(value));
    this.el.nativeElement.value = roundValue.toString();
  }
}

Здесь мы создаем директиву RoundInputDirective, которая привязывается к элементам <input> с атрибутом appRoundInput. Внутри директивы мы определяем обработчик события input, который вызывается каждый раз, когда происходит ввод значения в инпут.

В обработчике события мы получаем текущее значение инпута с помощью this.el.nativeElement.value, преобразуем его в число с помощью parseFloat и округляем его с помощью Math.round. Затем мы присваиваем полученное округленное значение обратно в инпут с помощью this.el.nativeElement.value.

Чтобы использовать эту директиву, вам необходимо добавить атрибут appRoundInput к элементу <input>, который вы хотите округлять:

<input type="number" appRoundInput>

Теперь, когда пользователь вводит значение в инпут, оно будет автоматически округляться до ближайшего целого числа.