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

Angular 🇺🇦 - practical notes

📄 Example of viewProviders for reusable controls

#angular #viewProviders #ControlContainer

✅ Article link: https://medium.com/medialesson/use-viewproviders-to-make-form-controls-reusable-in-angular-87be877bd102

🎁 Code link:
1 - Component link.
2 - Template link.

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

❤2

613 views06:59

Angular 🇺🇦 - practical notes

📄 Angular Internationalization Set-up in Existing Project

#angular #internationalization #i18n

Step 1: Install @angular/localize

$ ng add @angular/localize

Step 2: Update Angular JSON

Second screen

Step 3: Extract Messages

$ ng extract-i18n --output-path src/locale

This command will create XLF files in the specified locations (src/locale/messages.ar.xlf,src/locale/messages.fr.xlf)

Step 4: Translate Messages

Translate the messages in each XLF file for the supported languages as mentioned in Angular Documentation here.

Step 5: Build and Serve

$ ng build --localize
$ ng serve --configuration fr --port 4100 // Opens french version on port 4100
$ ng serve --configuration ar --port 4200 // Opens arabic version on port 4200

✅ Article link: https://levelup.gitconnected.com/angular-internationalization-set-up-in-existing-project-891dcf6cee95

❤2

712 views06:59