Components. Data binding. Базовая структура приложения

Базовая структура приложения

Что происходит при запуске?
Rendered index.html
Запускается main.ts. Там запускается модуль AppModule
В app.module.ts в AppModule подключается компонент AppComponent
В AppComponent рендерится app.component.html
Счастье

Компоненты

Как создать компонент?
Создать name.component.ts
Пометить аннотацией компонент
Указать селектор и путь к шаблону
Сделать шаблон
Зарегистрировать компонент
Добавить компонент в другой компонент

ng generate component component-name
Или…..

Шаблоны (templates)
Вместо templateUrl можно использовать template, и писать javascript код там
Одинарные кавычки для one-line, обратные для multiline
Тоже самое верно для стилей

Но статический сайт я могу и просто на html написать
Для того, чтобы избавиться от статики нам нужен databinding
Самый простой способ - string interpolation - {{dataFromJS}}
Также можно воспользоваться property binding с [property]

Event binding
Тоже самое, что и property binding, но для событий
event нужно заключить в скобки, без слова on
После этого вызвать метод
В event можно передавать параметр через $

Two way data binding
Если какие-то данные, завязанные на поле, то их можно связать с помощью [(ngModel)] - объединение двух типов связи