DOM в Angular 2 — Пользовательский ввод данных

DOM в Angular 2 — Пользовательский ввод данных

От автора: в Angular 2 мы можем использовать структуру элементов DOM HTML-страницы для изменения значений элементов во время выполнения. Давайте рассмотрим подробнее, как работает в Angular DOM.

Тег input

Добавьте следующий код в файл app.component.ts.

В приведенном выше коде необходимо отметить следующее.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

[value] = «username» — используется для привязки выражения username к свойству value элемента ввода.

(input) = «expression» — это декларативный способ привязки выражения к входящему событию элемента ввода.

username = $event.target.value — выражение, которое выполняется при запуске входящего события.

$event — в объекте $event лежатданные, которые характерны для нативного объекта событий.

После сохранения всех изменений в коде и обновления строки браузера вы получите следующий результат. Теперь вы можете ввести любой текст, и этот текст будет отображен рядом с элементом ввода.

DOM в Angular 2 — Пользовательский ввод данных

Ввод клика

Добавьте следующий код в файл app.component.ts.

После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.

DOM в Angular 2 — Пользовательский ввод данных

Когда вы нажмете кнопку «Click Me», вы получите следующий результат.

DOM в Angular 2 — Пользовательский ввод данных

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий