टेम्पलेट और डेटा बाइंडिंग

इंटरपोलेशन आपको अपने कंपोनेंट के मान HTML में शामिल करने देता है। डेटा दिखाने के लिए दोहरे घुंघराले कोष्ठक का उपयोग करें:

{{ data }}

{{ username }}

प्रॉपर्टी बाइंडिंग आपको HTML तत्वों की प्रॉपर्टी को गतिशील रूप से सेट करने देती है:

[src] = "imageUrl"

<img [src]="user.profilePicture">

इवेंट बाइंडिंग आपके ऐप्लिकेशन को उपयोगकर्ता की कार्रवाइयों पर प्रतिक्रिया देने देती है:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

दो-तरफ़ा बाइंडिंग आपके यूज़र इंटरफ़ेस और डेटा को समकालिक रखती है। [(ngModel)] का उपयोग करें:

<input [(ngModel)]="user.name">

संरचनात्मक डायरेक्टिव DOM के लेआउट में बदलाव करते हैं। इनके उदाहरणों में *ngIf और *ngFor शामिल हैं।

<div *ngIf="isVisible">Visible Content</div>

*ngFor डेटा पर दोहराव से चलता है और तत्वों को बार-बार दिखाता है:

<li *ngFor="let item of items">{{ item }}</li>

आपने गतिशील एंगुलर दृश्य बनाने के लिए टेम्पलेट और डेटा बाइंडिंग का उपयोग करना सीख लिया है!