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}}