Давайте поговорим об Angular Class Binding, Style Binding и Event Binding.
Привязка классов в Angular
Привязка Angular Class используется для добавления или удаления классов в элементы HTML и из них. Вы можете условно добавить классы CSS к элементу, тем самым создав элемент с динамическим стилем. Angular предоставляет три способа добавления / удаления классов в элемент и из него.
- className
- класс
- ngClass
В этом примере я работаю со встроенным шаблоном стиля. Если вы хотите добавить стили для элемента h2, вы можете использовать селектор классов CSS, за которым следует свойство.
Давайте посмотрим, как применить привязку класса Angular к элементу HTML.
Использование класса
Использование className
Использование ngClass (C должен быть заглавным)
Это полезно, если вы хотите применить более одного стиля к одному элементу HTML. Для этого создадим объект myClass и присвоим ему свойства из CSS.
Посмотрите, как условно применять классы. Итак, я возьму одну переменную hasError, Initialize с логическим значением «true».
Использование bind-class
Привязка стилей в Angular
Мы можем установить встроенные стили HTML-элемента, используя привязку стиля в angular. Синтаксис напоминает синтаксис привязки свойств. Вы можете условно добавлять стили к элементу, тем самым создавая элемент с динамическим стилем.
[style.style-property] = “style-value”
В привязке стиля используются квадратные скобки []. Поместите свойство стиля CSS (цель привязки) в квадратную скобку. Свойство CSS Style должно начинаться с «Style», за которым следует точка (.), А затем имя стиля.
Примечание. Чтобы применить несколько стилей к одному HTMLElement, используйте ngStyle.
Метод 01:
Метод 02:
метод 03: Как условно применить стиль. (Если условие верно, примените стиль)
Давайте посмотрим, как применить несколько стилей одновременно к одному элементу HTML. Это делается с помощью атрибута стиля ng. Давайте создадим объект с именем myStyles.
Привязка событий в Angular
Связывание событий позволяет нам связывать такие события, как нажатие клавиши, щелчки, наведение, прикосновение и т. Д. К методу в компоненте. Это один путь от представления к компоненту. Отслеживая пользовательские события в представлении и отвечая на них, мы можем синхронизировать наш компонент с представлением.
Например, когда пользователь меняет ввод в текстовое поле, мы можем обновить модель в компоненте, запустить некоторые проверки и т. Д. Когда пользователь отправляет кнопку, мы можем затем сохранить модель на внутреннем сервере.
<target-event)="TemplateStatement"
Пример :
$ event PayloadDOM
События несут полезную нагрузку события. То есть информация о мероприятии. Мы можем получить доступ к полезной нагрузке события, используя $ event в качестве аргумента функции-обработчика. Свойства объекта $ event различаются в зависимости от типа события DOM. Помните, что вам нужно использовать переменную как $ event в операторе Template.
Ссылочная переменная шаблона
Мы также можем использовать ссылочную переменную шаблона для передачи значения вместо $ even. Ссылочная переменная шаблона начинается с символа #.
Удачного кодирования!
Получите доступ к экспертному обзору - Подпишитесь на DDI Intel