Marko Stjepanek

Unlock the power of localization with Angular's ngPlural directive! Check out how to use this feature to simplify pluralization in your software by allowing a dynamic display of different templates based on a value.

Pluralization in Angular (ngPlural) - Prototyped

Many of us have encountered the problem of pluralization, where it was necessary to set a certain text in the correct form depending on the value of the variable. For example: 1 car; 2 cars. We came up with some workarounds to do this, but since version 10, Angular has added the ngPlural directive to angular/common.



What is pluralization?


Pluralization is a process of forming the plural of a word, which typically involves adding an inflection such as an -s or -es to the singular form of the word. However, not all languages have simple rules for pluralization. Some languages have multiple forms of pluralization for different types of nouns. In software development, pluralization is important for displaying text which is grammatically correct and appropriate for the context. On this website, you can find how pluralization works by language.


The English language for pluralization has one and other:



For the German language, it is the same as English:



The Croatian language is different from English and German. He includes: one, a few, and other:


Implementation


constructor(
	@Inject(LOCALE_ID) public locale: string // locale by default will be en-US
)



To use this directive you must provide a container element that sets the [ngPlural] attribute to a switch expression. Inner elements with a [ngPluralCase] will display based on their expression. If the ngPluralCase value is set to a value starting with =, it will only display if the value matches the switch expression exactly.


As we saw for the English language there are categories: one and other. In category one is only number 1, and in the other is everything else. In this example, if the variable days is 0 because we put = as we said above it exactly matches the expression it would say “No days”. If the variable days would be 1 it would say “1 day”. If the variable days is 2, again because of the = it would say “Two days”. If the variable is any other number like 3,4,5 etc. it would say for example “5 days”.


<div [ngPlural]="days">
  <ng-template ngPluralCase="=0">No days</ng-template>
  <ng-template ngPluralCase="one">1 day</ng-template>
  <ng-template ngPluralCase="=2">Two days</ng-template>
  <ng-template ngPluralCase="other">{{ days }} days</ng-template>
</div>




Set different language


in app.module.ts we want to add a new language that will be used.


@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  providers: [
	// remove comment of language you want to use
    { provide: LOCALE_ID, useValue: 'de-DE' },
    //{ provide: LOCALE_ID, useValue: 'hr-HR' },
  ],
  bootstrap: [AppComponent],
})



We got an error for locale “de-DE” because only the English language is implemented by default. So we have to add other languages if we want to use them. We are setting for German and Croatian because as we said in the beginning Croatian is a little different so we can show it later.


import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';
import localeHr from '@angular/common/locales/hr';
import localeHrExtra from '@angular/common/locales/extra/hr';

registerLocaleData(localeDe, 'de-DE', localeDeExtra);
registerLocaleData(localeHr, 'hr-HR', localeHrExtra);



German language, just like English has two categories: one and other. If the variable days is 1 it would say “1 Tag” and if the variable day is any other number 2, 5, 10.2, 12.8… it would say for example “8 Tage”.


<div [ngPlural]="days">
  <ng-template ngPluralCase="one">{{days}} Tag</ng-template>
  <ng-template ngPluralCase="other">{{days}} Tage</ng-template>
</div>



The Croatian language has three categories: one, few, and other. Most of the numbers that have the last number 1 are in category one, so for the example, it would be “1 sat”, “21 sat”, and “31 sat”. We don't have to know in our head what number is in what category. We just have to look at our table at the beginning for pluralization. For category few, it would be “2 sata” or “5.2 sata”. Category other would be “5 sati” or “10 sati”.


<div [ngPlural]="hours">
  <ng-template ngPluralCase="one">{{ hours }} sat</ng-template>
  <ng-template ngPluralCase="few">{{ hours }} sata</ng-template>
  <ng-template ngPluralCase="other">{{ hours }} sati</ng-template>
</div>



Here is an example where you can test this pluralization out.


Conclusion


In conclusion, the ngPlural directive in Angular makes it easy to handle different plural forms of text in an application. By specifying plural categories and associated text, developers can ensure the correct text is displayed based on the number of items. This feature simplifies creating user-friendly and linguistically correct applications. Overall, ngPlural is a valuable tool for Angular developers.


Thank you for your time to read this blog! Feel free to share your thoughts about this topic and drop us an email at hello@prototyp.digital.

Development

Pluralization in Angular (ngPlural)

Want to learn more about TypeScript? The second part of an article series can help you to learn practical things for everyday use with Typescript. 

Practical aspects of advanced TypeScript - part 2 - Prototyped

We learned unknown, type guard, union, and intersections in the first part.

If you skipped the first part you could check it out here Practical aspects of advanced TypeScript - part 1. In the order to learn some other advanced topics, in this part, we will learn about generics, conditional types, and, utility types.



Generics


Generics are to types what values are to function arguments — a way to tell our functions, classes, or interfaces what type we want to use when we call it. Similar to how we tell a function what values to use as arguments when we call them.

The great news is that, most likely, you won’t need to create generic functions very often. It’s much more common to call generic functions than to define them. Still, it’s very useful to know how generic functions work, as it can help you understand compiler errors more.


Good use cases for using generics are:


 * When function, class, or interface will work with a different variety of data types
 * When function, class, or interface uses that data on more different places


Functions that take arrays as parameters are often generic functions, so map, filter, forEach, etc. are generics.

For example when you click to get the definition of the map method you get this:


map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[]



Also, for example, most operators in RxJS, and Higher-Order Components in React framework are generic functions.


To learn generics we are going to write “Hello World” example of generics - identity function.

This is a function that returns the input parameter value which is a number type.


function identity (value: number): number {
	return value
}



What if we want the function to return whatever type we gave it? It would look like this:


function identity (value: any): any {
	return value
}



With any, we got that our function can accept any input, but as we said in the first article, we don’t want to use any because we lose type safety. Also, we would lose the information about which type will function return. So to get a function that can get whatever input type without writing any, we use generics.


function identity <T>(value: T) : T {
    return value;
}

console.log(identity<string>("Hello")) // Hello



In the call of a function Instead of T we pass in the real type that we want to use for that specific function call. <T> is just a syntax for the argument of type. It can also take in multiple types just like we can have multiple arguments in a function.


function identity <T, U>(value: T, msg: U): T {
	console.log(msg)
	return value
}  




Generic Constraints


Sometimes we want to constraint the number of types that our generic accept. Generic constraints exactly do that. For example, we want to use the .length property that not every type has. We are going to use our previous example identity function to show it.


In this case, the compiler doesn’t know that T indeed has a .length property. We can extend our type with an interface that has our length property.

interface Length {
    length: number;
}

function identity <T extends Length>(value: T) : T {
    console.log(value.length)
    return value;
}



When we want to use the identity function it gives us an error if we put a type that doesn’t have the .length property like a number.


Also, constraints are used to check if the key exists in the object. We’d like to be sure that we’re not accidentally using a property that does not exist on the obj.

name and age are keyof Person and if we call this function it would look like this:


interface Person {
    name: string;
    age: number;
}

function get<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const person: Person = {
    name: 'Max',
    age: 25
}

console.log(get(person, 'job')) // Argument of type '"job"' is not assignable to parameter of type 'keyof Person'.
console.log(get(person, 'name')) // Max




Conditional Types


The main advantage of conditional types is their ability to narrow down the possible actual types of a generic type. The syntax for conditional types is similar to ternary expressions and is based on generics.


type Conditional<T> = T extends U ? A : B



Where T is the generic type parameter. U, A, and B are other types.

For example, this is how function overloading would look without conditional types.


interface Order {
    id: number
    items: number
}

interface Customer {
    id: number
    name: string
    surname: string
}
 
interface Product {
    id: number
    quantity: number
 }

function fetchOrder(id: number): Order
function fetchOrder(customer: Customer): Order[]
function fetchOrder(product: Product): Order[]



We can use conditional type to simplify our overloads to a single function:


... 
type FetchParams = number | Customer | Product

type FetchReturns<T extends FetchParams> = T extends Customer | Product 
    ? Order[] 
    : Order

function fetchOrder<T extends FetchParams>(params: T): FetchReturns<T>

fetchOrder(customer) // Order[]
fetchOrder(product) // Order[]
fetchOrder(5) // Order
fetchOrder('test') // string is not assignable to parameter of type 'FetchParams'




Utility Types


Utility types are a set of built-in types that allow you to create new types based on the properties of existing types. They are practical for easier creating specific types and help you make more maintainable code.


There are many utility types, but we will go through the most important ones:



Readonly


Creates a new type that has all the properties of the original type, but with all properties marked as read-only. That means that properties of the constructed type cannot be reassigned.


interface Animal {
    name: string
    age: number
}

type ReadonlyAnimal = Readonly<Animal>

const cat: Animal = {
    name: 'Mittens',
    age: 3
}

const dog: ReadonlyAnimal = { 
    name: 'Rex', 
    age: 5 
};

cat.name = 'Tom' // OK
dog.name = 'Fido' // Cannot assign to 'name' because it is a read-only property.




Partial


Creates a new type that has all the properties of the original type, but with all properties marked as optional.


interface Animal {
    name: string
    age: number
}

type PartialAnimal = Partial<Animal>

const cat: Animal = { // Property 'age' is missing in type '{ name: string; }' but required in type 'Animal'.
    name: 'Mittens',
}

const dog: PartialAnimal = { // OK
    name: 'Rex',
}



The problem with Readonly, Partial, and many other utility types is that they only work with the first level of properties. So if you have a nested data structure you will have to create your own deep utility:


type DeepReadonly<T> = {
    readonly [P in keyof T]: DeepReadonly<T[P]>
}



type DeepPartial<T> = {
    [P in keyof T]?: DeepPartial<T[P]>
}



Example with DeepPartial:


interface Student {
    name: string
    age: number
    address: {
        city: string
        street: string
    }
}

type PartialStudent = Partial<Student>

const student: PartialStudent = { // Property 'street' is missing in type '{ city: string; }' but required in type '{ city: string; street: string; }'.
    name: 'Max',
    address: {
        city: 'Berlin'
    }
}

type DeepPartial<T> = {
    [P in keyof T]?: DeepPartial<T[P]>
}

type DeepPartialStudent = DeepPartial<Student>

const newStudent: DeepPartialStudent = { // OK
    name: 'Max',
    address: {
        city: 'Berlin'
    }
}




Required


Creates a new type that has all the properties of the original type, but with all previous optional properties that are now required.


interface Animal {
    name: string
    age?: number
}

type RequiredAnimal = Required<Animal>

const cat: Animal = { // OK
    name: 'Mittens'
}

const dog: RequiredAnimal = { // Property 'age' is missing in type '{ name: string; }' but required in type 'Required<Animal>'.
    name: 'Rex'
}




Record


Shortcut for creating a new type with a set of specific keys and values. This utility can be used to map the properties of a type to another type.


type NumberRecord = Record<string, number>
const nameAgeMap: NumberRecord = {
    'Jake': 21,
    'Bob': 25,
    'Mark': 50
}




Pick


Creates a new type that removes all but the specified keys from an object type.


interface Person {
    name: string;
    age: number;
    country: string
    address: string;
}

type PersonMainInfo = Pick<Person, 'name' | 'age'>
  
const user: PersonMainInfo= {
    name: 'Bob',
    age: 25
}




Omit


This works the other way around than Pick. It creates a new type that has all the properties of the original type, except for a set of specific properties which will be removed.


interface Person {
    name: string;
    age: number;
    country: string
    address: string;
}

type PersonMainInfo = Omit<Person, 'address'>
  
const user: PersonMainInfo= {
    name: 'Bob',
    age: 25,
    country: 'USA'
}




Exclude


Creates a new type that excludes types from a union of the original type.


type actions = 'add' | 'remove' | 'update' | 'delete'

type basicActions = Exclude<actions, 'update' | 'delete'> // type basicActions = "add" | "remove"

const btnAction: basicActions = 'add'




Extract


Creates a new type that extracts types from a union of the original type. Reverse utility of Exclude.


type actions = 'add' | 'remove' | 'update' | 'delete'

type basicActions = Extract<actions, 'add' | 'remove'> // type basicActions = "add" | "remove"

const btnAction: basicActions = 'remove'




NonNullable


Creates a new type that removes the null and undefined values from the original type.


type actions = 'add' | 'remove' | 'update' | 'delete' | null

type NonNullableActions = NonNullable<actions> // type NonNullableActions = "add" | "remove" | "update" | "delete"




Conclusion


In conclusion, generics, conditional types, and utility types are powerful tools in the TypeScript language that allows developers to write code that is more flexible, reusable, and expressive. Generics allow developers to create functions and classes that can work with a variety of types, rather than being tied to a specific type. Conditional types allow developers to create type definitions that depend on other types, allowing for more dynamic and expressive type definitions. Utility types provide a set of pre-defined types and type transformations that can be used to create more complex and expressive type definitions.


Overall, these features make it easier for developers to write type-safe code that is easy to understand and maintain. They are a valuable addition to the TypeScript language and can greatly improve the developer experience when working with complex and dynamic data structures.


Thank you for your time to read this blog! Feel free to share your thoughts about this topic and drop us an email at hello@prototyp.digital.

Practical aspects of advanced TypeScript - part 2

Want to learn more about TypeScript? With this article, we're starting a series of articles to help you learn practical things for everyday use with TypeScript.

Practical aspects of advanced TypeScript - part 1 - Prototyped

If you're looking for the second part of this article, here it is:

Blog | Practical aspects of advanced TypeScript - part 2Learn practical stuff for everyday use with Typescriptpart 2Marko Stjepanek

Many of us have used TypeScript, but only its basics. TypeScript is a syntactic superset of JavaScript. This means that TypeScript adds syntax on top of JavaScript so developers can add types. In order to use all that TypeScript offers, it is necessary to learn its more complex aspects. To make learning easier, the topic will be divided into several articles. This is part one.



Any vs unknown


I often see in other people’s code that they use any when they don’t know the type of their variable. We should not use any since it does not give us a lot of protection. Any is an escape hatch from the type system. Here comes unknown to the rescue. Just like all types are assignable to any, all types are assignable to unknown, but unknown isn’t assignable to anything but itself and any without a type assertion or narrowing to a more specific type with type guards.



Type guard


As said earlier type guard is a mechanism that narrows types. Usually, type guards are within a conditional block and they return a boolean value. Some ways to use a type guard are:


 * nullable type guard
 * typeof operator
 * instanceof operator
 * in operator
 * custom type guard



Nullable type guard


When we are using an optional operator we should use a nullable type guard.


function sayHello (name?: string): string {
    if(name) {
        return `Hello ${name.toUpperCase()}`
      }
    return `Hello stranger`
}




Typeof operator


typeof type guard is used to determine the type of a variable. It is limited and can determine only types:


 * boolean
 * number
 * bigint
 * string
 * symbol
 * function
 * undefined


If type is outside of this list, the typeof returns object.


function setWidth (width: string | number): void {
	if (typeof width === 'string') {
		this.width = parseInt(width)		
	} else {
		this.width = width
	}




Instanceof operator


instanceof type guard is used to check if a value is an instance of a given constructor function or a class.


class Person {
	constructor (public name: string) {}
}

function Hello (obj: unknown): void {
	if (obj instanceof Person) {
		console.log('Hello', obj.name)
	}
}




In operator


in type guard checks if an object has a particular property. It is used to differentiate between different types. The basic syntax for the in type guard is:


propertyName in objectName



"id" in { name: "Jason", id: 5 } // true
"id" in { name: "Robert" } // false
"id" in { name: "Jane", id: undefined } // true



In the example where the id property exists, the boolean true is returned. More complex example with in operator with objects will be shown in the next chapter with Union types.



Custom type guard


Typescript lets you define your own type guards. A custom type guard is a Boolean-returning function that can assert something about the type of its parameter. They are mostly used when dealing with data coming from a third party.


interface Car {
    fuel: string
    color: string
    numberOfWheels: number
}

interface Bicycle {
    color: string
    numberOfWheels: number
}

const isCar = (data: Car | Bicycle): data is Car => {
    return (data as Car).fuel !== undefined
}

function printVehicle (vehicle: Car | Bicycle): void {
    if(isCar(vehicle)) {
        console.log(`Car is ${vehicle.fuel} powered`)
    } else {
        console.log(`Bicycle is ${vehicle.color}`)
    }
}




Union and Intersection types


To get a more comprehensible and clearer type of support we use unions and intersections.



Union


It might be confusing that a union of types appears to have the intersection of those types’ properties. This is not an accident - the name union comes from the type theory. The union number | string is composed by taking the union of the values from each type. Notice that given two sets with corresponding facts about each set, only the intersection of those facts applies to the union of the sets themselves.


As we see, we only get 3 methods to use, because number and string have only these in common.

In Union, we use type guards (if statements) to narrow down the union type to its single type. Mostly we use typeof type guard.


function printId(id: number | string): void {
    if(typeof id === "number") {
        console.log(id.toString()) // only type number has toString()
    } else {
        console.log(id.slice(0, 5)) // only type string has slice()
    }
}



If we have an object we can use the in type guard. It allows us to test if a property is in an object like this:


interface Worker {
    name: string
    surname: string
    age: number
    position: string
}

interface Student {
    name: string
    surname: string
    age: number
    studentId: number
    yearOfStudy: number
}

function printProperty(user: Worker | Student): void {
    if ("studentId" in user) {
        console.log(user.yearOfStudy);
      } else {
        console.log(user.position);
    }
}



The problem with using the operator in, is when the object is complicated and we have more types and overlaps. To solve that problem, discriminated unions have shown to be practical.


Discriminated Union


In Discriminated Union we create a new property in all types that we need to check against. It scales well and works with large objects. We are going to add the property USER_TYPE to the previous example.


enum UserType {
    Worker = "Worker",
    Student = "Student"
 }

interface Worker {
    name: string
    surname: string
    age: number
    position: string
    USER_TYPE: UserType.Worker
}

interface Student {
    name: string
    surname: string
    age: number
    studentId: number
    yearOfStudy: number
    USER_TYPE: UserType.Student
}

function printProperty(user: Worker | Student): void {
    if (user.USER_TYPE === UserType.Student) {
        console.log(user.yearOfStudy);
      } else {
        console.log(user.position);
    }
}




Intersection


The intersection combines properties from one type A with another type B. The result is a new type with the properties of type A and type B. Advantage of using intersection is a more accessible update of multiple types. Also, the difference between types becomes easier to read.


// Before
type Person = {
    name: string
    surname: string
    age: number
}

type Student = {
    name: string
    surname: string
    age: number
    studentId: number
    yearOfStudy: number
}


// After
type Person = {
    name: string
    surname: string
    age: number
}

type Student = Person & {
    studentId: number
    yearOfStudy: number
}




Conclusion


With previous examples, we learned how to use unknown, type guard, union, and intersections. Stay tuned for part 2 of Practical aspects of advanced Typescript to learn more about Conditional Types, Utility Types and Generics.


Thank you for your time to read this blog! Feel free to share your thoughts about this topic and drop us an email at hello@prototyp.digital.

Practical aspects of advanced TypeScript - part 1

What do you need to know about RxJS operators in reactive programming? Keep reading, and let me introduce you to the most crucial operators in RxJS. 

RxJS with Angular 101 - Prototyped

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. Angular and Angular Material implements RxJS out of the box. Other Javascript libraries can use RxJS also but have to install it like a package.


Official documentation can be found on RxJS. Since the documentation is quite complicated and as the RxJS library is very large, this article will cover the most important concepts used on daily basis.



Observable


An Observable is basically a function that can return a stream of values to an observer over time, this can either be synchronously or asynchronously. It is called observable, as in something that’s able to be observed.



Operators


Operators have a big role when using RxJS, with them the code can achieve reactive programming. Simply said, operators are functions. There are Creation operators and Pipeable operators. Creation operators are functions that can be used to create an Observable with some common predefined behavior or by joining other Observables. A Pipeable operator is a pure function that takes one Observable as input and generates another Observable as output while the previous Observable stays unmodified. To make it easier to understand, the operators will also be shown with marbles.



Async pipe and Observable


The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. That means with the async pipe promises and observables can be used directly in the template, without creating or saving the result in a variable. When the async pipe is used Angular is automatically subscribing to the observable, and unsubscribing at the end of the component lifecycle.


Here is the example.


import { Observable } from 'rxjs'
...

    vehicles$: Observable<Vehicle[]>

...

ngOnInit() {
    this.vehicles$ = this.vehicleService.loadAllVehicles()
}



<div *ngFor="let vehicle of (vehicles$ | async)">
    <p>{{vehicle.name}}</p>
    <p>{{vehicle.price}}</p>
</div>



of


Creation operator which creates an Observable stream from a source. Mostly, the operator of() is used with other operators. In the next section is an example of using of() with pipe(), map(), filter() and reduce()






pipe


The pipe is used to improve the readability of the code. The purpose of the pipe function is to unite together all the functions that take and return observable. It takes an observable initially, then that observable is used throughout the pipe function by each function used inside of it. Also, it cleans up Observable.prototype by removing operators and it makes the RxJS library more tree-shakeable.


Here is the example.


import { of, pipe, map, filter, reduce } from 'rxjs'

of(1, 2, 3, 4, 5)
  .pipe(
    map((x) => x * 2),
    filter((x) => x > 5),
    reduce((acc, current) => acc + current, 0)
  )
  .subscribe((value) => console.log(value));

// Logs:
// 24




map, filter, reduce


Most used pipeable operators in RxJS are map(), filter() and reduce(). Similar to methods in Javascript that work with arrays, only in RxJS do they work with streams.


Here is the example.


import { of, map } from 'rxjs'

of(1, 2, 3)
  .pipe(map((x) => 10 * x))
  .subscribe((value) => console.log(value));

// Logs:
// 10
// 20
// 30






import { of, filter } from 'rxjs'

of(2, 30, 22, 5, 60, 1)
  .pipe(filter((x) => x > 10))
  .subscribe((value) => console.log(value));

// Logs:
// 30
// 22
// 60






import { of, reduce } from 'rxjs'

of(1, 2, 3, 4, 5)
  .pipe(reduce((x, y) => x + y))
  .subscribe((value) => console.log(value));

// Logs:
// 15







tap


An operator which transparently performs actions or side effects. While it is possible to perform side effects inside of, for example, a map or filter, that would make their mapping functions impure. The tap operator is designed solely to help remove side effects from other operations. Some examples of side effects are calling the function that might be visible to the end-user (show some message or dialog), debug code...

The previous example with the operator tap().


Here is the example.


import { of, pipe, map, filter, reduce, tap } from 'rxjs'

of(1, 2, 3, 4, 5)
  .pipe(
    map((x) => x * 2),
    filter((x) => x > 5),
    reduce((acc, current) => acc + current, 0),
    tap((sum) => showResultInDialog(sum))
  )
  .subscribe();




forkJoin


It is one of the most popular combination operators, similar to Promise.all, but for observables. It is used when there is a group of observables and only the final value of every observable matter. Once all observables are complete forkJoin will then emit a group of the last values from corresponding observables. The resulting streams emit only one time when all the streams are complete. Be careful because it will never be completed if one of the inner streams doesn't complete and will throw an error if one of the inner streams has errors. If there is a need where the stream has to be complete even if some of the inner streams have errors, catchError() can be set to every inner stream or just the ones that could have errors.


Here is the example.

If there is an observable that emits more than one item it may work better with an operator like combineLatest().


import { forkJoin, of, pipe, catchError } from 'rxjs'
...

forkJoin({
  driveTypes: this.configuratorService.getDriveTypes(),
  vehicleTypes: this.configuratorService.getTypes(),
  vehicle: this.loadVehicle().pipe(
    catchError(() => return of(undefined))
  ),
}).subscribe((responses) => {
  this.driveTypes = responses.driveTypes;
  this.vehicleTypes = responses.vehicleTypes;
  this.vehicle = responses.vehicle;
});




combineLatest


This operator is best used when there are multiple, long-lived observables that rely on each other. The operator will not emit an initial value until each observable emits at least one value.


Here is the example.

Depending on the observable emitting it is necessary to decide which operator is more appropriate, combineLatest() or forkJoin().


import { combineLatest, Observable } from 'rxjs'
import { FormControl } from '@angular/forms';
...
search = new FormControl('');
searchString$ = this.search.valueChanges.pipe(startWith(''));

combineLatest([
  this.cpApi.getCustomerVehicles(this.customerId),
  this.searchString$,
])
  .pipe(
    map(([vehicles, searchString$]) => 
        this.searchFilter(vehicles, searchString$);
    )
  )
  .subscribe();







mergeMap


Operator mergeMap() is a combination of two operators - merge and map. The map part maps a value from a source observable to an observable stream. The merge part works like mergeAll - it combines all inner observable streams returned from the map and concurrently emits all values from every input stream to get nesting observables. Nesting observables are useful when certain actions result in or initiate subsequent asynchronous operations whose results need to be brought back into the source observable. Operator catchError() will catch error from every endpoint.


Here is the example.


import { Observable, tap, mergeMap, catchError, of } from 'rxjs'
...

this.vehicleService
  .quickEditStock(vehicleId, quickEditData)
  .pipe(
    mergeMap((quickEditStockResult) =>
      this.vehicleService.updateWarranty(
        quickEditStockResult.vehicleId,
        warrantyData
      )
    ),
    mergeMap((warrantyResult) =>
      this.vehicleService.updateVehicle(warrantyResult.id, vehicleData)
    ),
    mergeMap((configUnitResult) =>
      this.marketService.updateVehicleAds(
          configUnitResult.value, vehicleAdData)
    ),
    tap((vehicleAdsResult) => {
      this.refreshRemainingVehicleAdsData(vehicleAdsResult);

      this.showSnackBar(vehicleAdsResult);
    }),
    catchError(() => {
      this.showSnackbarError();
      return of(undefined);
    })
  )
  .subscribe();







debounceTime


An operator which delays the values emitted by a source for the given due time. If within this time a new value arrives, the previous pending value is dropped and the timer is reset. In this way, debounceTime() keeps track of the most recent value and emits that most recent value when the given due time is passed. The time is in milliseconds. It is most commonly used with entering data into a form.


Here is the example.


import { pipe, debounceTime } from 'rxjs/operators'
...

this.formGroup
  .get("mileage")
  .valueChanges.pipe(debounceTime(500))
  .subscribe((value) => {
    this.prepareForm(value);
  });







distinctUntilChanged


Only emit when the current value is different than the previous. Most commonly used with debounceTime().


Here is the example.


import { pipe, debounceTime, distinctUntilChanged } from 'rxjs/operators

this.formGroup
  .get("search")
  .pipe(debounceTime(500), distinctUntilChanged())
  .subscribe((value) => {
    this.appraisalService.findVehicleByVin(value);
  });







switchMap


Maps each value to an Observable, then flattens all of these inner Observables. The most important difference between switchMap and other flattening operators (mergeMap, concatMap...) is the canceling effect. On each emission, the previous inner observable is canceled and the new observable is subscribed.


Here is the example.


import { pipe, debounceTime, distinctUntilChanged, switchMap } 
 from 'rxjs';

this.formGroup
  .get('search')
  .pipe(
     debounceTime(500),
     distinctUntilChanged(),
     switchMap((value) => this.appraisalService.findVehicleByVin(value))
   )
   .subscribe();







Other operators that can be useful


 * iif() - Conditionally create a stream with an if/else approach
 * groupBy() - Group into observable according to the criteria you set for them
 * count() - Count the number of emmisions and then emits that number
 * max() - Emit the item with the largest value
 * first() - Emit only the first event of a stream
 * last() - Emit only the last event of a stream
 * skip() - Skip a certain number of events
 * throttleTime() - Emit event at most once every time period
 * concat() - Append the events of one observable sequence after another in order
 * takeUntil() - Emit events until a subordinate observable emits
 * takeWhile() - Emit values so long as each value satisfies the given predicate



Conclusion

In this article, we have gone through the most important things that I consider in RxJS. Once you learn this you are on your way to mastering RxJS. It may take time to get used to using RxJS at first, but it will pay off!

Thank you for your the time to read this blog! Feel free to share your thoughts about this topic and drop us an email at hello@prototyp.digital.

AuthorMarko Stjepanek

Start a Project