Interpolation | इंटरपोलेशन

Angular interpolation के द्वारा हम {{ }} के बीच लिखे expression को evaluate करतें हैं। जब हम interpolation का प्रयोग करते हैं तो उसके अंदर लिखे expression को string में परिवर्तित करके प्रदर्शित करता है। Interpolation का प्रयोग हम किसी भी html tag के बीच में या फिर उसके attribute में कर सकते हैं। {{ }} के बीच लिखा expression प्रायः component class का कोई property या function होता है। मान लीजिए कि क्लास में कोई वेरिएबल str है तो str का मान प्रदर्शित करने के लिए हम इस प्रकार कोड लिखेगें - {{ str }}। हम कोष्ठक के अंदर किसी फंक्शन का भी प्रयोग कर सकते हैं जोकि डाटा टाइप return करता हो। तो चलिए एक उदाहरण के माध्यम से समझते हैं:

src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  str = 'My string';
  num = 1234;
  logoUrl = './assets/logo.png';

  myfunction() {
    return 'Return from function';
  }
}

यहाँ पर हमने component class में 3 variable str, num, logoUrl define किया है जोकि क्रमशः string, number और URL हैं. एक फंक्शन myfunction define किया है जो कि string डाटा टाइप return करता है. इन सभी variable का प्रयोग हम template में करेंगे.

src/app/app.component.html

<div>
    <p>string interpolation - {{ str }}</p>
    <p>number interpolation - {{ num }}</p>
    <p>function interpolation - {{ myfunction() }}</p>
    <p>interpolation in attribute - <img src="{{logoUrl}}" /></p>
</div>

यहाँ पर हमने component class में define किये गए सभी variables का प्रयोग किया है.

Output: