How to iterate using ngFor loop Map containing key as string and values as map iteration

Question

I am new to angular 5 and trying to iterate the map containing another map  in typescript   How to iterate below this kind of map in angular below is code for component   import   Component  OnInit  from   angular core     Component     selector   app-map     templateUrl     map component html     styleUrls      map component css      export class MapComponent implements OnInit     map   new Map lt String  Map lt String String gt  gt       map1   new Map lt String  String gt        constructor               ngOnInit         this map1 set  sss   sss        this map1 set  aaa   sss        this map1 set  sass   sss        this map1 set  xxx   sss        this map1 set  ss   sss          this map1 forEach  value  string  key  string    gt          console log key  value                  this map set  yoyoy  this map1               and its template html is     lt ul gt     lt li  ngFor  let recipient of map keys    gt        recipient       lt  li gt     lt  ul gt    lt div gt   map size   lt  div gt

User · Accepted Answer

For Angular 6 1    you can use default pipe keyvalue   Do review and upvote also       lt ul gt       lt li  ngFor  let recipient of map   keyvalue  gt            recipient key   -- gt    recipient value        lt  li gt   lt  ul gt    WORKING DEMO    For the previous version     One simple solution to this is convert map to array   Array from  Component Side    map   new Map lt String  String gt      constructor        this map set  sss   sss        this map set  aaa   sss        this map set  sass   sss        this map set  xxx   sss        this map set  ss   sss        this map forEach  value  string  key  string    gt            console log key  value              getKeys map       return Array from map keys         Template Side     lt ul gt     lt li  ngFor  let recipient of getKeys map   gt        recipient       lt  li gt   lt  ul gt    WORKING DEMO

User · Answer

If you are using Angular 6 1 or later  the most convenient way is to use KeyValuePipe      Component         selector   keyvalue-pipe         template    lt span gt           lt p gt Object lt  p gt           lt div  ngFor  let item of object   keyvalue  gt              item key     item value            lt  div gt           lt p gt Map lt  p gt           lt div  ngFor  let item of map   keyvalue  gt              item key     item value            lt  div gt         lt  span gt              export class KeyValuePipeComponent         object  Record lt number  string gt     2   foo   1   bar          map   new Map   2   foo     1   bar

User · Answer

As people have mentioned in the comments keyvalue pipe does not retain the order of insertion  which is the primary purpose of Map   Anyhow  looks like if you have a Map object and want to preserve the order  the cleanest way to do so is entries   function   lt ul gt       lt li  ngFor  quot let item of map entries   quot  gt           lt span gt key    item 0    lt  span gt           lt span gt value    item 1    lt  span gt       lt  li gt   lt  ul gt

User · Answer

Edit  For angular 6 1 and newer  use the KeyValuePipe as suggested by Londeren   For angular 6 0 and older  To make things easier  you can create a pipe    import  Pipe  PipeTransform  from   angular core     Pipe  name   getValues    export class GetValuesPipe implements PipeTransform       transform map  Map lt any  any gt    any             let ret                map forEach  val  key    gt                ret push                   key  key                  val  val                                      return ret             lt li  ngFor  let recipient of map  getValues  gt    As it it pure  it will not be triggered on every change detection  but only if the reference to the map variable changes  Stackblitz demo

User · Answer

This is because map keys   returns an iterator   ngFor can work with iterators  but the map keys   will be called on every change detection cycle  thus producing a new reference to the array  resulting in the error you see  By the way  this is not always an error as you  would traditionally think of it  it may even not break any of your functionality  but suggests that you have a data model which seems to behave in an insane way - changing faster than the change detector checks its value    If you do no want to convert the map to an array in your component  you may use the pipe suggested in the comments  There is no other workaround  as it seems   P S  This error will not be shown in the production mode  as it is more like a very strict warning  rather than an actual error  but still  this is not a good idea to leave it be

User · Answer

The below code useful to display in the map insertion order   lt ul gt       lt li  ngFor  quot let recipient of map   keyvalue  asIsOrder quot  gt            recipient key   -- gt    recipient value        lt  li gt   lt  ul gt    ts file add the below code  asIsOrder a  b        return 1

User · Answer

Angular   s keyvalue pipe can be used  but unfortunately it sorts by key  Maps already have an order and it would be great to be able to keep it  We can define out own pipe mapkeyvalue which preserves the order of items in the map  import   Pipe  PipeTransform   from   angular core       Holds a weak reference to its key  here a map   so if it is no longer referenced its value can be garbage collected  const cache   new WeakMap lt ReadonlyMap lt any  any gt   Array lt   key  any  value  any   gt  gt       Pipe   name   mapkeyvalue   pure  true    export class MapKeyValuePipe implements PipeTransform     transform lt K  V gt  input  ReadonlyMap lt K  V gt    Iterable lt   key  K  value  V   gt        const existing   cache get input       if  existing     undefined          return existing             const iterable   Array from input    key  value     gt     key  value          cache set input  iterable       return iterable         It can be used like so   lt mat-select gt     lt mat-option  ngFor  quot let choice of choicesMap   mapkeyvalue quot   value   quot choice key quot  gt         choice value       lt  mat-option gt   lt  mat-select gt

[javascript] How to iterate using ngFor loop Map containing key as string and values as map iteration

Examples related to javascript

Examples related to angular

Examples related to typescript

Examples related to angular-cli