Что такое шаблонные выражения в Angular?

Шаблонные выражения (template statements) в Angular — это конструкции, которые позволяют вам связывать события, происходящие в DOM, с методами компонентов. Они пишутся непосредственно в HTML-шаблонах и часто используются для обработки событий, таких как нажатие кнопки или ввод данных в текстовое поле.

Основные характеристики шаблонных выражений:

1. Синтаксис: Шаблонные выражения записываются в скобках рядом с элементами, к которым мы хотим прослушивать события. Например:

   <button (click)="onClick()">Нажми меня!</button>
   

   
   В этом примере, когда кнопка будет нажата, сработает метод onClick() компонента.
2. Связь с компонентами: Шаблонные выражения позволяют нам вызывать методы и обращаться к свойствам компонента. Например, они могут выполнять логику и изменять состояние приложения.
3. Доступ к контексту: Шаблонные выражения выполняются в контексте компонента, поэтому мы можем использовать его свойства и методы напрямую.

Пример использования шаблонных выражений

Вот простой пример, который демонстрирует использование шаблонных выражений в Angular:

Шаг 1: Создаем компонент

Сначала создаем компонент с именем AppComponent:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Добро пожаловать в Angular!</h1>
    <button (click)="onClick()">Нажми меня!</button>
    <p>{{ message }}</p>
  `
})
export class AppComponent {
  message: string = '';

  onClick() {
    this.message = 'Кнопка была нажата!';
  }
}

Шаг 2: Описание кода

1. Компонент: Мы создали компонент с помощью декоратора @Component, который содержит selector, template и другие свойства.
2. HTML-шаблон: В HTML-шаблоне у нас есть заголовок, кнопка и параграф, который будет изменяться при нажатии на кнопку.
3. Метод onClick: Этот метод изменяет значение свойства message, которое отображается в параграфе.

Запуск приложения

1. Убедитесь, что вы установили Angular CLI, и создайте новый проект:

   ng new my-angular-app
   cd my-angular-app
   

2. Замените содержимое файла app.component.ts на приведенный выше код.
3. Запустите приложение:

   ng serve
   

4. Откройте браузер и перейдите по адресу http://localhost:4200. Вы должны увидеть кнопку и заголовок. При нажатии на кнопку текст под заголовком изменится.

Заключение

Шаблонные выражения — это мощный инструмент, который позволяет связывать события пользовательского интерфейса с логикой приложения. Они делают код более понятным и интуитивно понятным, позволяя разработчикам легко взаимодействовать с DOM и управлять состоянием приложения.