Angular Directive

Angular Directive is basically a class and declare with @Directive decorator. Directives are used to add behavior to an existing DOM element.

The Angular Directive can be classified into three types:
1) Component Directive
2) Structural Directive
3) Attribute Directive

1) Component Directive:- Component decorator is also called component directive. it is basically used to details the component like which template file use, which CSS file use, and name of the component.

Example:- in the app.component.ts file


@Component({
  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

2) Structural Directive:- Structural directives alter layout by adding, removing, and replacing elements in DOM through *ngFor, *ngIf etc. this directive start with *
these directive is basically used in the component’s html file.

Example:-I am representing example of *ngFor Directive
Suppose you have emp_records array in the app.component.ts file and which have employee’s details.


emp_records=[{
	name:"John",
	age:35,
	sex:"Male"
},

{
	name:"Rom",
	age:30,
	sex:"Male"
},

];

Now you want to show employees details in app.component.html file


<div *ngFor="const emp of element_array">
    <div>Employee's Name:- {{emp.name}}</div>
    <div>Employee's Age:- {{emp.age}}</div>
</div>

3) Attribute Directive:- Attribute directive is used to change the appearance or behavior of the element, component or other directive. there are many Attribute directive like ngModel, ngStyle, ngSwitch and ngClass.

Example:- Suppose you have to use two-way data binding then use ngModel directive.

In the app.component.html file


<input [(ngModel)]="employeeName">
{{employeeName}}