Angular Directives என்றால் என்ன?

Angular-இல் மிக முக்கியமான concept இந்த directives ஆகும்.இந்த directives concept மட்டும் angular-ல் பயன்படுத்தவில்லையென்றால் angular framework இவ்வளவு பெரிய வளர்ச்சி அடைந்து இருக்காது. Html-ல் நிறைய tag உள்ளது.
ex:
<div>,<p>
இதே போல் நீங்கள் ஒரு tag-யை உருவாக்க முடியுமென்றால் அதற்கு பயன்படுவதுதான் இந்த directives ஆகும்.

Angular-ல் 3 விதமான directive உள்ளது.
1.Component Directives
2.Attribute Directives
3.Structural Directives

Component Directives:
நாம் ஏற்கனவே சொன்னதுபோல் component என்பதே ஒரு directives ஆகும்.இந்த component என்பதே ஒரு directive-ஆல் தான் work ஆகி கொண்டிருக்கிறது.

ex:
<app-root></app-root>

உங்களுக்கு component directives-யை பற்றி படிக்க விரும்பினால் எங்களுடைய angular component படிக்கவும்.அங்கே தெளிவாக கொடுக்கப்பட்டுள்ளது.

Attribute Directives:
ஒரு directives-யை எந்தெந்த attributes பயன்படுத்துகின்றோமோ அது Attributes directives ஆகும்.

Dom-ல் இருக்கும் ஒரு element-ன் தோற்றத்தையும்(appearance) மற்றும் அதன் behavior-யையும் மாற்ற முடியும்.

EX:
ஒரு element-யின் background color மாற்றுவது.அதனுடைய font style-யை மாற்றுவது.

Ex:
ngStyle,ngClass

app.component.html:


<p [ngStyle]="{'color':'red'}">எனக்கு Angular பிடிக்கும்.</p>





[ngStyle] வேலை என்னவென்றால் நாம் கொடுக்கும் style-யை இந்த p tag-இல் பயன்படுத்தும்.

{‘color’:’red’}-> இது ஒரு object ஆகும்.style-னினை object போன்று கொடுக்க வேண்டும்.

Structural Directives:
Structural Directives-யை பயன்படுத்தி dom-ல் ஒரு element-யை add பண்ணவும் முடியும்,remove பண்ணவும் முடியும்.

Ex:
*ngFor,*ngIf

app.component.html:


 <p [ngStyle]="{'color':'red'}" *ngIf="show">எனக்கு Angular பிடிக்கும்.</p> 

app.component.ts:


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



@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  

  show:boolean=false;

}






show என்பதின் மதிப்பு true என்றால் p tag தெரியும்.false என்றால் தெரியாது.



இது boolean type ஆகும்.இதன் மதிப்பு false என்று கொடுத்திருப்பதால் p tag-ஆனது dom-ல் தெரியாது.