✨Overview Angular Directives

What’s Angular Directive?

Angular directives are instructions that enable you to add custom behaviors to HTML. They control the Document Object Model (DOM) using attributes, elements, or CSS classes.

What type of directive is it?

1. Component Directives are Angular components that allow you to create reusable custom elements with their behavior.

/*
  Angular Component Directive
*/
<app-component-directive></app-component-directive>

2. Structural Directives modify the DOM by adding, removing, or manipulating elements. Examples include ngIf for conditional element display and ngFor for rendering a list of items.

Examples like *ngIf and *ngFor are syntactic sugar for a template input variable, where * is a shorthand for <ng-template>.

<div *ngPerm="'admin'">Welcome, Admin</div>
<div *ngPerm="'user'">Welcome, User</div>
<div *ngPerm="'guest'">Welcome, Guest</div>

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ngPerm]',
  standalone: true,
})
export class PermDirective {
  permission: Array<string> = ['superadmin', 'admin', 'user'];
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}
  @Input() set ngPerm(scope: string) {
    let isCheck = this.permission.find((item) => item == scope) ? true : false;
    if (isCheck) this.viewContainer.createEmbeddedView(this.templateRef);
    else this.viewContainer.clear();
  }
}

• The PermDirective class has a permission array that lists the permissions (superadmin, admin, user).
• The templateRef and viewContainer are injected into the directive's constructor. TemplateRef represents an embedded template that can be used to instantiate embedded views. ViewContainerRef represents a container where one or more views can be attached.
• The @Input() decorator is used to define an input property ngPerm. This property is set to the value of the ngPerm attribute in the HTML. The set keyword defines a setter method for this property.
• When the ngPerm property is set, it checks if the value is in the permission array. If it is, it creates an embedded view using the templateRef. If it's not, it clears the view container.

3.Attribute Directives are used as attributes of elements to change the appearance or behavior of an element, component, or another directive. Examples include dynamically changing styles and toggling CSS classes.

<p>attribute-directive works!</p>
<button uiButton> UI Buttton </button>

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

@Directive({
  selector: '[uiButton]',
  standalone: true,
})
export class UiButtonDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'margin', '0.25rem 0.125rem');
    renderer.setStyle(el.nativeElement, 'padding', '0.75rem 0.375rem');
    renderer.setStyle(el.nativeElement, 'font-size', '1rem');
    renderer.setStyle(el.nativeElement, 'border-width', '1px');
    renderer.setStyle(el.nativeElement, 'border-color', '#0d6efd');
    renderer.setStyle(el.nativeElement, 'border-radius', '0.375rem');
    renderer.setStyle(el.nativeElement, 'box-shadow', 'inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px');
    renderer.setStyle(el.nativeElement, 'color', '#fff');
    renderer.setStyle(el.nativeElement, 'background-color', '#0d6efd');
  }
}

In this case, the UiButtonDirective is applying a set of styles to any DOM element it is attached to. The styles are applied in the constructor of the directive, which is called when an instance of the directive is created.

The @Directive decorator includes a selector property, which is a CSS selector that identifies the directive. When Angular finds a match to the selector in the HTML, it creates an instance of the directive. Here, the selector is [uiButton], which means the directive will be applied to any element with a uiButton attribute.

Conclusion

Angular directives are 💪 for building interactive web apps. By understanding their types and applications, you can create dynamic user interfaces. Whether you use built-in or custom directives, they contribute to efficient and maintainable code. 👍

Github Link: https://github.com/tacettinsertkaya/directive-samples