CODEWITHSUNDEEP
typescriptangular
Sireini
Sireini

Reputation: 4262

Angular 2 how do I pass data from an component to an service with inputs?

First of all I have an interface which looks like this:

 export interface OverlayViewOptions {
   position: LatLng|LatLngLiteral;
   map?: GoogleMap;
   draggable?: boolean;
   objectId?: string;
}

I do get the position passed by Inputs, now I want to pass the objectId

Here the Class where I need the data:

 export class OverlayViewBla {
      public latlng : any;
      overlayView: any;

  constructor(options: any, google: any) {
    console.log(options);


    var self = this;
    this.overlayView.draw = function() {
      var div = this.div;

      if (!div) {

        div.innerHTML = '<span class="number-id">9</span>';

    }
  }

  getOverlayView() : any {
      return this.overlayView;
    }
}

And the directive google-map-overlay-view.ts:

@Directive({
  selector: 'sebm-google-map-overlay-view',
  inputs: ['latitude', 'longitude', 'objectId'],
  outputs: ['markerClick', 'dragEnd']
})
export class SebmGoogleMapOverlayView implements OnDestroy,
    OnChanges, AfterContentInit {

  latitude: number;

  longitude: number;

  objectId: string;

Here is the createOverlayView in file named google-maps-api-wrapper.ts:

  createOverlayView(options: mapTypes.MarkerOptions = <mapTypes.MarkerOptions>{}):
    Promise<mapTypes.OverlayView> {
      return this._map.then((map: mapTypes.GoogleMap) => {
         console.log('options');
         var overlay = new mapTypes.OverlayViewBla(options, google);
         var overlayView = overlay.getOverlayView();
         overlayView.setMap(map);

         return overlayView;
    }
  );
}

And here the addOverlayView method in file named overlay-view-manager.ts

export class OverlayViewManager {
  addOverlayView(overlayView: SebmGoogleMapOverlayView) {
     console.log(overlayView.idObject,'test'); // where this is undefined
      const overlayViewPromise = this._mapsWrapper.createOverlayView({
      position: {lat: overlayView.latitude, lng: overlayView.longitude},

    });

    this._overlayViews.set(overlayView, overlayViewPromise);
  }

and the html template where objectId needs to be the id input:

<sebm-google-map-overlay-view *ngFor="let location of locations" [latitude]="location.lat" [longitude]="location.lng" [objectId]="location.id"></sebm-google-map-overlay-view>

and the app.component.ts:

locations: marker[] = [
{id: '1',  lat: 51.5239935252832,    lng:  5.137663903579778,   content: 'Kids Jungalow (5p)'},
  ]

How do I pass the id like I pass the lat and long

Upvotes: 1

Views: 360

Answers (1)

yurzui
yurzui

Reputation: 214047

I don't know where exactly you went wrong. Probably here in google-maps-api-wrapper.ts:

createOverlayView(options: mapTypes.MarkerOptions = <mapTypes.MarkerOptions>{}):

Should be OverlayViewOptions instead of MarkerOptions.

Moreover i created the plunkr for you https://plnkr.co/edit/5RhqdjzjKhYzqvjvDj4p?p=preview

Hope it helps!

Upvotes: 1

Related Questions