CODEWITHSUNDEEP
angulartypescriptionic4
Abbas Jafari
Abbas Jafari

Reputation: 1641

@Output and eventEmitter in ionic?

I work on google map and firebase database and I want to save my location in firebase database and I want to transfer data with @Output and eventEmitter, pickedLocation has value this.locationPick deosn't get value Please help me.

@Component({
  selector: 'app-location-picker',
  templateUrl: './location-picker.component.html',
  styleUrls: ['./location-picker.component.scss'],
})
export class LocationPickerComponent implements OnInit {
  @Output() public locationPick = new EventEmitter<PlaceLocation>();
  isLoading = false;
  selectedLocationImage: string;
  place: Place[];

  constructor(private modalCtrl: ModalController, private http: HttpClient) { }

  ngOnInit() {}

  onPickLocation() {
    this.modalCtrl.create({component: MapModalComponent}).then(modalEl => {
      modalEl.onDidDismiss().then(modalData => {
        if (!modalData.data) {
          return;
        }
        const pickedLocation: PlaceLocation = {
          lat: modalData.data.lat,
          lng: modalData.data.lng,
          address: null,
          staticMapImageUrl: null
        };
        this.isLoading = true;
        this.getAddress(modalData.data.lat, modalData.data.lng)
        .pipe(switchMap(address => {
          pickedLocation.address = address;
          return of(this.getMapImage(pickedLocation.lat, pickedLocation.lng, 14));
        })).subscribe(staticMapImageUrl => {
          pickedLocation.staticMapImageUrl = staticMapImageUrl;
          this.selectedLocationImage = staticMapImageUrl;
          this.isLoading = false;
          this.locationPick.emit(pickedLocation);
          console.log(pickedLocation);
        });
      });
      modalEl.present();
    });
  }

  private getAddress(lat: number, lng: number) {
    return this.http
    .get<any>(
      `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${environment.googleMapsAPIKey}`
      )
      .pipe(
        map(geoData => {
          if (!geoData || !geoData.results || geoData.results.length === 0) {
            return null;
          }
          return geoData.results[0].formatted_address;
      }));
  }

  private getMapImage(lat: number, lng: number, zoom: number) {
    return `https://maps.googleapis.com/maps/api/staticmap?center=${lat},${lng}&zoom=${zoom}&size=500x300&maptype=roadmap
    &markers=color:red%7Clabel:Place%7C${lat},${lng}
    &key=${environment.googleMapsAPIKey}`;
  }
}

the console.log(pickedLocation); has url but console.log(this.locationPick); says 

    EventEmitter {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
closed: false
hasError: false
isStopped: false
observers: [Subscriber]
thrownError: null
__isAsync: false
_isScalar: false
__proto__: Subject

Upvotes: 0

Views: 4318

Answers (1)

anymeshsingh
anymeshsingh

Reputation: 271

Add the following code in the HTML file of the Parent component of LocationPickerComponent:

<app-location-picker (locationPick)="locationPicked($event)"></app-location-picker>

Also, receive the value in the parent component's TS file as:

locationPicked(value) {
  console.log(value)
}

To know about different ways to share data between components in Angular read the following article

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

Upvotes: 1

Related Questions