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>

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

$ ng add @angular/localize

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

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

$ 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

Generators are these magical functions that you pause and resume, whenever you want — they don’t execute continuously.

Let’s list out the benefit of standalone functions:

-- Decouple tight dependency between the component and the store.
-- Simplifies CRUD operation with the store, by providing simple interfaces for the component to use to interact with the store.
-- Reusability!
-- No need to create a service(facade) to encapsulate NgRx logic.
-- Stand alone functions are not tied to a class, meaning each can be imported and used individually.
-- Reduces the need to inject multiple facade dependencies.

There are different types of API protocols:

REST — relies on a client/server approach that separates the front and back ends of the API and provides considerable flexibility in development and implementation.
RPC — The remote procedural call (RPC) protocol sends multiple parameters and receives results.
SOAP — Supports a wide range of communication protocols found across the internet, such as HTTP, SMTP, and TCP.
WebSocket — Provides a way to exchange data between browser and server via a persistent connection.