در این جلسه با یکی از ساده‌ترین و پرکاربردترین روش‌های نمایش داده در Angular آشنا می‌شویم: Interpolation.

Interpolation به ما اجازه می‌دهد داده‌های موجود در فایل TypeScript را به صورت داینامیک داخل Template (HTML) نمایش دهیم. این قابلیت یکی از پایه‌های اصلی Data Binding در Angular محسوب می‌شود.

Interpolation چیست؟

Interpolation روشی در Angular است که به کمک آن می‌توانیم داده‌ها را از Component Class به Template منتقل کنیم و در HTML نمایش دهیم.

ساختار آن به شکل زیر است:

{{ expression }}

هر چیزی که داخل این دو آکولاد قرار بگیرد توسط Angular پردازش شده و مقدار آن در صفحه نمایش داده می‌شود.

یک مثال ساده از Interpolation

ابتدا در فایل TypeScript یک متغیر تعریف می‌کنیم.

export class AppComponent {
  title = 'Angular 17 Course';
}

حالا در Template می‌توانیم مقدار آن را نمایش دهیم:

<h1>{{ title }}</h1>

خروجی در مرورگر:

Angular 17 Course

Angular مقدار متغیر title را خوانده و در HTML قرار می‌دهد.

استفاده از Expression در Interpolation

در Interpolation می‌توان از عبارت‌های ساده JavaScript نیز استفاده کرد.

مثال:

export class AppComponent {
  price = 100;
}

در Template:

<p>Total Price: {{ price + 20 }}</p>

خروجی:

Total Price: 120

Angular عبارت داخل Interpolation را محاسبه می‌کند.

فراخوانی متد در Interpolation

می‌توان از متدهای کامپوننت نیز استفاده کرد.

export class AppComponent {
  getMessage() {
    return 'Welcome to Angular 17';
  }
}

در Template:

<p>{{ getMessage() }}</p>

ترکیب متن با Interpolation

Interpolation معمولاً همراه با متن استفاده می‌شود.

export class AppComponent {
  username = 'Milad';
}

در Template:

<p>Hello {{ username }}</p>

خروجی:

Hello Milad

نکات مهم درباره Interpolation

  • Interpolation فقط برای نمایش داده استفاده می‌شود.
  • نمی‌توان داخل آن دستورات پیچیده یا تغییر مقدار متغیرها را انجام داد.
  • بهتر است Expression ها ساده و سبک باشند تا عملکرد برنامه کاهش پیدا نکند.

جمع‌بندی

در این جلسه با مفهوم Interpolation در Angular 17 آشنا شدیم.
دیدیم چگونه می‌توان داده‌های موجود در Component را به راحتی در Template نمایش داد.

Interpolation یکی از پایه‌های مهم Data Binding در Angular است و در ادامه دوره بیشتر با آن کار خواهیم کرد.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.

دوره آموزش جامع Angular 17 تا 21 | از مبتدی تا پیشرفته + پروژه‌محور