Angular + RxJS : max & min

By Arvind Rai, February 08, 2024
On this page we will learn to use RxJS max and min operators in our Angular application. RxJS max operator returns observable that emits the single item with maximum value from source observable. RxJS min operator returns observable that emits the single item with minimum value from source observable. To decide maximum and minimum value, we can pass comparer function to max and min operators.
Here we will discuss max and min operators in detail with examples.

RxJS max

RxJS max operator finds the item with maximum value from the source observable comparing by specified comparer function.
max(comparer?: (x: T, y: T) => number) 
Parameters
comparer is optional. We can provide comparer function to compare the values of two items. Default value of comparer is undefined.

Returns
Returns an observable that emits the item with maximum value.

1. If comparer function is not passed to max operator, then for numeric values, highest number is maximum value. For characters the highest character in alphabetic order is considered to be maximum value.
2. Comparer function has two arguments as (item1: T, item2: T) . For comparing these two items our function needs to return a number to decide which one is larger or smaller.
3. max operator returns observable that emits only single value as maximum item among all emitted items from source observable.

RxJS min

RxJS min operator finds the item with minimum value from the source observable comparing by specified comparer function.
min(comparer?: (x: T, y: T) => number) 
Parameters
Optional. comparer function compares the values of two items. Default value of comparer is undefined.

Returns
Returns an observable that emits the item with minimum value.

1. If comparer function is not passed to min operator, then for numeric values, least number is minimum value. For characters the least character in alphabetic order is considered to be minimum value.
2. The arguments of comparer function are (item1: T, item2: T) and function returns a number used to decide minimum value.
3. min operator returns observable that emits only single value as minimum item among all emitted items from source observable.

Example-1: Without Comparer

If comparer is not specified, default value is undefined. In this case max and min operator compares values of items using their natural ordering.
1. For numeric values, max returns observable with highest number and min returns observable with least number.
of(30, 20, 50, 35).pipe(
  max()
).subscribe(v => console.log(v)); // Output 50

of(30, 20, 50, 35).pipe(
   min()
).subscribe(v => console.log(v)); // Output 20 
2. For characters, max returns observable with highest character in alphabetic order and min returns observable with least character in alphabetic order.
of("Mohit", "Suresh", "Amit").pipe(
  max()
).subscribe(v => console.log(v)); // Output Suresh

of("Mohit", "Suresh", "Amit").pipe(
   min()
).subscribe(v => console.log(v)); // Output Amit 

Example-2: With Comparer

Comparer function has two arguments as first item and second item and returns a number to decide which is greater or smaller.
(item1: T, item2: T) => number 
For every item of source observable, max and min compares them to each other to find maximum or minimum items. At last they return observable with maximum or minimum items as single value. max operator returns maximum item and min operator returns minimum item decided by specified comparer.
Find the example.
import { Component, OnInit } from '@angular/core';
import { from, max, min } from 'rxjs';

@Component({
   selector: 'my-app',
   standalone: true,
   template: 'RxJS max and min'
})
export class MaxMinComponent implements OnInit {
   ngOnInit() {
      const students = [
         { name: "Shobhit", mark: 30 },
         { name: "Mohit", mark: 35 },
         { name: "Nilesh", mark: 25 }
      ];
      // Using RxJS max operator
      from(students).pipe(
         max((p1, p2) => p1.mark < p2.mark ? -1 : 1)
      ).subscribe(student => console.log(student)); //Output { name: "Mohit", mark: 35 }

      // Using RxJS min operator
      from(students).pipe(
         min((p1, p2) => p1.mark < p2.mark ? -1 : 1)
      ).subscribe(student => console.log(student)); // Output { name: "Nilesh", mark: 25 }    
   }
} 

References

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us