Directives
Directives are the special kind of markers that tell Angular to attach specific behavior to elements. Angular has three types of directives:
- Component Directives: They are used to create reusable UI components.
- Attribute Directives: They are used to change the appearance or behavior of an element like changing its color depending on the condition.
- Structural Directives: They are used to modify the structure of the DOM, like adding or removing elements depending on the condition. for example ngIf and ngFor.
Javascript
// highlight.directive.ts import { Directive, ElementRef, HostListener } from '@angular/core' ; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { } @HostListener( 'mouseenter' ) onMouseEnter() { this .highlight( 'yellow' ); } @HostListener( 'mouseleave' ) onMouseLeave() { this .highlight( null ); } private highlight(color: string) { this .el.nativeElement.style.backgroundColor = color; } } |
What are the main building blocks of an Angular Application?
Angular is a widely used open-source front-end framework used to build dynamic web applications. It consists of several key building blocks that work together to create scalable, and maintainable applications. In this article, we will explore all the main building blocks of an Angular application and we will explore how they contribute to framework architecture.