<ion-header>
    <ion-navbar>
      <ion-buttons right>
        <button (click)="addItem()" ion-button >
          aggiungi
        </button>
      </ion-buttons>
      <ion-title>Gestione libri</ion-title>
      <ion-buttons left>
        <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar>
  </ion-header>

  <ion-content padding>
    <ion-grid>
      <ion-row>
          <ion-col *ngFor="let libro of libri; let i =index;" >
            <div>
              <ion-card-header><h1>{{libro.title}}</h1></ion-card-header>
              <ion-card-header><h3>Autore:{{libro.author}}</h3></ion-card-header>
              <ion-card-header><h4>Anno:{{libro.year}}</h4></ion-card-header>
              <div id="immagine">
                <img src="../assets/{{libro.imageLink}}">
            </div>
              <button ion-button (click)="modifyItem(libro)" color="">Modify</button>
              <button ion-button (click)="remove(i);" color="danger" >Rimuovi</button>
              <button ion-button color="{{libro.prenotato ? 'danger' : 'secondary'}}">Status</button>
            </div>

          </ion-col>
      </ion-row>
  </ion-grid>

  </ion-content>

import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams} from 'ionic-angular';
    import { ModicaAggiungi } from '../../pages/interactionpage/interactionpage';
    import { libriClient } from '../../models/modello';
    import { ProviderServizio } from '../../providers/libriprovider/libriprovider';
    import { SplashScreen } from '@ionic-native/splash-screen';
    import { HttpClient } from '@angular/common/http';



    @IonicPage()
    @Component({
      selector: 'page-special',
      templateUrl: 'special.html',
    })
    export class SpecialPage {
      toggoleShowHide: boolean;
      hideMe: boolean;
      libri: libriClient[] = [];


      constructor(splashScreen: SplashScreen, private libroProvider: ProviderServizio, public navCtrl: NavController, public navParams: NavParams,public http: HttpClient) {
      //   this.libroProvider .getdelloggetto().subscribe(libri => {
      //     this.libri = libri
      //   console.log(libri)
      // });

      this.toggoleShowHide = true;

      this.libroProvider.loadData().subscribe(res=>{
        this.libri=res;
        console.log(this.libri)
      })

      }


      modificaItem(libro: libriClient) {
        this.navCtrl.push(ModicaAggiungi, {selector: 'modifica', libro: libro} );
      }
      itemClicked(){
        this.toggoleShowHide = !this.toggoleShowHide;
      }
      addItem(){
        this.navCtrl.push(ModicaAggiungi, {selector: 'Aggiungi'});
      }

      onButtonClick(libro: libriClient){
        this.libroProvider.removeItem(libro.id);
      }
      remove(no){
        (this.libri).splice(no,1);
      }
    }

<ion-header>
      <ion-navbar>
            <ion-title>{{selector}}</ion-title>
          </ion-navbar>

        </ion-header>


        <ion-content padding>

          <form (ngSubmit)="selector === 'modifica' ? modificaEff() : aggLibro()">
            <ion-item>
              <ion-label>Titolo</ion-label>
              <ion-input type="text" [(ngModel)]="libro.title" name="titolo"></ion-input>
            </ion-item>


            <ion-item>
                <ion-label>Autore</ion-label>
                <ion-input type="text" [(ngModel)]="libro.author" name="autore"></ion-input>
        </ion-item>


            <ion-item>
              <ion-label>Anno</ion-label>
              <ion-input type="number" min="0" max="2018" [(ngModel)]="libro.year" name="data"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label>Prenotato</ion-label>
              <ion-toggle [(ngModel)]="libro.prenotato" name="siono"></ion-toggle>
            </ion-item>

            <button ion-button type="submit" >Aggiungi / Modifica L'oggetto</button>

          </form>
          </ion-content>

import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { libriClient } from "../../models/modello";
    import { HomePage } from '../home/home';
    import { ProviderServizio } from '../../providers/libriprovider/libriprovider';
    import { SpecialPage } from '../special/special';
    import { Observable } from 'rxjs/Observable';
    import { HttpClient } from '@angular/common/http';



    @IonicPage()
    @Component({
      selector: 'page-interactionpage',
      templateUrl: 'interactionpage.html',
    })
    export class ModicaAggiungi {

    selector: string;
    libro: libriClient;



      constructor(private libroProvider: ProviderServizio,public http: HttpClient, public navCtrl: NavController, public navParams: NavParams) {
        this.selector = this.navParams.get('selector');
        this.selector === 'modifica' ? this.modificatore() : this.creatore();
      }
      loadData(){
        let data:Observable<any>;
        data = this.http.get("assets/books.json");
        data.subscribe(result => {
          this.libro = result;
        })

      }

      creatore(){
        this.libro = new libriClient;
        this.libro.year = new Date().toISOString();
      }

      modificatore(){
        this.libro = this.navParams.get('libro');
      }


      modificaEff(){
        alert('modificato');
        this.navCtrl.push(SpecialPage);
      }


      aggLibro(){
        alert('aggiunto');
        this.libroProvider.addItem(this.libro);
        this.navCtrl.push(SpecialPage);
      }

    }

import { Injectable } from '@angular/core';
      import { libriClient } from '../../models/modello';
      import { Observable } from 'rxjs/Observable';
      import { of } from 'rxjs/observable/of';
      import { Component } from '@angular/core';
      import { IonicPage, NavController, NavParams,Platform, ModalController } from 'ionic-angular';
      import { ModicaAggiungi } from '../../pages/interactionpage/interactionpage';
      import { SplashScreen } from '@ionic-native/splash-screen';
      import { HttpClient } from '@angular/common/http';



      @Injectable()


      export class ProviderServizio {
        libri: libriClient[] = [];
        title:string;
        author:string;
        date: string = new Date().toISOString();
        constructor(splashScreen: SplashScreen,public http: HttpClient, private modal: ModalController) {

          this.loadData();


        }
        loadData() : Observable<any>{
          return this.http.get("assets/books.json")

      }




        chiamata(){

        }
        getdellibro(id: number): Observable<libriClient> {
          return of(this.libri.find(libro => libro.id === id));
        }


        getdelloggetto(): Observable<libriClient[]> {
          return of(this.libri);

        }




        addItem(libro: libriClient): void {
          this.libri.push(libro);
        }


        removeItem(id: number): void{
          this.libri.forEach((item, index) => {
            if(item.id === id) this.libri.splice(index,1);
          });
          alert('rimosso');
        }
      }