Skip to main content

Posts

Showing posts with the label IT

Angular - Difference between RxJS map, pluck, switchMap, mergeMap and exhaustMap

RxJS is a powerful library that provides a range of operators to work with asynchronous data streams. One of the most commonly used operators in RxJS is the map operator. The map operator allows you to transform the data emitted by an observable, and there are several different types of maps you can use. In this article, we will discuss the different types of RxJS maps and how they can be used in Angular. map() The map() operator is the most commonly used operator in RxJS. It allows you to transform the data emitted by an observable by applying a function to each item emitted. For example, if you have an observable that emits a stream of numbers, you can use the map() operator to transform those numbers into strings: import { from } from 'rxjs'; import { map } from 'rxjs/operators'; const numbers$ = from([1, 2, 3, 4, 5]); numbers$ .pipe( map(num => `Number: ${num}`) ) .subscribe(console.log); Output: Number: 1 Number: 2 Number: 3 Number: 4 Number: 5...

Angular 14 - Using BehaviourSubject to pass data between routes

To pass data between two routes in Angular 14, you can use a combination of routing parameters and data services. Here's how: 1. Define a data service   Create a service file that will be responsible for sharing data between components. Here's an example: import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DataService { private messageSource = new BehaviorSubject (""); currentMessage = this.messageSource.asObservable(); constructor() { } changeMessage(message: string) { this.messageSource.next(message); } } This service creates a ` BehaviorSubject` that can be used to hold the data you want to pass between components. The ` changeMessage` function can be used to update the value of the ` BehaviorSubject`.   2. Define a route with a parameter    In the ` app-routing.module.ts`  file, define a route that accepts a parameter. Here's an examp...

Angular - 3 ways to pass data between two routes

Angular 14 (and older versions) provides several ways to pass data between two routes. Here are some of the common approaches:    1. Query Parameters: You can pass data between two routes using query parameters. In the sending component, you can use the ` Router` service to navigate to the receiving component and pass data in the query string. For example: // Sending component import { Router } from '@angular/router'; constructor(private router: Router) {} onButtonClick() { let data = { id: 123, name: 'John' }; this.router.navigate(['/receiving-component'], { queryParams: data }); } In the receiving component, you can use the ` ActivatedRoute`  service to read the query parameters. For example: // Receiving component import { ActivatedRoute } from '@angular/router'; constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.queryParams.subscribe(params => { console.log(params.id); // 123 console.log(params.name); //...