Commonly used RxJS Operators are:

1. pipe Function:

The pipe function is used to chain multiple operators together to create a sequence of operations applied to an Observable.

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

// Example: Using pipe to chain map and filter operators
const source = of(1, 2, 3, 4, 5);

const modified = source.pipe(
  map(value => value * 2),
  filter(value => value > 5)
);

modified.subscribe(result => console.log(result)); // Output: 6, 8, 10

2. map Operator:

The map operator transforms values emitted by an Observable by applying a function to each value and emitting the transformed result.

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

// Example: Using map to transform values
const source = of(1, 2, 3, 4, 5);

const mapped = source.pipe(
  map(value => value * 2)
);

mapped.subscribe(result => console.log(result)); // Output: 2, 4, 6, 8, 10

3. filter Operator:

The filter operator selectively emits values from an Observable based on a specified condition.

import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

// Example: Using filter to emit only even numbers
const source = of(1, 2, 3, 4, 5);

const evenNumbers = source.pipe(
  filter(value => value % 2 === 0)
);

evenNumbers.subscribe(result => console.log(result)); // Output: 2, 4

4. mergeMap Operator:

The mergeMap operator projects each value emitted by an Observable into an inner Observable and merges the resulting Observables into one.

import { fromEvent } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

// Example: Using mergeMap with mouse events
const source = fromEvent(document, 'click');

const coordinates = source.pipe(
  mergeMap(event => fromEvent(document, 'mousemove'))
);

coordinates.subscribe(event => console.log(event.clientX, event.clientY));

5. debounceTime Operator:

The debounceTime operator emits a value from the source Observable only after a specified time has passed without new values being emitted.

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

// Example: Using debounceTime for search functionality
const searchInput = document.getElementById('searchInput');

const searchObservable = fromEvent(searchInput, 'input');

searchObservable
  .pipe(debounceTime(300))
  .subscribe(() => {
    // Perform search operation after 300ms of no input
    // Call search function here
  });

6. catchError Operator:

The catchError operator intercepts errors emitted by an Observable and allows handling or recovering from those errors by returning a new Observable or a default value.

import { of, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

// Example: Using catchError to handle errors
const source = of('Data');

const modifiedSource = source.pipe(
  mergeMap(data => {
    if (data !== 'Data') {
      return throwError('Invalid data');
    }
    return of(data);
  }),
  catchError(error => {
    console.error('Error:', error);
    return of('Default data'); // Provide default data in case of error
  })
);

modifiedSource.subscribe(result => console.log(result)); // Output: 'Default data'

7. BehaviorSubject:

A BehaviorSubject in RxJS maintains the "current" value and emits it to subscribers when they subscribe to it. It retains the most recent value emitted to new subscribers.

import { BehaviorSubject } from 'rxjs';

// Example: Creating and using a BehaviorSubject
const subject = new BehaviorSubject<string>('Initial Value');

// Subscribe to the BehaviorSubject
subject.subscribe(value => console.log('Subscriber A:', value)); // Output: Initial Value

// Next value
subject.next('Updated Value');

// Subscribe again
subject.subscribe(value => console.log('Subscriber B:', value)); // Output: Updated Value

8. tap Operator:

The tap operator allows performing side effects for an Observable without modifying the emitted values. It is commonly used for debugging, logging, or executing additional actions.

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

// Example: Using tap for logging without affecting emitted values
const source = of(1, 2, 3, 4, 5);

const tapped = source.pipe(
  tap(value => console.log('Value:', value))
);

tapped.subscribe(result => console.log(result)); // Output: Logs each value without affecting emitted values

9. switchMap Operator:

The switchMap operator is used to map each value emitted by the source Observable to a new inner Observable. It cancels any previous inner Observables if a new value is emitted.

import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// Example: Using switchMap with mouse events
const source = fromEvent(document, 'click');

const coordinates = source.pipe(
  switchMap(event => fromEvent(document, 'mousemove'))
);

coordinates.subscribe(event => console.log(event.clientX, event.clientY));

Conclusion:

These examples showcase various RxJS operators and features, demonstrating how they manipulate data streams, handle errors, perform side effects, and manage asynchronous operations within Angular or any RxJS-based application.

RxJS, or Reactive Extensions for JavaScript, is a powerful library for handling asynchronous data streams in Angular applications. It makes handling things like getting data from servers, dealing with forms, and responding to user actions smoother and more manageable.

At its core, RxJS revolves around observables, observers, and operators. Observables represent sequences of events or values that can be observed over time. Observers are consumers of these observables that react to the emitted values. Operators are functions that enable manipulation, filtering, combining, and transforming of these observable streams.

Observables

Observables are the foundation of RxJS. They can emit multiple values asynchronously, and interested parties can subscribe to these observables to receive these values.

Let’s create a simple observable in an Angular component:

import { Observable } from 'rxjs';

const myObservable = new Observable<number>(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  setTimeout(() => {
    observer.next(4);
    observer.complete();
  }, 1000);
});

myObservable.subscribe({
  next: value => console.log(value),
  error: err => console.error(err),
  complete: () => console.log('Observable completed')
});

Operators

Operators allow us to transform, filter, combine, and manipulate the data emitted by observables.

To understand Operator in Details, click here…

import { from } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5]);

numbers.pipe(
  filter(num => num % 2 === 0),
  map(num => num * num)
).subscribe(result => console.log(result));

HTTP Requests

Using RxJS in Angular HTTP module allows for handling of HTTP requests.

For all HttpClient methods, the method doesn't begin its HTTP request until you call subscribe () on the observable the method returns. Calling subscribe () triggers execution of the observable and causes HttpClient to compose and send the HTTP request to the server.

Think of these observables as blueprints for actual HTTP requests.

import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
getData() {
  return this.http.get<any>('https://api.example.com/data')
    .subscribe(data => {
      // Handle data here
    });
}

Event Handling

RxJS simplifies event handling in Angular components:

import { fromEvent } from 'rxjs';
ngOnInit() {
  const button = document.getElementById('myButton');
  const buttonClick = fromEvent(button, 'click');
  
  buttonClick.subscribe(() => {
    // Handle button click
  });

Conclusion

RxJS is a crucial part of Angular development, empowering developers to build reactive, responsive, and scalable applications. Understanding observables, observers, and operators is essential for the full power of RxJS in Angular.

This article has provided an overview of RxJS in Angular along with examples showcasing its usage in different scenarios. Experimenting with these concepts and exploring more operators will further enhance your ability to write clean and efficient code in Angular applications.

JavaScript, a widely used language for web development, can become complex when dealing with asynchronous tasks. Fortunately, JavaScript introduced: `async` and `await` that make handling asynchronous operations much easier. In this article, we’ll explore these concepts in detail.

Understanding Asynchronous JavaScript

Before we dive into `async` and `await`, let’s grasp the idea of “asynchronous” in JavaScript. Asynchronous tasks are those that take time to complete, like fetching data from a website or waiting for user input. In the past, JavaScript used callbacks for managing these tasks, but there are issues with Callbacks like Callback Hell and Inversion of Control. we will cover these topics in upcoming articles.

Using `async` Functions

An `async` function is just like a regular JavaScript function, but it’s designed to handle asynchronous tasks. When you declare a function as `async`, it returns something called a “promise” to handle asynchronous work.

Here’s a simple example how to create an `async` function:

async function fetchData() {
  // Code that does asynchronous task
  return result;
}

In this code, `fetchData` is an `async` function that can handle asynchronous tasks like loading data from a website. When this function is called, it returns a promise to manage the results of the asynchronous task.

Using `await` to Wait for Promises

The `await` keyword is used inside `async` functions to tell JavaScript to pause and wait for a promise to finish. It’s like saying, “Hey, I need this promise to be done before I continue.”

Here’s a simple example how you use `await` in function:

async function fetchData() {
  const result = await someAsyncFunction();
  return result;
}

In this example, `await` makes JavaScript wait for the `someAsyncFunction` promise to complete before continuing with the rest of the code. This helps us work with the result of the asynchronous operation without getting tangled in callbacks.

Practical Example

Let’s look at a practical example of fetching data from an API using `async` and `await:

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      throw new Error('Failed to fetch user data');
    }
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error(error);
    return null;
  }
}

In this code, the `fetchUserData` function gets user data from an API using `fetch`. The `await` keyword ensures the code waits for the API response. If something goes wrong, it catches errors and handles them nicely.

Conclusion

Async/await is a useful feature in JavaScript that simplifies handling asynchronous code. By using `async` functions and `await`, you can write code that looks almost like regular, step-by-step code while still taking full advantage of JavaScript’s ability to manage multiple tasks at once. It makes coding less complicated and more understandable, especially when dealing with web applications and tasks that require waiting for things to happen.

In web development, DOM manipulation with JavaScript is a fundamental skill. Whether you’re building a simple webpage or a full-fledged web application, understanding how to interact with the Document Object Model (DOM) is essential for creating dynamic and interactive projects.

Here, we’ll explore different methods for DOM manipulation using JavaScript.

In this article I will be referring to this HTML code.

In this HTML code all classes and id are defined which is used in code snippets below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
   </head>
   <body>
      <div class="class-name" id="element-id">
         This is a div.
      </div>
      <p>This is a Paragraph Tag.</p>
      <img src="./profile.jpg" alt="my-profile-photo" class="my-image" />
      <button id="my-button"></button>
   </body>
</html>

1. Selecting DOM Elements

Before you can manipulate the DOM, you need to select the elements you want to work with. JavaScript provides several methods for selecting DOM elements:

Select an element by ID.

const elementById = document.getElementById("element-id");

Select elements by class name.

const elementsByClass = document.getElementsByClassName("class-name");

Select elements by tag name.

const elementsByTag = document.getElementsByTagName("p");

Select an element using a CSS selector.

const elementByQuery = document.querySelector(".class-name");

Select multiple elements using a CSS selector.

const elementsByQueryAll = document.querySelectorAll(".name");

These are different ways to select any HTML element through which we are able to add dynamic effects using JavaScript.

2. Modifying Element Content

You can change the content of DOM elements using properties like ‘text Content’ and ‘inner HTML’ and ‘inner TEXT’:

Change the text content of any HTML element.

const elementId = document.getElementById("element-id");
elementId.textContent = "New Text";

Change the HTML content using inner HTML.

const elementId = document.getElementById("element-id");
elementId.innerHTML = "<strong>Bold Text</strong>";

Change the HTML content using inner TEXT.

const elementId = document.getElementById("element-id");
elementId.innerTEXT = "New Text";

3. Modifying Element Attributes

You can also change attributes of HTML elements using JavaScript. First of all we fetch the element and then we change the attribute of that element. For example, to change the source of an image element:

Change the source of an image using JavaScript.

const imageElement = document.getElementById("my-image");
imageElement.src = "new-image.jpg";

4. Creating and Appending DOM Elements

You can create and append new DOM elements to the document. firstly, we created a new element and then we modified it’s attributes. Here’s an example of creating a new paragraph element and appending it to the body:

const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

5. Adding Event Listeners

You can use JavaScript to add event listeners to DOM elements to respond to user actions:

const buttonElement = document.getElementById("my-button");

Add a click event listener to the button.

buttonElement.addEventListener("click", function () {
alert("Button clicked!");
});

6. Modifying CSS Styles

JavaScript can be used to modify CSS styles for elements. You can change element styles by accessing their `style` property:

Change the background of HTML element.

const styledElement = document.getElementById("element-id");
styledElement.style.backgroundColor = "blue";

Change the font size.

styledElement.style.fontSize = "16px";

Conclusion

In this article, you learned how to select, modify, and interact with DOM elements to create dynamic and interactive web experiences. Whether you’re building a simple webpage or a complex web application. Practice these with different use cases to enhance your proficiency in DOM manipulation with JavaScript.