Jerga99

class ImageSnippet {
  constructor(public src: string, public file: File) {}
}

@Component({
  selector: 'bwm-image-upload',
  templateUrl: 'image-upload.component.html',
  styleUrls: ['image-upload.component.scss']
})

Jerga99

class ImageSnippet {
  constructor(public src: string, public file: File) {}
}

@Component({
  selector: 'bwm-image-upload',
  templateUrl: 'image-upload.component.html',
  styleUrls: ['image-upload.component.scss']
})
export class ImageUploadComponent {

Jerga99

export class ImageService {

  constructor(private http: Http) {}


  public uploadImage(image: File): Observable<Response> {
    const formData = new FormData();

    formData.append('image', image);

Jerga99

class ImageSnippet {
  pending: boolean = false;
  status: string = 'init';

  constructor(public src: string, public file: File) {}
}

@Component({
  selector: 'bwm-image-upload',
  templateUrl: 'image-upload.component.html',

Jerga99

<label class="image-upload-container btn btn-bwm">
  <span>Select Image</span>
  <input #imageInput
         type="file"
         accept="image/*"
         (change)="processFile(imageInput)">
</label>

Jerga99

<label class="image-upload-container btn btn-bwm">
  <span>Select Image</span>
  <input #imageInput
         type="file"
         accept="image/*"
         (change)="processFile(imageInput)">
</label>

Jerga99

input {
  display: none;
}

.image-upload-container {
  cursor: pointer;
}

.img-preview-container {

Jerga99

import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { CommonModule } from '@angular/common';

import { MapComponent } from './map.component';
import { MapService } from './map.service';

@NgModule({
  declarations: [
    MapComponent

Jerga99

private geocodeLocation(location: string): Observable<any> {
  if (!this.geoCoder) this.geoCoder = new (<any>window).google.maps.Geocoder();
	
  return new Observable((observer) => {
    this.geoCoder.geocode({address: location}, (result, status) => {
      if (status === 'OK') {
	      
      const geometry = result[0].geometry.location;
      const coordinates = {lat: geometry.lat(), lng: geometry.lng()};
          

Jerga99

<agm-map
  (mapReady)="mapReadyHandler()"
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="13">
  <agm-circle *ngIf="lat && lng"
   [latitude]="lat"
   [longitude]="lng"
   [radius]="800"
   [fillColor]="'#F44336'"