Components in Angular is a class functions/Angular component and supplies metadata regarding the component. as:

• Template Association: Connects the component to its HTML template, establishing the view.
• Style Binding: Links the component to its CSS styles for encapsulation and management of styling.
• A selector is a custom HTML tag that represents a component within the application.
• Dependency Injection Configuration: Defines the providers for the component, facilitating dependency injection.

 

Directives alter the behaviour or appearance of DOM elements. Directives on DOM elements inform Angular what to do with them or their children. Directives add behaviour to elements, such as styling or attribute manipulation, to HTML.

• Structural Directives: Modify the DOM architecture (e.g., *ngIf, *ngFor).
  • *ngSwitch, *ngSwitchCase, *ngSwitchDefault: Provides a way to conditionally display elements based on a switch expression.
  • *ngTemplateOutlet: Instantiates an embedded template and inserts its rendered view into the DOM.

<div *ngIf="isVisible">This div is visible.</div>

<ul>
 <li *ngFor="let item of items; let i = index">{{ i + 1 }}: {{ item }}</li>
</ul>

<div [ngSwitch]="status">
 <div *ngSwitchCase="'active'">Active User</div>
 <div *ngSwitchCase="'inactive'">Inactive User</div>
 <div *ngSwitchDefault>Unknown Status</div>
</div>

<ng-template #myTemplate let-name="value">
 <p>Hello from template: {{ name }}</p>
</ng-template>

<div *ngTemplateOutlet="myTemplate; context: { value: 'World' }"></div>

• Attribute Directives: Modify the appearance or behaviour of an element (e.g., ngClass, ngStyle).
  • ngModel: Manages two-way data binding for form elements.
  • ngStyle: Dynamically sets inline styles.
  • ngClass: Dynamically adds and removes CSS classes.

<input type="text" [(ngModel)]="username">
<p [ngStyle]="{'color': textColor, 'font-weight': isBold ? 'bold' : 'normal'}">Styled Text</p>
<div [ngClass]="{'active': isActive, 'error': hasError}">Conditional Classes</div>

• Custom Directives
  • Let's create a directive that highlights an element with a specified color when the mouse hovers over it.

import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';

@Directive({
 selector: '[appHighlight]' // Selector used as an attribute: <div appHighlight>
})
export class HighlightDirective {
 @Input('appHighlight') highlightColor: string = 'yellow'; // Custom input property

 private originalColor: string = '';

 constructor(private el: ElementRef, private renderer: Renderer2) {
   this.originalColor = this.el.nativeElement.style.backgroundColor;
 }

 @HostListener('mouseenter') onMouseEnter() {
   this.highlight(this.highlightColor || 'yellow');
 }

 @HostListener('mouseleave') onMouseLeave() {
   this.highlight(this.originalColor);
 }

 private highlight(color: string) {
   this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
 }
}

• @HostBinding is used to set initial styles and a CSS class for the draggable element.
• @HostListener('mousedown') starts the dragging process, captures the initial offset of the mouse click within the element, and changes the cursor.
• @HostListener('document:mousemove') (listening to the global document) updates the transform style of the element while dragging, effectively moving it.
• @HostListener('document:mouseup') stops the dragging and resets the cursor.