ஆங்குலரில்பின்வரும்பைண்டிங்குகள்உள்ளன.
1. இன்டெர்போலேசன்
2. பிராப்பர்ட்டிபைண்டிங்க்
3. ஆட்ரிபியூட்பைண்டிங்க்
4. கிளாஸ்பைண்டிங்க்
5. ஸ்டைல்பைண்டிங்க்
ஆங்குலர்இன்டெர்பொலேசன்.
சான்றுநிரல்.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{ firstName }}</h1>
`
})
export class AppComponent {
firstName: string = 'Tom';
}
\வெளியீடு:
மேலேஉள்ளநிரலில்firstNameஎன்பதன்மதிப்பு “Tom”கிளாசில்இருந்துஎடுக்கப்பட்டுடென்ப்லேட்டில் {{firstName}} என்இன்செர்ட்செய்யப்பட்டுள்ளது.
இதன்மூலம் Tom என்பது h1 அளவில்வெளியீடுசெய்யப்பட்டுள்ளது.
பிராப்பர்ட்டிபைன்டிங்க்:
இதுவும்கிட்டத்தட்டஇன்டெர்பொலேசன்போன்றேசெயற்படுகின்றது.
கீழேஉள்ளசான்றுநிரல்வரியில்இமேஜ்பாத்ஆனதுஇன்டெர்பொலேசன்மூலம்பைண்ட்செய்யப்படுகின்றது.
<imgsrc='{{imagePath}}'/>
இதேவரிகள்பிராப்பர்ட்டிபைன்டிங்க்மூலம்பின்வருமாறுஎழுதப்படுகின்றது.
<img [src]='imagePath'/>
பிராப்பர்ட்டிஆனதுஸ்கொயர்பிராக்கெட்டிலும்அதன்மதிப்புசிங்கிள்குவோட்டிலும்கொடுக்க்ப்பட்டுள்ளது.
இதுவும்அதேரிசல்டைதான்தரும்.
இன்டெர்பொலேசன், பிராப்பர்ட்டிபைண்டிங்க்இரண்டுமேடேட்டாவைகாம்பனண்ட்ம்திப்பில்இருந்துஎடுத்துடார்க்கெட்எலிமெண்ட்மதிப்பில்பைண்ட்செய்யப்படுகின்றனஇரண்டுமேஒன்வேடேட்டாபைண்டிங்க்தான்.
எங்கேஇன்டெர்பொலேசனைகட்டாயம்பயன்படுத்தவேண்டுமென்றால்ஸ்ட்ரிங்கைகன்காடினேட்செய்யும்பொழுது.
<imgsrc='http://www.pragimtech.com/{{imagePath}}' />
எங்கேபிராப்பர்ட்டிபைண்டிங்கைபயன்படுத்தவேண்டும்என்றால்டேட்டாஆனதுஸ்ட்ரிங்க்அல்லாதுபிறமதிப்பாய்இருக்கும்பொழுது.
<button [disabled]='isDisabled'>Click me</button>
isDisabledஎன்பதுபூலியன்மதிப்பாய்இருப்பதால்பிராபர்ட்டிபைண்டிங்க்பயன்படுத்தப்பட்டுள்ளது.இதன்மதிப்புட்ரூஆகஇருக்கும்பொழுதுபட்டன்ஆனதுடிஸேபிள்செய்யப்படுகின்றது.
எனினும்இதில்இன்டெர்பொலேசனைபயன்படுத்தினால்ரிசல்ட்எதிர்பார்த்தவண்ணம்இருக்காது.
சான்று:
<button disabled='{{isDisabled}}'>Click me</button>
மேலேஉள்ளசான்றில்isDisabledஎன்பதன்மதிப்புட்ரூஅல்லதுஃபால்ஸ்எதுவாகஇருந்தாலும்பட்டன்டிஸேபிள்ஆகஇருக்கும்.
பிராப்பர்ட்டிபைண்டிங்கில்ஸ்கொயர்பிராக்கெட்டிற்குபதிலாக ‘bind-‘ என்றப்ரிபிக்ஸையும்பயன்படுத்தலாம்இதுஅதன்கெனானிக்கல்ஃபார்ம்எனப்படுகின்றது.
<button bind-disabled='isDisabled'>Click me</button>
ஆட்ரிபியூட்பைண்டிங்க்.
இதைப்பற்றிபார்ப்ப்தற்க்குமுன்நாம் html ஆட்ரிபியூட்மற்றும் DOM பிராப்பர்ட்டிஇரண்டிற்க்கும்உள்ளவித்தியாசம்தெரிந்துகொள்ளவேண்டும்.
டாம்என்பதுஎன்ன?
டாம்என்பதுடாக்குமெண்ட்ஆப்ஜெக்ட்மாடல்ஆகும்.பிரவுசர்ஒருHTMLபக்கத்தைலோட்செய்யும்பொழுதுஅதன்டாமையும்லோட்செய்கின்றது.
சான்று
இதன்டாம்.
எளியமுறையில்சொல்வதென்றால்டாம்ஆனதுஅப்ளிகேசன்புரோகிராமிங்க்இன்டெர்ஃபேஸ் (API) ஆகும்.
ஜாவாஸ்கிரிப்ட்அல்லதுஜாவாஸ்கிரிப்ட்ஃப்ரேம்வொர்க்கொண்டுஇந்த HTML ஐ அதன்தொடர்பானடாம்உதவியுடன்ஆக்சஸ்மற்றும்மேனிபுலேட்செய்யலாம்.
Interpolation example
<button
disabled='{{isDisabled}}'>Click Me</button>
Property
binding example
<button
[disabled]='isDisabled'>Click Me</button>
மேலேஉள்ளசான்றில்நாம்பட்டன்எலிமென்டின் disabled ஆட்ரிபியூட்டைபைண்ட்செய்ததுபோல்இருக்கும்.ஆனால்உண்மையில்பட்டன்ஆப்ஜெக்டின்பிராப்பர்ட்டியைபைண்ட்செய்திருக்கின்றோம்.
ஆங்குலர்டேட்டாபைண்டிங்க்என்பதுடாம்பிராப்பர்ட்டிபைண்டிங்கேதவிர html ஆட்ரிபியூட்பைண்டிங்க்கிடையாது.
Html எலிமெண்ட்ஆட்ரிபியூட்டிற்கும்டாம்பிராப்பர்ட்டிக்கும்உள்ளவித்தியாசங்கள்.
1. ஆட்ரிபியூட்ஸ்ஹெச்டிஎம்எல்லால்டிஃபைன்செய்யப்படுகின்றது. பிராப்பர்ட்டிகள்டாமால்டிஃபைன்செய்யப்படுகின்றது.
2. ஆட்ரிபியூட்ஸ்டாம்பிராப்பர்ட்டியைதொடக்குவிக்கின்றது.அத்துடன்ஆட்ரிபியூட்சின்பணிமுடிகின்றது.
3. பிராப்பர்ட்டியின்மதிப்பைமாற்றலாம்.ஆட்ரிபியூட்டின்மதிப்பைமாற்றஇயலாது.
சில html எலிமெண்ட்ஆட்ரிபியூட்டிற்குஅதுதொடர்பானடாம்பிராப்பர்ட்டிஇருக்காதுஅந்தசூழ்நிலைகளில்நாம்ஆட்ரிபியூட்பைண்டிங்க்பயன்படுத்தலாம்.
உதாரணதிற்குடேபிள்டிடிஎலிமென்டின்colspanஆட்ரிபியூட்.
ஆங்குலர்எங்குடாம்பிராப்பர்ட்டிகிடையாதோஅங்குமட்டும்ஆட்ரிபியூட்பைண்டிங்கைஉபயோகப்படுத்தபயன்படுகின்றது.
கீழேஉள்ளபடத்தில்உள்ளவாறுடேட்டாகாட்சிபடுத்தவேண்டும்.
ரூட்காம்பனண்ட்-app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div>
<my-employee></my-employee>
</div>
`
})
export class AppComponent {
}
employee.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-employee',
templateUrl: 'app/employee/employee.component.html',
styleUrls: ['app/employee/employee.component.css']
})
export class EmployeeComponent {
imagePath: string = 'Tom.png';
firstName: string = 'Tom';
lastName: string = 'Hopkins';
gender: string = 'Male';
age: number = 20;
}
employee.component.css நிரல்வரிகள்
table {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
thead{
border: 1px solid black;
}
employee.component.html நிரல்வரிகள்.
<table>
<thead>
<tr>
<thcolspan="2">
Employee Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td>First Name</td>
<td>{{firstName}}</td>
</tr>
<tr>
<td>Last Name</td>
<td>{{lastName}}</td>
</tr>
<tr>
<td>Gender</td>
<td>{{gender}}</td>
</tr>
<tr>
<td>Age</td>
<td>{{age}}</td>
</tr>
</tbody>
</table>
இங்குcolspanஆட்ரிபியூட்ஹார்ட்கோட்செய்யப்பட்டுள்ளது. அதைஆட்ரிபியூட்பைண்டிங்க்மூலம்மேற்கொள்ளலாம்.
export class EmployeeComponent {
columnSpan: number = 2;
imagePath: string = 'Tom.png';
firstName: string = 'Tom';
lastName: string = 'Hopkins';
gender: string = 'Male';
age: number = 20;
}
<th [attr.colspan]="columnSpan">
அல்லது
<thattr.colspan="{{columnSpan}}">
கிளாஸ்பைண்டிங்க்
இப்பொழுதுcssகிளாஸ்களைஎவ்வாறுபைண்ட்செய்யலாம்என்றுபார்ப்போம்.
Style.css நிரல்வரிகள்.
.boldClass{
font-weight:bold;
}
.italicsClass{
font-style:italic;
}
.colorClass{
color:red;
}
இப்பொழுதுapp.component.tsஃபைலில்ஒருபட்டன்எலிமெண்டைஆட்செய்துஅத்துடன்கிளாஸ்பைன்டிங்கைநிகழ்த்துவோம்.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button class='colorClass'>My Button</button>
`
})
export class AppComponent {
}
ஏற்கனவேஉள்ளசிஎஸ்எஸ்கிளாஸ்களைநீக்கிவிட்டுபுதிதாகஒன்றுக்கும்மேற்பட்டகிளாஸ்கஸ்ளைபைண்ட்செய்வதுஎப்படிஎன்றுபார்ப்போம்.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button class='colorClass' [class]='classesToApply'>My Button</button>
`
})
export class AppComponent {
classesToApply: string = 'italicsClassboldClass';
}
காம்பனண்டில்classToApplyஎன்றொருபிராப்பர்ட்டிஉள்ளதுஅதுஇரண்டுஸ்டைல்கிளாஸ்களைகுறிக்கின்றது.
மேலே [class] என்றுகொடுத்துஅதுபைண்ட்செய்யபட்டுள்ளது. அதுமட்டுமல்லஅதுஏற்கனவேஉள்ள ‘colorclass’ என்பதைநீக்குகின்றது.
ngClassடைரெக்டிவ்மூலம்எளிதாகஒன்றுக்குமேற்பட்டகிளாஸ்களைசேர்க்கலாம்அல்லதுவிலக்கலாம்.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button class='colorClass' [ngClass]='addClasses()'>My Button</button>
`
})
export class AppComponent {
applyBoldClass: boolean = true;
applyItalicsClass: boolean = true;
addClasses() {
let classes = {
boldClass: this.applyBoldClass,
italicsClass: this.applyItalicsClass
};
return classes;
}
}
ஸ்டைல்பைண்டிங்க்:
இதில்இன்லைனில்ஸ்டைல்பைண்டிங்க்செய்யலாம்.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button style="color:red">My Button</button>
`
})
export class AppComponent {
}
மேலேஉள்ளநிரலில்பட்டன்கலராகரெட்என்பதைஹார்ட்கோட்செய்துள்ளோம்.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button style='color:red'
[style.font-weight]="isBold ? 'bold' : 'normal'">My Button
</button>
`
})
export class AppComponent {
isBold: boolean = true;
}
மேலேஉள்ளநிரலில்isBoldஎன்பதன்மதிப்பு true ஆருந்தால்பட்டன்ஃபாண்ட்வெய்ட்போல்ட்ஆகஇருக்கும். அல்லதுநார்மல்ஆகஇருக்கும்.
அதேபோன்றுஃபாண்ட்அளவையும்கீழ்காணும்நிரலில்உள்ளதுபோல்பைண்ட்செய்யலாம்.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button style='color:red'
[style.font-size.px]="fontSize">My Button
</button>
`
})
export class AppComponent {
fontSize: number = 30;
}
ngStyleஎன்றடைரெக்டிவ்மூலம்ஒன்றுக்கும்மேற்பட்டஇன்லைன்ஸ்டைல்செய்யலாம்.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: ` <button style='color:red' [ngStyle]="addStyles()">My Button</button>
`
})
export class AppComponent {
isBold: boolean = true;
fontSize: number = 30;
isItalic: boolean = true;
addStyles() {
let styles = {
'font-weight': this.isBold ? 'bold' : 'normal',
'font-style': this.isItalic ? 'italic' : 'normal',
'font-size.px': this.fontSize
};
return styles;
}
}
ஈவண்ட்பைண்டிங்க்.
இப்பொழுதுடேட்டாவைஎப்படி html எலிமென்டில்இருந்துகாம்னண்டிற்குஎப்படிஃப்லோசெய்வதுஎன்றுபார்ப்போம். Html லில்நாம்ஒருபட்டனைகிளிக்செய்யலாம். ஒருடெக்ஸ்ட்பாக்சில்உள்ளீடுசெய்யலாம்அல்லதுஒருடிராப்டவுன்லிஸ்டில்ஒருஐட்டத்தைதேர்வுசெய்யலாம். இந்தநிகழ்வுகளைஎவ்வாறுகண்டறிகின்றது?
ஆங்குலர்ஈவண்ட்பைண்டிங்க்மூலம்இந்தஈவண்ட்ஏற்படும்பொழுதுஅறிவுறுத்தல்செய்யலாம்.
கீழேபட்டனின்கிளிக்ஈவண்ட்ஆனதுஒருமெத்தடுடன்பைண்ட்செய்யப்பட்டுள்ளது.
<button (click)="onClick()">Click me</button>
clickஎன்பதுஆர்டினரிபிராக்கெட்டிற்குள்குறிப்பிடப்பட்டுள்ளது.அதைதொடர்ந்து ‘=’ வருகின்றது. அதைதொடர்ந்துமெத்தடின்பெயர்குறிப்பிடப்பட்டுள்ளது. அதாவதுகிளிக்ஈவண்ட்ஏற்படும்பொழுதுonClick() என்றமெத்தட்அழைக்கப்படுகின்றது. இதுவேஈவண்ட்பைண்டிங்க்.
இதன்கெனானிக்கல்ஃபார்ம்(canonical form) பிராக்கெட்இல்லாமல் On- என்றப்ரிஃபிக்ஸ்மூலம்கீழ்காணும்முறையிலும்எழுதலாம்.
<button on-click="onClick()">Click me</button>
ஈவண்ட்பைண்டிற்கானசான்றுநிரல்.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<button (click)='onClick()' >Click me</button>`
})
export class AppComponent {
onClick(): void {
console.log('Button Clicked');
}
}
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<button (click)='onClick()' >Click me</button>`
})
export class AppComponent {
onClick(): void {
console.log('Button Clicked');
}
}
இப்பொழுதுபட்டனைகிளிக்செய்யும்பொழுதெலெல்லாம் ‘Button clicked’ என்றுகன்சோலில்பிரிண்ட்செய்யப்படும்.
இவ்வாறுஆங்குலரில்பைண்டிங்குகள்செயற்படுகின்றன.
நன்றி.
முத்துகார்த்திகேயன்,மதுரை.
