📄 Angular Custom Directives: Custom Validation Directive

#angular #directive

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>

📄 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
/>

📄 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>

📄 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>

📄 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>

📄 Angular Custom Directives: Highlight Search Results Directive

#angular #directive

Creating a custom directive in Angular to highlight search results within a block of text can improve the user experience when searching for specific terms in your application. In this example, we’ll create a custom directive named `appHighlightSearch` to highlight search results in a text block.

<p [appHighlightSearch]="searchQuery">
  Lorem ipsum dolor sit amet, ...
</p>

📄 Angular Custom Directives: Responsive Directive

#angular #directive

Creating a custom directive in Angular to control the visibility of elements based on the screen size can help you create responsive designs. In this example, we’ll create a custom directive named appResponsive to show or hide elements based on the screen size.

<div [appResponsive]="'md, lg'">
  This content is visible on medium and large screens.
</div>

📄 Angular Custom Directives: Input Mask Directive

#angular #directive

Creating a custom directive in Angular to apply an input mask can help ensure that users enter data in a specific format. In this example, we’ll create a custom directive named appInputMask to format and validate an input as a phone number.

<input 
   type="text"
   [appInputMask]="'(999) 999-9999'"
>

📄 Angular Custom Directives: Tooltip Directive

#angular #directive

Creating a custom directive in Angular to display tooltips can enhance user interfaces by providing additional information when users interact with specific elements. In this example, we’ll create a custom directive named appTooltip to show tooltips on hover.

<button 
  [appTooltip]="'Click me to learn more'"
>Learn More</button>

📄 Angular Custom Directives: TimeAgo Directive

#angular #directive

Creating a custom directive in Angular to display a time ago (relative time) can be useful for showing how long ago an event occurred. In this example, we’ll create a custom directive named appTimeAgo to display the time difference in a user-friendly format.

<p [appTimeAgo]="postDate"></p>

📄 Detect autofill events in Angular

#angular #directive

✅ Article link

📄Angular: Creating custom structural directives accepting multiple parameters

#angular #directive

As applications grow in size and as the conditions become more complex, instead of stuffing multiple conditions inside a *ngIf or *ngSwitch, we can opt for creating a more cleaner custom structural directive.

✅ Article link