The Angular observable Map operator takes an observable source as input. It applies a project function to each of the values emitted by the source observable and transforms it into a new value. It then emits the new value to the subscribers. We use a Map with a Pipe, which allows us to chain multiple operators together. In this guide, we’re going to learn how to use the Map operator with examples like converting the source to upper case, Using Map the Angular HTTP Request, with DOM events, filtering the input data, and using multiple Maps together, etc.
Syntax
The syntax of the map
operator is as follows.
map<T, R>(project: (value: T, index: number) => R, thisArg?: any): OperatorFunction<T, R>
project:
is a function that we use to manipulate the values emitted by the source observable. The project can accept two arguments. one is value
i.e. the value emitted by the observable. The second argument is index
number. The index
number starts from 0
for the first value emitted and incremented by one for every subsequent value emitted. It is similar to the index of an array.
thisArg
: is optional and default is undefined.It defines what this
is in the project
function.
Using Observable Map
To use map
first we need to import it from the rxjs/operators
library.
import { map } from 'rxjs/operators'
Next, create an observable from array of numbers as shown below.
srcArray = from([1, 2, 3, 4]);
Use the pipe method to and invoke the map method.
multiplyBy2() {
this.srcArray
.pipe(map(val => { return val * 2}))
.subscribe(val => { console.log(val)})
}
The project function accepts only one argument val
and returns it multiplied by 2.
map(val => { return val * 2})
Finally, we subscribe and print the result in console. The output is 2,4,6,8
The following image explains how values from the source observable ( i.e.1,2,3,4 ) go through the map
which transforms it into new values by multiplying it by 2.
Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular

You can also access the second argument index
as shown below. It starts as 0 for the first value and gets incremented for every subsequent value
multiplyBy2() {
this.srcArray
.pipe(map((val, i) => { //index
console.log(i) //0
return val * 2;
}))
.subscribe(val => { console.log(val) })
}
Map Examples
Convert input to upper case
srcName$ = from(['John', 'Tom', 'Katy'])
toUpperCase() {
this.srcName$
.pipe(map(data => {
return data.toUpperCase();
}))
.subscribe(data => console.log(data))
}
Map to a Single Property
srcObject = from([
{ fName: 'Sachin', lName: "Tendulkar" },
{ fName: 'Rahul', lName: "Dravid" },
{ fName: 'Saurav', lName: "Ganguly" },
]);
MapToSingleProperty() {
this.srcObject
.pipe(map(data => { return data.fName + ' ' + data.lName }))
.subscribe(data => { console.log(data) })
}
//output
Sachin Tendulkar
Rahul Dravid
Saurav Ganguly
Using Map with HTTP Request
The following code gets the list of dogs breeds from the https://dog.ceo/api/breeds/list/all
API and uses the keyValue
pipe to transform the object into an array of key-value pairs.
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Observable, from, pipe, fromEvent } from 'rxjs';
import { map, filter, tap } from 'rxjs/operators'
import { HttpClient } from '@angular/common/http';
import { KeyValuePipe } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [KeyValuePipe]
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient,
private keyValue: KeyValuePipe) {
}
@ViewChild('btn', { static: true }) button: ElementRef;
$dogsBreed(): Observable<any> {
return this.http.get<any>("https://dog.ceo/api/breeds/list/all")
}
getDogsBreed() {
this.$dogsBreed()
.pipe(map(data => {
var dogs = this.keyValue.transform(data.message)
console.log(dogs)
}))
.subscribe();
}
}
Using with event
You can create observable from event and use the map
to transform the values.
buttonClick() {
fromEvent(this.button.nativeElement, 'click')
.pipe(map( ev => (ev as any).clientX))
.subscribe(res => console.log(res));
}
map with filter
srcArray = from([1, 2, 3, 4]);
filterWithMap() {
this.srcArray
.pipe(
filter(val => {
return val > 2;
}),
map((val, i) => {
return val * 2;
}))
.subscribe(val => { console.log(val) })
}
Multiple map
The following examples shows use of multiple map functions. The first map adds 10, while the second mad multiplies by 2.
mulitpleMaps() {
this.srcArray
.pipe(
map(val => {
return val + 10;
}),
map((val, i) => {
return val * 2;
}))
.subscribe(val => { console.log(val) })
}
References
Read More
Add HttpClientModule into app.module.ts file if have error when run example map with http request
Add HttpClientModule into app.module.ts file if have error when run example map with http request
you could have given better examples, though it is good for beginners to understand