Что такое интерполяция в Angular?

Интерполяция в Angular - это способ привязки данных, позволяющий вставлять значения переменных из компонента в шаблон.

Для использования интерполяции в Angular используется двойные фигурные скобки {{}}. Внутри этих скобок вы можете поместить выражение, которое будет вычислено и заменено на соответствующее значение.

Шаги по использованию интерполяции в Angular:

Шаг 1: Определение переменной в компоненте

В компоненте определите переменную, значение которой вы хотите отобразить в шаблоне. Например, у нас есть компонент AppComponent с переменной name:

import { Component } from '@angular/core'

@Component({
	selector: 'app-root',
	template: ` <h1>Welcome, {{ name }}!</h1> `
})
export class AppComponent {
	name = 'John'
}

Шаг 2: Использование интерполяции в шаблоне

В шаблоне компонента используйте интерполяцию с помощью двойных фигурных скобок {{}}. Разместите выражение или переменную, которую вы хотите отобразить. В примере мы используем интерполяцию для отображения значения переменной name:

<h1>Welcome, {{ name }}!</h1>

При рендеринге компонента Angular вычислит значение выражения внутри интерполяции и заменит его соответствующим значением переменной. В итоге, на странице будет отображаться текст "Welcome, John!".

Вы также можете использовать интерполяцию для отображения результатов вычисления методов или свойств компонента:

import { Component } from '@angular/core'

@Component({
	selector: 'app-root',
	template: `
		<p>The sum of 2 and 3 is {{ 2 + 3 }}</p>
		<p>The current date is {{ currentDate }}</p>
	`
})
export class AppComponent {
	currentDate = new Date()
}

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

Интерполяция в Angular позволяет вставлять значения переменных и результаты вычислений в шаблоне компонента. Это удобный и часто используемый способ связывания данных в Angular.