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 [https://angular.io/api/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
[https://unicode-org.github.io/cldr-staging/charts/latest/supplemental/language_plural_rules.html] 
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
[https://stackblitz.com/edit/angular-ivy-ey5483?file=src/app/app.component.ts] 
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 [/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 TypescriptMarko Stjepanekpart 2
[https://prototyp.digital/blog/practical-aspects-of-advanced-typescript-part-2]
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
[https://prototyp.digital/blog/practical-aspects-of-advanced-typescript-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 [https://rxjs.dev/api]. 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 [https://rxmarbles.com/].

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
[https://stackblitz.com/edit/angular-ivy-d7jr9r?file=src/app/app.component.ts] 
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
[https://stackblitz.com/edit/angular-ivy-eudghk?file=src/app/app.component.html] 
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
[https://stackblitz.com/edit/angular-ivy-nhspn3?file=src/app/app.component.ts] 
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
[https://stackblitz.com/edit/angular-ivy-umxzwg?file=src/app/app.component.ts] 
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
[https://stackblitz.com/edit/angular-ivy-h7kczy?file=src/app/app.component.html] 
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
[https://stackblitz.com/edit/angular-ivy-yfk2kn?file=src/app/app.component.ts] 
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
[https://stackblitz.com/edit/angular-ivy-yqlacl?file=src/app/app.component.ts] 
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
[https://stackblitz.com/edit/angular-ivy-sdy67b?file=src%2Fapp%2Fapp.component.ts] 
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
[https://stackblitz.com/edit/angular-ivy-hg1qsm?file=src/app/app.component.ts] 
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
[https://stackblitz.com/edit/angular-ivy-6vhxy6?file=src/app/app.component.ts] 
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
[/detecting-network-state-with-javascript/hello@prototyp.digital].

AuthorMarko Stjepanek

Start a Project