ஆங்குலரில் டிரெக்டிவ்ஸ்.(Angular Directives) பகுதி -1

 

ஆங்குலரில் டிரெக்டிவ்ஸ்.(Angular Directives) பகுதி -1

 

ஆங்குலரில் டிரெக்டிவ்ஸ் என்பது ஆங்குலர் எலிமெண்டுகளுக்கு கூடுதல் பிஹேவியர் வழங்க உதவும் கிளாஸ்கள் ஆகும்.

ஆங்குலரில் மூன்று வகையான டிரெக்டிவ்ஸ் இருக்கின்றன. அவையாவன

1. Component directives: இது டெம்ப்லேட் உடன் வரும் டிரெக்டிவ் ஆகும் இது பொதுவான வகையாகும்.

2. Attribute directives:இது ஒரு எலிமெண்டின் தோற்றத்தையோ அல்லது பிஹேவியரையோ மாற்ற உதவுகின்றது.

3. Structural directives: இது DOM எலிமெண்ட் லே அவுட்டை மாற்ற்க் கூடியது. புதிதாக ஒரு டாம் எலிமெண்டை சேர்க்கவோ அல்லது நீக்கவோ வல்லது

app.component.cs

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

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  courses=[1,2];

  

 

}

மேலே உள்ள சான்று நிரலில் courses என்றொரு லிஸ்ட் இருக்கின்றது.

 

app.component.html

<div *ngIf="courses.length>0">

  List of courses

</div>

<div *ngIf="courses.length==0">

  No course available

</div>

 

மேலே உள்ள நிரலில் இரண்டு டிவ் டேக்குகள் உள்ளன.

முதலாவது courses என்ற லிஸ்டின் லெங்க்த் 1 அல்லது அதற்கு மேற்பட்டதாக இருந்தாம் மட்டுமே காண்பிக்க்ப்படும்.

இரண்டாவது courses என்ற லிஸ்டின் லெங்க்த் 0 ஆக இருந்தால் மட்டுமே காண்பிக்கப்படும்.

இதை ,மேலும் கீழ்கண்டவாறு மாற்றியமைக்கலாம்.

<div *ngIf="courses.length>0; then CourseList else NoCourses"></div>

<ng-template #CourseList>

  List of courses

</ng-template>

 

<ng-template #NoCourses>

  No course available

</ng-template>

 

வெளியீடு:

இதில் courses என்ற லிஸ்டில் உள்ள ஐட்டங்களை அகற்றினால்

No course available

என வெளியீடு மாறும்.

மேலே உள்ள நிரலை hidden என்ற பிராப்பர்ட்டி மூலமும் மறைக்கலாம்.

 

<div [hidden]="courses.length==0">

  list of courses

</div>

<div [hidden]="courses.length>0">

  No course available

</div>

இதில் Courses என்ற லிஸ்டின் லெங்த் 0 ஆக இருந்தால் முதல் டிவ் மறைக்கப்படும்.

courses என்ற லிஸ்டின் லெங்க்த் 0 விற்கு மேற்பட்டு இருந்தால் இரண்டாவது டிவ் மறைக்கப்படும்.

இப்பொழுது ngSwitchCase பற்றிப்பார்ப்போம்.

இது மற்ற நிரலாக்க மொழிகளில் உள்ள switch, case மாதிரி தான் செயல்படும்

app.component.ts

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

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  viewMode='map';

  

  

}

 

app.component.html

<ul class="nav  nav-pills">

  <li [class.active]="viewMode =='map'"><a (click)="viewMode='map'">Map view</a></li>

  <li [class.active]="viewMode =='list'"><a (click)="viewMode='list'">List view</a></li>

</ul>

 

  <div [ngSwitch]="viewMode">

<div *ngSwitchCase="'map'">

  map view content

</div>

<div *ngSwitchCase="'list'">

  List view content

</div>

<div *ngSwitchDefault> others

 

</div>

 

</div>

 

வெளியீடு:

இப்பொழுது இரண்டாவது உள்ள list view என்பதை சொடுக்கினால் பின் வருமாறு வெளியீடு இருக்கும்.

 

ngFor

இது நிரலாக்க மொழிகளில் உள்ள ஃஃபார் லூப் போன்று செயல்படுகின்றது.

app.component.ts

import { AstPath } from '@angular/compiler';

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

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

courses=[

{ id:1, name:'ASP.NET'},

{ id:2, name:'Angular'},

{ id:3, name:'Reactjs'}

 

];

  

}

 

app.component.html

<ul>

  <li *ngFor="let course of courses">

    {{course.name}}

  </li>

</ul>

வெளியீடு:

app.component.ts

import { AstPath } from '@angular/compiler';

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

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

courses=[

{ id:1, name:'ASP.NET'},

{ id:2, name:'Angular'},

{ id:3, name:'Reactjs'}

 

];

onAdd(){

  this.courses.push({id:4, name:"csharp"})

}

  

}

app.component.html

<button (click)="onAdd()">Add</button>

<ul>

  <li *ngFor="let course of courses">

    {{course.name}}

  </li>

</ul>

 

output:

 

Add பட்டனை கிளிக் செய்த் பிறகு.

இப்பொழுது ஒவ்வொரு எலிமெண்டாக டெலீட் செய்வது என்று பார்ப்போம்.

app.component.ts

import { AstPath } from '@angular/compiler';

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

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

courses=[

{ id:1, name:'ASP.NET'},

{ id:2, name:'Angular'},

{ id:3, name:'Reactjs'}

 

];

onAdd(){

  this.courses.push({id:4, name:"csharp"})

}

onRemove(course){

  let index=this.courses.indexOf(course);

  this.courses.splice(index,1)

}

}

 

app.component.html

<button (click)="onAdd()">Add</button>

<ul>

  <li *ngFor="let course of courses">

    {{course.name}}

    <Button (click)="onRemove(course)">Remove </Button>

  </li>

</ul>

output:

Remove பட்டனை கிளிக் செய்த பிறகு

 

இப்பொழுது எலிமெண்டை அப்டேட் செய்வது என்று காண்போம்.

app.component.ts

import { AstPath } from '@angular/compiler';

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

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

courses=[

{ id:1, name:'ASP.NET'},

{ id:2, name:'Angular'},

{ id:3, name:'Reactjs'}

 

];

onAdd(){

  this.courses.push({id:4, name:"csharp"})

}

onRemove(course){

  let index=this.courses.indexOf(course);

  this.courses.splice(index,1)

}

onChange(course)

{

  course.name='updated';

}

}

 

app.component.html

<button (click)="onAdd()">Add</button>

<ul>

  <li *ngFor="let course of courses">

    {{course.name}}

    <Button (click)="onChange(course)">Update </Button>

  </li>

</ul>

output:

update பட்டனை கிளிக் செய்தக் பிறகு:

நன்றி.

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