Angular 🇺🇦 - practical notes

A custom validation directive in Angular allows you to create your own custom validation logic for form controls. In this example, we’ll create a custom directive to validate that a password contains both letters and numbers. If the password doesn’t meet this criteria, we’ll mark the form control as invalid and display an error message. Here’s how you can create this custom validation directive

<input
  type="password"
  name="password"
  [(ngModel)]="user.password"
  #password="ngModel"
  appPasswordValidator="[A-Za-z]+[0-9]+"
  required
/>

<div *ngIf="
  password.invalid 
  && (password.dirty || password.touched)
">
  <div *ngIf="password | hasError :'required'">
     Password is required.
  </div>
  <div *ngIf="password | hasError :'passwordPattern'">
     Password must contain letters and numbers.
  </div>
</div>

339 views08:02

📄 Angular Custom Directives: Autofocus Directive

#angular #directive

In this example, we apply the appAutofocus directive to an input element. When the page loads, this input field will automatically receive focus, making it convenient for the user to start typing immediately.

<input 
  type="text" 
  placeholder="Auto-focused input" 
  appAutofocus 
/>

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

@Directive({
  selector: '[appAutofocus]'
})
export class AutofocusDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    this.el.nativeElement.focus();
  }
}

❤3

386 views08:00

Angular 🇺🇦 - practical notes

📄 Angular Custom Directives: Lazy Load Images Directive

#angular #directive

Creating a custom directive in Angular for lazy-loading images can help improve the performance and user experience of your website by loading images only when they are visible on the screen. In this example, we’ll create a custom directive named appLazyLoad to implement lazy loading for images.

<img
  src="placeholder.jpg"
  data-src="lazy-image.jpg"
  alt="Lazy-loaded image"
  appLazyLoad
/>

👍2❤1

395 views07:59

Angular 🇺🇦 - practical notes

📄 Angular Custom Directives: Drag-and-Drop Directive

#angular #directive

Creating a custom directive in Angular for drag-and-drop functionality can enhance the user experience by allowing users to interact with elements on your page. In this example, we’ll create a custom directive named appDraggable to enable drag-and-drop functionality for elements.

<div appDraggable>
  Drag me around!
</div>

❤3

441 views08:00

Angular 🇺🇦 - practical notes

📄 Angular Custom Directives: Ellipsis Directive

#angular #directive

Creating a custom directive in Angular to add ellipsis to text that overflows its container can help improve the readability and aesthetics of your user interface. In this example, we’ll create a custom directive named `appEllipsis` to add an ellipsis to text that exceeds its container's width.

<div appEllipsis>
  This is a long text that will be truncated with an ellipsis if it overflows its container.
</div>

366 views07:59

Angular 🇺🇦 - practical notes

📄 Angular Custom Directives: Click Outside Directive

#angular #directive

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();
    }
  }
}

🔥2👍1

404 views07:59

Angular 🇺🇦 - practical notes

📄 Angular Custom Directives: Confirm Dialog Directive

#angular #directive

Creating a custom directive in Angular to implement a confirm dialog can help you standardize and simplify the process of confirming actions before executing them, such as deleting items or making irreversible changes. In this example, we’ll create a custom directive named appConfirmDialog to open a confirmation dialog before executing an action.

<button 
  [appConfirmDialog]="'Are you sure you want to perform this action?'"
>Delete</button>

370 views07:59

Angular 🇺🇦 - practical notes

📄 Angular Custom Directives: Infinite Scroll Directive

#angular #directive

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();
    }
  }
}

👍1

434 views07:59

About

Blog

Apps

Platform