В Angular есть несколько способов сократить запись при использовании селекторов в шаблоне. Вот некоторые из них:
1. Использование фрагментов с префиксом #. Фрагменты позволяют ссылаться на определенные элементы шаблона из TypeScript-кода. Например, чтобы получить доступ к элементу input, фрагмент может быть определен как #myInput. Затем вы можете использовать фрагмент в селекторе, чтобы обратиться к этому элементу в шаблоне. Таким образом, вместо использования длинного селектора input[type="text"], вы можете использовать более короткую запись #myInput.
2. Использование директивы @ViewChild. Директива @ViewChild используется для получения доступа к DOM-элементу, который соответствует определенному селектору, прямо из TypeScript-кода. Например, если у вас есть input с атрибутом #myInput, вы можете использовать @ViewChild('myInput') myInput: ElementRef в классе компонента, чтобы получить доступ к этому элементу. Затем вы можете использовать свойство myInput.nativeElement в шаблоне, чтобы получить доступ к этому элементу.
3. Использование директивы ng-template. Директива ng-template позволяет определить шаблон, который может быть использован в разных частях шаблона. Вы можете определить шаблон с селектором, а затем использовать его в разных местах, где он нужен. Например, вы можете определить шаблон с селектором #myTemplate и использовать его в разных местах с помощью ngTemplateOutlet. Это позволяет вам использовать короткую запись вместо повторения одного и того же селектора несколько раз в шаблоне.
4. Использование синтаксиса let-... для итерации по элементам. Angular имеет синтаксис let-... для итерации по элементам коллекции в шаблоне. Например, вы можете использовать let-item для итерации по элементам массива или объекта. Это позволяет вам ссылаться на элементы напрямую и избегать длинных селекторов или повторения кода.
Это лишь несколько способов сократить запись при использовании селекторов в шаблоне. Вы можете выбрать тот, который наиболее удобен для вас и соответствует вашим потребностям.