ஆங்குலரில்இன்டெர்பொலேசன்

 

 

இன்டெர்பொலேசன்என்பதுடேட்டாவைபைன்ட்செய்வதுஆகும். ஆங்குலரில் 3 வகையானடேட்டாபைண்டிங்க்உள்ளது.

அவையாவன

 

Data Binding	Description
One way data-binding	காம்பனண்ட்டிலிருந்துவியூடெம்ப்லேட்டிற்கு
One way data-binding	வியூடெம்ப்லேடிலிருந்துகாம்பனண்டிற்கு
Two way data-binding	காம்பனண்ட்டிலிருந்துவியூடெம்ப்லேட்டிற்குமற்றும்வியூடெம்ப்லேடிலிருந்துகாம்பனண்டிற்கு

இந்தகட்டுரையில்ஒன்வேடேட்டாபைண்டிங்க்பற்றிகாண்போம்.

அதில்காம்பனண்ட்டிலிருந்துவியூடெம்ப்லேட்டிற்குடேட்டாவைபைன்செய்வதுஎப்படி?

இதற்குஇன்டெர்பொலேசன்நுட்பம்பயன்படுகின்றது.

இந்தமுறையில்பிராப்பர்ட்டிபெயரைவியூடெம்ப்லேட்டில் {{ }} இரட்டைகர்லிபிரேசிற்க்குள்இடவேண்டும்.

{{property name}}

பின்வரும்சான்றுநிரலில்காம்பனண்ட்டிலிருந்துfirstNameஎன்றபிராப்பர்ட்டிஎடுத்துவியூடெம்ப்லேட்டில் h1டேக்கிற்குள்இரட்டைகர்லிபிராக்கெட்டிற்குள்இடப்பட்டிறுக்கின்றது.

{{firstName}}

சான்றுநிரல்.

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

 

@Component({

    selector: 'my-app',

    template: `

                <h1>{{ firstName }}</h1>

              `

})

exportclassAppComponent {

    firstName: string = 'Tom';

}

வெளியீடு:

மேலும்பிராப்பட்டிமதிப்பைஒருஸ்ட்ரிங்க்உடன்ஒன்றிணைத்துஇன்டெர்பொலேசன்செய்யலாம்.

சான்று:

<h1>{{'Name = ' + firstName}}</h1>

பின்வருமாறுஇருக்கும்.

"Name = Tom"

மேலும்இரட்டைகர்லிபிராக்கெட்டிற்க்குள்ஒருஅரித்மேட்டிக்எக்ஸ்பிரசனையும்இடலாம்.

{{10+20+15}}

வெளியீடு:

45

இரட்டைகர்லிபிராக்கெட்டிற்க்குள்இடப்பட்டஎக்ஸ்பிரசன்டெம்ப்லேட்எக்ஸ்ப்ரசன்எனஅழைக்கப்படுகின்றது.இதற்குள்டெர்னரிஆபரேட்டரும்இருக்கலாம்.

firstNameமதிப்பு Tom எனஇருப்பதால்அதுவேவெளியீடுஆகும்.

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

 

@Component({

    selector: 'my-app',

    template: `

                <h1>{{firstName ? firstName : 'No name specified'}}</h1>

              `

})

exportclassAppComponent {

    firstName: string = 'Tom';

}

firstNameஎன்பதை null என்மாற்றினால்'No name specified'என்பதுவெளியீடாகும்.

ஒருஇமேஜ்srcஆனதையும்இன்டெர்பொலேசன்மூலம்பைண்ட்செய்யலாம்.

சான்றுநிரல்.

 

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

 

@Component({

    selector: 'my-app',

    template: `<div>

                    <h1>{{pageHeader}}</h1>

                    <imgsrc='{{imagePath}}'/>

                </div>`

})

exportclassAppComponent {

    pageHeader: string = 'Employee Details';

    imagePath: string = 'http://pragimtech.com/images/logo.jpg';

}

 

மேலும்இன்டெர்பொலேசன்பயன்படுத்திஒருகிளாசின்மெத்தடையும்பைண்ட்செய்யலாம்.

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

 

@Component({

    selector: 'my-app',

    template: `<div>

                    <h1>{{'Full Name = ' + getFullName()}}</h1>

                </div>`

})

exportclassAppComponent {

    firstName: string = 'Tom';

    lastName: string = 'Hopkins';

 

    getFullName(): string {

        returnthis.firstName + ' ' + this.lastName;

    }

}

வெளியீடு : Full Name = Tom Hopkins

முத்துகார்த்திகேயன்,மதுரை