Creating a custom directive in Angular to handle clicking outside a specific element, like a dropdown or modal, can enhance the user experience by allowing you to close these elements when users interact with the rest of the page. In this example, we’ll create a custom directive named appClickOutside to close a dropdown when users click outside of it.

<div 
  appClickOutside 
  (appClickOutside)="closeDropdown()"
>
  <button (click)="toggleDropdown()">
     Toggle Dropdown
  </button>
  <div 
    *ngIf="dropdownOpen" 
    class="dropdown"
  >
    Dropdown content
  </div>
</div>

import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {
  @Output() clickOutside = new EventEmitter<void>();

  constructor(private el: ElementRef) {}

  @HostListener('document:click', ['$event'])
  onClick(event: Event): void {
    const element = this.el.nativeElement;
    if (!element.contains(event.target)) {
      this.appClickOutside.emit();
    }
  }
}

Creating a custom directive in Angular for implementing infinite scrolling can significantly improve the user experience, especially when dealing with long lists of data. In this example, we’ll create a custom directive named appInfiniteScroll to load additional content as the user scrolls down a page.

<div
   appInfiniteScroll 
   class="scrollable-content"
   (scrolled)="loadMoreData()"
>
  <!-- Your list of items -->
</div>

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

@Directive({
  selector: '[appInfiniteScroll]'
})
export class InfiniteScrollDirective {
  @Input() scrollThreshold = 100;
  @Output() scrolled = new EventEmitter<void>();

  constructor(private el: ElementRef) {}

  @HostListener('scroll', ['$event'])
  onScroll(event: Event): void {
    const {
       scrollHeight,
       scrollTop,
       clientHeight
    } = event.target as HTMLElement;
    const atBottom = scrollHeight - scrollTop <= clientHeight + this.scrollThreshold;

    if (atBottom) {
      this.scrolled.emit();
    }
  }
}

Creating a custom directive in Angular to allow users to copy content to the clipboard can enhance the usability of your application. In this example, we’ll create a custom directive named appCopyToClipboard to enable users to copy text when they click on an element.

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

@Directive({
  selector: '[appCopyToClipboard]'
})
export class CopyToClipboardDirective {
  @Input() appCopyToClipboard: string;

  constructor(private el: ElementRef) {}

  @HostListener('click')
  onClick() {
    if (this.appCopyToClipboard) {
      const textarea = document.createElement('textarea');
      textarea.value = this.appCopyToClipboard;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    }
  }
}

<button [appCopyToClipboard]="'Text to copy'">
  Copy to Clipboard
</button>

Creating a custom directive in Angular to disable right-clicking can be useful in scenarios where you want to prevent users from accessing context menus or taking specific actions using the right mouse button. In this example, we’ll create a custom directive named `appDisableRightClick` to prevent right-clicking on elements.

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

@Directive({
  selector: '[appDisableRightClick]'
})
export class DisableRightClickDirective {
  constructor() {}

  @HostListener('contextmenu', ['$event'])
  onRightClick(event: Event): void {
    event.preventDefault();
  }
}

<div appDisableRightClick>
  Right-clicking is disabled on this element.
</div>