Creating component in place of clicked event

Question

Im trying to do with angular something similiar to google maps. So I have a background image/map and I'd like to create object/component in place of the map where user clicked with mouse.

Right now I'm getting the x/y values. But I'm not sure what to do after click event.

getCoordinates(event): Coordinates {
    let offsetLeft = document.getElementById("drawing").offsetWidth;
    let offsetTop = document.getElementById("drawing").offsetHeight;
    let x = event.pageX - (document.getElementById("drawing").offsetLeft);
    let y = event.pageY - (document.getElementById("drawing").offsetTop);
    console.log("zoom " + this.zoom);
    console.log("x " + x / this.zoom);
    console.log("y " + y / this.zoom);
    console.log("element " + offsetLeft);
    console.log("element " + offsetTop);
    return new Coordinates(x,y);
  }

Ideally I'd like to generate a small popup in place where user clicked with form to fill.

score 2 · Accepted Answer · edited Sep 16 '17 at 11:20

2

Pass the coordinates info to the created component

<my-component *ngFor="let cmp of components" [info]="cmp"></my-component>

export class ParentComponent {
  components:Coordinates[] = [];

  getCoordinates(event): Coordinates {
    let offsetLeft = document.getElementById("drawing").offsetWidth;
    let offsetTop = document.getElementById("drawing").offsetHeight;
    let x = event.pageX - (document.getElementById("drawing").offsetLeft);
    let y = event.pageY - (document.getElementById("drawing").offsetTop);

    this.components.push(new Coordinates(x,y));
  }
}

make the component position itself

export class MyComponent {
  @Input() info:Coordinates;

  @HostBinding('style.left.px')
  get left() { return this.info.left; }

  @HostBinding('style.top.px')
  get top() { return this.info.top; }
}

Plunker Example

If you want to add different kind of components, you can extend above approach using ideas from Angular 2 dynamic tabs with user-click chosen components

edited Sep 16 '17 at 11:20

yurzui

205,937
32
433
399

answered Sep 16 '17 at 10:58

Günter Zöchbauer

623,577
216
2,003
1,567

Is it good practice to use Javascript something like getElementById in Angular2? – RGS Sep 18 '17 at 04:47
1

Not sure what you mean exactly. In general or somehow related to this question? Typescript and Angular bindings are translated to JS, sou you can't avoid JS. Do you mean JS instead of TypeScript or using JS libs like jQuery? – Günter Zöchbauer Sep 18 '17 at 04:50
Yes. What I mean is that instead of using JavaScript in Angular2, we can use TypeScript with Angular2 something like ElementRef, ViewChild. My peers told that try to avoid plain JavaScript usage in Angular2 something like querySelectorAll. You have used document.getElementById in your answer that is why I have asked the doubt. – RGS Sep 18 '17 at 05:38
1

Yes, it's usualky a good idea to avoid imperative DOM manipulation and instead manipulate data structures and let directives and bindings do the DOM manipulation. If you want to use server side rendering or web worker fetures it's even mandatory. There are some situations where it's unavoidable. How often depends on the kind of application you are building. – Günter Zöchbauer Sep 18 '17 at 05:42

Creating component in place of clicked event

1 Answers1