I heard that using Immutable.js in my Angular application can improve performance and I want to incorporate it into my code.
Currently, my component utilizes a regular TypeScript Map in the template, which is iterated with *ngFor and keyValue pipe.
However, when I try to replace the map with an Immutable.Map, the iteration does not work as expected!
So, my question is how can I iterate over an Immutable.Map within the template?
Thank you in advance.
Update: To replicate the issue...
In app.component.ts:
import { Component } from '@angular/core';
import { Map as immuMap } from 'immutable';
@Component({
selector: 'app-map',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myMap = immuMap({ a: 1, b: 2, c: 3 });
}
In app.component.html:
<div *ngFor="let item of myMap | keyvalue">
<span>{{ item.key }} : {{ item.value }}</span>
</div>
Previously, when myMap was a simple TypeScript Map, it worked fine. However, after refactoring to use Immutable.js Map, the ngFor no longer produces the expected result.
The output of the above code snippet is:
__altered : false
__hash :
__ownerID:
_root : [object Object]
size : 3