ஆங்குலரில்பைண்டிங்குகள்.

 

ஆங்குலரில்பின்வரும்பைண்டிங்குகள்உள்ளன.

1.      இன்டெர்போலேசன்

2.      பிராப்பர்ட்டிபைண்டிங்க்

3.      ஆட்ரிபியூட்பைண்டிங்க்

4.      கிளாஸ்பைண்டிங்க்

5.      ஸ்டைல்பைண்டிங்க்

6.      ஈவண்ட்பைண்டிங்க்.

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

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

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’ என்றுகன்சோலில்பிரிண்ட்செய்யப்படும்.

இவ்வாறுஆங்குலரில்பைண்டிங்குகள்செயற்படுகின்றன.

நன்றி.

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