ngModel and ngFor with Map in Angular

Question

I'm trying to use a string boolean map with ngfor to create a list of checkboxes, but this approach doesn't work.

.ts

plainMap: Map<string, boolean> = new Map<string, boolean>();

.html

<div *ngFor="let item of plainMap">
   <input [(ngModel)]="plainMap.get(item)" type="checkbox" name="item.name" value="item.name">
</div>

Actually had to add *ngFor="let item of plainMap.keys()" to make it iterable but [(ngModel)] binding doesn't work — sander, Jul 24 '18 at 06:58

SoroushNeshat · Answer 1 · 2018-07-24T07:59:34.657

my solution is adding a property to component class and call it : "iterablePlainMap" .

add to your .ts :

plainMap = new Map<String, boolean>();

iterablePlainMap;

deleteEntry(key: string) {
   this.plainMap.delete(key);
   this.updateIterablePlainMap();
}

setEntry(key: string, value: boolean) {
   this.plainMap.set(key, value);
   this.updateIterablePlainMap();
}

updateIterablePlainMap() {
   this.iterablePlainMap = [];
   this.plainMap.forEach((value, key) => {
       this.iterablePlainMap.push({ value, key });
   });
}

actualy setEntry and deleteEntry methods are wraping original set and delete methods of plainMap

and in your .html :

<div *ngFor="let item of iterablePlainMap;let index = index;trackBy:trackByIndex;">
   <input [(ngModel)]="iterablePlainMap[index].value" type="checkbox">
</div>

ngModel and ngFor with Map in Angular

1 Answers1