1. Использование реактивных форм Angular: вы можете использовать модуль реактивных форм Angular, чтобы создать форму и применить проверку к полю ввода. Вы можете использовать валидаторы, такие как шаблоны или пользовательские валидаторы, чтобы гарантировать ввод только чисел. Вот пример:

<form [formGroup]="myForm">
  <input type="text" formControlName="myInput">
</form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  myForm: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.myForm = this.fb.group({
      myInput: ['', [Validators.pattern('^[0-9]*$')]]
    });
  }
}

2. Использование привязки события ввода: вы можете привязаться к событию ввода поля ввода и отфильтровать любые нечисловые символы, используя регулярное выражение. Вот пример:

<input type="text" (input)="filterNonNumeric($event)">

filterNonNumeric(event: any) {
  const pattern = /[^0-9]/g;
  event.target.value = event.target.value.replace(pattern, '');
}

3. Использование директивы: вы можете создать собственную директиву, которая ограничивает ввод только числами. Вот пример:

<input type="text" appNumbersOnly>

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[appNumbersOnly]'
})
export class NumbersOnlyDirective {
  constructor(private el: ElementRef) { }
  @HostListener('input', ['$event']) onInput(event: any) {
    const pattern = /[^0-9]/g;
    event.target.value = event.target.value.replace(pattern, '');
  }
}

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

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