Давайте поговорим об 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