Angular + RxJS : max & min
February 08, 2024
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
RxJSmax operator finds the item with maximum value from the source observable comparing by specified comparer function.
max(comparer?: (x: T, y: T) => number)
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
RxJSmin operator finds the item with minimum value from the source observable comparing by specified comparer function.
min(comparer?: (x: T, y: T) => number)
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 casemax 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
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
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 }
}
}
