Hello!
I am trying to implement a location into my ionic notes app. The problem is that my location won’t be changed when I am pressing the location button.
TypeScript:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NoteService } from '../../providers/note-service/note-service';
import { Note } from '../../models/note.model';
import {FormGroup, Validators, FormControl} from '@angular/forms';
import { Geolocation } from '@ionic-native/geolocation';
@IonicPage()
@Component({
selector: 'page-add-note',
templateUrl: 'add-note.html',
})
export class AddNotePage {
formGroup: FormGroup;
note: Note;
date: Date = new Date();
title: string = '';
content: string = '';
lat: number = 0;
lng: number = 0;
constructor(public navCtrl: NavController,
private NoteService: NoteService, public geo: Geolocation) {
this.formGroup = new FormGroup({
title: new FormControl(),
content: new FormControl(),
date: new FormControl(),
})
}
saveNote(note: Note){
this.NoteService.saveNote(note);
this.navCtrl.pop();
}
onLocateUser(){
console.log('succcccces33233');
this.geo.getCurrentPosition().then(pos => {
console.log(this.lat);
this.lat = pos.coords.latitude;
this.lng = pos.coords.longitude;
}).catch( err => console.log(err));
}
}
HTML:
<ion-header>
<ion-navbar>
<ion-title>Add Note</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup] = "formGroup" (ngSubmit)="saveNote(formGroup.value)">
<ion-item>
<ion-label>Date</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" name="date" formControlName="date"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Title</ion-label>
<ion-input type="text" name="title" formControlName="title" required></ion-input>
<div class="alert" *ngIf="!formGroup.controls['title'].valid && formGroup.controls['title'].touched">{{ titleAlert }}</div>
</ion-item>
<ion-item>
<ion-label>Note</ion-label>
<ion-input type="text" name="content" formControlName="content" required></ion-input>
<div class="alert" *ngIf="!formGroup.controls['content'].valid && formGroup.controls['content'].touched">{{ contentAlert }}</div>
</ion-item>
<button ion-button type="submit" [disabled]="!formGroup.valid">Save Note</button>
</form>
<button ion-button (click)="onLocateUser()">Locate me</button>
<p>Location: {{ lat }}</p>
</ion-content>
The problem is that I only get the location the first time when I add a new note. After that it won’t work. What am I doing wrong?
Thank you for your help!