Advantages of using Dictionary or Map Object in Angular
Tags: angular, typescript, javascript, node
Published: 2023-01-02 05:38:32

A quick introduction to Dictionary or Map Object. In a nutshell, it is used to manage key-value pairs.

Below is the primary usage of Map Object.

First, we are going to use the MODEL below as an example for storing our values.

![Class model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqjm8aie8yku6x9pdovs.png)


Then we will use a Class as a SERVICE to manage our Map Object.

![Service class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eixims5miunrv7ncaosr.png)


To add a record in our Map Object:

![Add method in our Service class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ji5xyjw9eysk5jhl6648.png)


To delete a record in our Map Object:

![Delete method in our Service class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnb72o2dlohg90q5vz1g.png)


To get a value in our Map Object:

![Get value method in our Service class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fiak6k1rnqx4bxxcq18x.jpeg)


To get the keys in our Map Object:

![A getter of keys in our Service class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4l4kyd6uwxmw550wybk.jpeg)


To get the key-value pairs in our Map Object:

![A getter of key-value pairs in our Service class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amhvsuci6dlitbew4wee.jpeg)


To get the values in our Map Object:

![A getter of values in our Service class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79vjmo493thwcfmwb7la.jpeg)


To get the length or size of our Map Object:

![A getter of size in our Service class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vm0yirsrhwo95e8jb1bt.jpeg)


That sums up the usage. Pretty simple, right?

Now we can use it in our Angular component like the code snippet below.

![Component class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u07r55ufj8z6sj9gr8m.png)


So what are the ADVANTAGES of using it?

- Easy to manage, delete, update, or get a record
- No need to use an index to do something with the record
- Prevents Object Injection Attack
- Convertible to Array
- Uses Iterable by default

![Uses Iterable by default](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pccbnhvuh5uxzy03e4kx.jpeg)


- Iterable can be used directly in the *ngFor directive of Angular

> Make sure the downlevelIteration is enabled in your tsconfig file

![Make sure the downlevelIteration is enabled in your tsconfig file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03dcbtxbqikub4jse80b.jpeg)


> Let's expose the values as IterableIterator in our SERVICE

![Let's expose the values as IterableIterator in our SERVICE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll15iefrhqte392qdnfj.jpeg)


> Let's add a Person to our Map Object and use the Iterable values in our Angular template

![Let's add a Person to our Map Object and use the Iterable values in our Angular template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sizywxgq7ks3eoscrem5.jpeg)


> This is how to use the Iterable values in our Angular template, just similar to how we loop the normal Array

![This is how to use the Iterable values in our Angular template, just similar to how we loop the normal Array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l929muqkxpnydsphv84.jpeg)

How about sorting the key-value pairs?

Currently, it is not supported in the Map Object itself but below is a workaround to sort the key-value pairs.

> Let's add a sort method to our SERVICE. We have to clear our Map Object and reinsert the key-value pairs

![Let's add a sort method to our SERVICE. We have to clear our Map Object and reinsert the key-value pairs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zje37xyodkoi0m5r9x0y.jpeg)


> Then let's add more values in our Map Object and call the sort method that we just added in our SERVICE

![Then let's add more values in our Map Object and call the sort method that we just added in our SERVICE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk15msf9nrm3wfprxnpe.jpeg)


> Finally, this will be our output after sorting

![Finally, this will be our output after sorting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hea7wq62kp57wztb3t8u.png)

We can just use the normal Array to sort, so we don't need to reset our Map Object.

![Convert Iterable to Array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po1tta1w2z8d36xys3ar.jpeg)


---

Thanks for reading! Don't forget to subscribe if you want more updates! 😉