Angular 🇺🇦 - practical notes

🤓 Memory Leaks in JavaScript

#js

In JavaScript, a memory leak occurs when a program reserves memory for objects or data that are no longer needed or referenced, preventing the JavaScript engine’s garbage collector from freeing up that memory. Over time, this can lead to performance issues, such as sluggishness and unresponsiveness in web applications.

✅ Article link: https://medium.com/@stheodorejohn/memory-leaks-in-javascript-causes-solutions-and-best-practices-18d8faecc672

👍2

436 views06:00

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

✅ Article link: https://designtechworld.medium.com/angular-tracking-an-inactive-user-using-rxjs-in-built-and-custom-events-33d2e95fd167

🔥1

526 views06:59

About

Blog

Apps

Platform