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

About

Blog

Apps

Platform