Template Syntax (Template Syntax)

15 دقیقه Article

Template Syntax: زبان قالب Angular 📝

Angular از HTML استاندارد استفاده می‌کند، اما با قابلیت‌های اضافه! این قابلیت‌ها به شما اجازه می‌دهد داده‌ها را نمایش دهید و با کاربر تعامل کنید.

Interpolation (درونیابی رشته‌ای):

ساده‌ترین راه برای نمایش داده‌های پویا در HTML، استفاده از "Double Curly Braces" یا { } است.

در servers.component.ts یک پراپرتی اضافه کنید:

export class ServersComponent {
  serverId: number = 10;
  serverStatus: string = 'offline';
  
  getServerStatus() {
    return this.serverStatus;
  }
}

حالا در servers.component.html از آن استفاده کنید:

Server ID: {{ serverId }}
Status: {{ serverStatus }}
Method result: {{ getServerStatus() }}

هر چیزی که درون { } قرار دهید، ارزیابی شده و نتیجه آن به رشته تبدیل و نمایش داده می‌شود. می‌توانید از متغیرها، متدها و حتی عبارات ساده ریاضی استفاده کنید.

Property Binding (اتصال ویژگی):

اگر بخواهید مقدار یک attribute در تگ HTML را تغییر دهید (مثلاً disabled یا src)، از [ ] استفاده می‌کنیم.


allowNewServer = false;


<button [disabled]="!allowNewServer">Add Server</button>

در اینجا، ویژگی disabled دکمه به مقدار متغیر allowNewServer (که برعکس شده) متصل می‌شود.

تفاوت Interpolation و Property Binding:

{ }: برای نمایش متن درون تگ‌ها.
[ ]: برای تغییر ویژگی‌های (Attributes/Properties) خود تگ‌ها.

✅ یاد گرفتید: حالا می‌توانید داده‌های کلاس TypeScript خود را در فایل HTML نمایش دهید!

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

تمرین: Template Syntax Easy

سوال تمرین

🎯 تمرین: استفاده از Template Syntax

یک template با interpolation، property binding و event binding بسازید.

پاسخ تمرین

TYPESCRIPT

// component.ts
export class DemoComponent {
  title = 'Demo';
  imageUrl = 'https://example.com/image.jpg';

  handleClick() {
    alert('Clicked!');
  }
}

<!-- template.html -->
<h1>{{ title }}</h1>
<img [src]="imageUrl">
<button (click)="handleClick()">Click</button>

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo