How can i pass a Map in angular 2+ from html template to custom directive?

Question

I'm trying to pass a map from an angular html template to a custom directive.

I guess I succeed to pass it as an object, because I can console.log the map values. But when I try to set or get values from the map I get an error.

My code:

html template

<canvas id="seatsCanvasMain" 
        name="seatsCanvasMain" 
        appTheaterMap [takenSeatsMap]="show.theaterMap" 
        style="border:1px solid black">
</canvas>

Directive:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appTheaterMap]'
})
export class TheaterMapDirective {
  canvas;
  @Input() takenSeatsMap: any;


  constructor(private el: ElementRef) {
    this.canvas = this.el.nativeElement;
  }

  ngOnInit() {

    this.canvas.onclick = (e) => {
      console.log(this.takenSeatsMap);//this will console log the map as an object. at first it seems that it passed correctly
      this.takenSeatsMap.get('4-4'); // ERROR TypeError: _this.takenSeatsMap.get is not a function

    }

  }

}

Here is the console.log

Anybody knows what can I do? I would also appreciate other methods on how to pass this map to the directive

Many thanks

Please, add the error to your post, so we could help you out better — Ricardo Rocha, Jul 17 '18 at 13:17
By the looks of it, you're not passing a Map object at all. You're just passing a JSON object. — Roberto Zvjerković, Jul 17 '18 at 13:39
is `show.theaterMap` an actual Map? it looks like a regular json object. Maps should print like this in the console: `Map(1) {2 => "b"}` — DavidZ, Jul 17 '18 at 14:20
it's a map in my Nodejs server. i guess i raised another question. is it possible to send a map via http request from server side (nodejs) to frontend side (angular 6)? — codingnighter2000, Jul 17 '18 at 16:36

Akj · Answer 1 · 2018-07-17T14:36:34.063

0

There is no native map to the Object object.

Object.keys(this.map)

will return an array of keys.

try to access as this.takenSeatsMap.4-4

edited Jul 17 '18 at 14:36

answered Jul 17 '18 at 13:25

Akj

7,038
3
28
40

Why would you initialize an input? Use types... `@Input() takenSeatsMap: Map` – Roberto Zvjerković Jul 17 '18 at 13:33
see whether @Input() takenSeatsMap: Map works it will give you 'Generic type 'Map' requires 2 type argument(s)' – Akj Jul 17 '18 at 13:34
this.takenSeatsMap.4-4 will result in error as this will be accessing number property on an object, instead if object key is '4-4' (should be string otherwise it will be evaluated as 0), so try accessing it as this.takenSeatsMap['4-4'], this will result in desired result. – Abhishek Kumar Jul 18 '18 at 06:00

How can i pass a Map in angular 2+ from html template to custom directive?

1 Answers1