I'm feeling a bit lost here ... I need to implement the feature that allows users to edit the name of an element by simply clicking on a button. These elements are all stored in the Storage system. How can I achieve this in my current setup?
File: home.html
<ion-list>
<ion-item *ngFor="let place of places ; let i = index" (click)="onOpenPlace(place)">
<p class="list_geo"> {{ place.title }}</p>
<ion-buttons end>
<button ion-button color="danger" (click)="deletePlace(i)">Delete</button>
<!-- ************* EDIT ****** does not work ************* -->
<button ion-button class="button button-positive" (click)="showEditModalPlace(i)"><ion-icon name="create"></ion-
icon>_Edit</button>
<!-- ************* EDIT ****** does not work ************* -->
</ion-buttons>
</ion-item>
File: home.ts
import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';
import { ModalController, NavController } from 'ionic-angular';
import { NewPlacePage } from "../new-place/new-place";
import { PlacePage } from "../place/place";
import { PlacesService } from "../../services/places.service";
import { Place } from "../../model/place.model";
import { EditPlacePage } from '../edit-place/edit-place';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
// places: {title: string}[] = [];
private places: Place[] = [];
constructor(
private storage: Storage,
public navCtrl: NavController,
private placesService: PlacesService,
private modalCtrl: ModalController) {
}
ionViewWillEnter() {
this.placesService.getPlaces()
.then(
(places) => this.places = places
);
}
<!-- ************* EDIT ****** does not work ************* -->
// Modal window EditPlacePage
showEditModalPlace(i) {
console.log(i);
this.modalCtrl.create(EditPlacePage).present();
}
<!-- ************* EDIT ****** does not work ************* -->
}
File: edit-place.html
<form (submit)="UpdatePlace(f.value)" #f="ngForm">
<ion-item>
<ion-label>Edit</ion-label>
<ion-input type="text" name="activetitle" [(ngModel)]="activetitle" required (change)="placeChange(i)"></ion-input>
</ion-item>
<button ion-button block type="submit" [disabled]="!f.valid">Edit Place</button>
</form>
File: edit-place.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';
import { Place } from "../../model/place.model";
import { PlacesService } from "../../services/places.service";
import { Router, ActivatedRouter, Params} from '@angular/router';
@IonicPage()
@Component({
selector: 'page-edit-place',
templateUrl: 'edit-place.html',
})
export class EditPlacePage {
private places: Place[] = [];
activetitle: string;
constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl: ViewController, private placesService: PlacesService) {
}
/***************************** EDIT **********************/
}