Angular 🇺🇦 - practical notes

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

👍2👎1

444 views08:00

Angular 🇺🇦 - practical notes

🧪 CSS Preview: Defining Your CSS Scope with @scope

#css #scope

✅ Article link: https://medium.com/@weijunext/css-preview-defining-your-css-scope-with-scope-47914ab319d3

👍2

542 views06:00

Angular 🇺🇦 - practical notes

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

437 views08:00

Angular 🇺🇦 - practical notes

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

👎1

458 views05:59

Angular 🇺🇦 - practical notes

📄 Angular Custom Directives: Copy to Clipboard Directive

#angular #directive

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>

👍1

481 views07:59

Angular 🇺🇦 - practical notes

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

482 views05:59

Angular 🇺🇦 - practical notes

📄 Angular Custom Directives: Disable Right-Click Directive

#angular #directive

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>

👍4

566 views07:59

Angular 🇺🇦 - practical notes

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

👎1

610 views05:59

Angular 🇺🇦 - practical notes

📄 Tracking an inactive user using RXJS

#angular #rxjs

User inactivity can be defined as a period during which a user does not interact with the application. Tracking this inactivity helps in various scenarios, such as optimizing resource usage, enhancing security, and providing a better user experience.

// inactivity.service.ts

import { Injectable } from '@angular/core';
import { Observable, fromEvent, timer } from 'rxjs';
import { mergeMap, mapTo } from 'rxjs/operators';

@Injectable({ providedIn: 'root'})
export class InactivityService {

  public trackInactivity(
    duration: number
  ): Observable<boolean> {
    const mouseMove$ = fromEvent(document,'mousemove')
          .pipe(mapTo(true));

    const keyDown$ = fromEvent(document,'keydown')
          .pipe(mapTo(true));

    return timer(0, duration)
     .pipe(
       mergeMap(() => mouseMove$ || keyDown$)
     );
  }
}