Arhiva Mobile - Stranica 10 od 18

Uvod u Ionic 3

Iako sam do sada objavio dosta blog postova vezanih uz razvoj hibridnih mobilnih aplikacija koristeći Ionic 3 ipak sam propustio objaviti jedan blog post koji će poslužiti kao uvod u sve te blog postove jednako kao što sam to učinio za Ionic 1 tj. Ionic 2.

Postavljanje razvojne okoline

Kako bi uopće mogli pokrenuti novi Ionic 3 projekt potrebno je zadovoljiti nekoliko preduvjeta.

Potrebno je instalirati:

Node.js LTS
Ionic i Cordova CLI pomoću naredbe: $ npm install -g cordova ionic
TypeScript pomoću naredbe: $ npm install -g typescript

Gore navedeno potrebno vam je za razvoj Android, iOS i Windows Phone hibridnih mobilnih aplikacija. Jedina razlika s kojom se možete susresti je način instalacije jer na Windows baziranom računalu možete razvijati samo Android i Windows Phone aplikacije, dok vam je za iOS potreban Mac.

Prije nego krenete dalje provjerite jeste li sve ranije navedeno uspješno instalirali. To možete učiniti pomoću naredbi:

$ node -v
$ cordova –v
$ ionic –v

Pokretanje Ionic 3 projekta

Ako ste sve ranije navedeno uspješno instalirali već sada možete kreirati novi Ionic 3 projekt.

$ ionic start Ionic3Project

1	$ ionic start Ionic3Project

Prilikom toga sučelje će vas pitati koji početni predložak želite koristiti za svoj projekt.

Kao što možete vidjeti u animaciji iznad u ponudi je nekoliko predložaka:

tabs: $ ionic start Ionic3Projekt tabs
blank: $ ionic start Ionic3Projekt blank
sidemenu: $ ionic start Ionic3Projekt sidemenu
super: $ ionic start Ionic3Projekt super
conference: $ ionic start Ionic3Projekt conference
tutorial: $ ionic start Ionic3Projekt tutorial
aws: $ ionic start Ionic3Projekt aws

Svaki od sljedećih vrsta predložaka tj. projekata sastoji se od nekoliko važnih dijelova:

config.xml – konfiguracijska datoteka koja sadržava naziv aplikacije i popis datoteka od kojih se Ionic 3 aplikacija sastoji.
src – mapa u kojoj se nalaze datoteke s kojima ćete najviše raditi. Sve stranice, komponente, servise i ostalo kreirat ćete i uređivati ovdje.
platforms – mapa u kojoj se nalaze datoteke koje omogućavaju postavljanje Ionic 3 aplikacije na Android, iOS i Windows Phone uređaje
node_modules – npm paketi navedeni u package.json nalaze se u ovoj mapi.
plugins – mjesto gdje se nalaze svi dodaci kojima ćete proširiti mogućnosti Ionic 3 aplikacije
resources – sadržava ikone i početni ekran (splash screens) za dodane platforme

– Ionic tabs

$ ionic start Ionic3Tabs tabs
$ cd Ionic3Tabs
$ ionic serve

$ ionic start Ionic3Tabs tabs

$ cd Ionic3Tabs

$ ionic serve

– Ionic blank

$ ionic start Ionic3Blank blank
$ cd Ionic3Blank
$ ionic serve

$ ionic start Ionic3Blank blank

$ cd Ionic3Blank

$ ionic serve

– Ionic sidemenu

$ ionic start Ionic3Sidemenu sidemenu
$ cd Ionic3Sidemenu
$ ionic serve

$ ionic start Ionic3Sidemenu sidemenu

$ cd Ionic3Sidemenu

$ ionic serve

– Ionic super

$ ionic start Ionic3Super super
$ cd Ionic3Super
$ ionic serve

$ ionic start Ionic3Super super

$ cd Ionic3Super

$ ionic serve

– Ionic conference

$ ionic start Ionic3Conference conference
$ cd Ionic3Conference
$ ionic serve

$ ionic start Ionic3Conference conference

$ cd Ionic3Conference

$ ionic serve

– Ionic tutorial

$ ionic start Ionic3Tutorial tutorial
$ cd Ionic3Tutorial
$ ionic serve

$ ionic start Ionic3Tutorial tutorial

$ cd Ionic3Tutorial

$ ionic serve

– Ionic aws

$ ionic start Ionic3Aws aws
$ cd Ionic3Aws
$ ionic serve

$ ionic start Ionic3Aws aws

$ cd Ionic3Aws

$ ionic serve

Kako bi uspješno mogli pokrenuti Ionic 3 AWS projekt potrebno je zadovoljiti nekoliko preduvjeta koji nadilaze ovaj blog post tako da ću o tome više nekom drugom prilikom.

Pokretnje aplikacije na mobilnom uređaju

Kako bi Ionic 3 aplikaciju mogli pokrenuti na Android $ ionic run android tj. na iOS $ ionic run ios uređaju trebate dodati i pripadajuće platforme, a to možete učiniti pomoću sljedećih naredbi:

$ionic platform add android
$ionic platform add ios

1 2	$ionic platform add android $ionic platform add ios

P.S. iOS platformu možete dodati isključivo na Mac-u.

Zaključak

Kao što možete vidjeti sve ranije navedeno ne razlikuje se puno od Ionica 2 s tom razlikom što kod Ionica 3 poboljšan Ionic CLI, možete birati između više početnih predložaka i što se Ionic Native pluginovi instaliraju na drugačiji način uz dodatak podrške za Lazy Loading.

Ionic 3 – Korištenje, napredne, reaktivne forme

Objavio sam već nekoliko blog postova u kojima sam koristio obične, template-driven, forme dok ću u ovom blog postu pokazati primjer korištenja reaktivne forme tzv. reactive forms.

Postavljanje aplikacije

Za početak je potrebno kreirati novu Ionic aplikaciju.

$ ionic start Ionic3ReaktivnaForma blank
$ cd Ionic3ReaktivnaForma

1 2	$ ionic start Ionic3ReaktivnaForma blank $ cd Ionic3ReaktivnaForma

S obzirom da ćemo ovdje koristiti reaktivne forme u module moramo dodati ReactiveFormsModule. To ćemo učiniti na način da u app.module.ts dodamo import { ReactiveFormsModule } from '@angular/forms'; .

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

ReactiveFormsModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Kreiranje reaktivne forme

Sada smo spremni za kreiranje reaktivne forme na stranici home.html tj. home.ts.

Forma će se sastojati od tri polja (korisničko ime, e-mail i lozinka). Sada možemo kreirati izgled reaktivne forme.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Reaktivna forma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <form [formGroup]="korisnik" (ngSubmit)="posaljiPodatke(korisnik)">
<ion-list>
   <ion-item>
     <ion-label stacked>Korisničko ime</ion-label>
     <ion-input type="text" formControlName="korisnicko_ime"></ion-input>
   </ion-item>
    <ion-item>
     <ion-label stacked>E-mail</ion-label>
     <ion-input type="text" formControlName="email"></ion-input>
   </ion-item>
     <ion-item>
     <ion-label stacked>Lozinka</ion-label>
     <ion-input type="text" formControlName="lozinka"></ion-input>
   </ion-item>
</ion-list>
  <button ion-button full type="submit">Spremi</button>
  </form>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Reaktivna forma

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label stacked>Korisničko ime</ion-label>

<ion-input type="text" formControlName="korisnicko_ime"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>E-mail</ion-label>

<ion-input type="text" formControlName="email"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>Lozinka</ion-label>

<ion-input type="text" formControlName="lozinka"></ion-input>

</ion-item>

</ion-list>

<button ion-button full type="submit">Spremi</button>

</form>

</ion-content>

Logika će se nalaziti unutar home.ts. Ovdje imamo objekt korisnik i funkciju posaljiPodatke(korisnik){};.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;

  constructor(public _navCtrl: NavController) {
     this.korisnik = new FormGroup({
      korisnicko_ime: new FormControl(''),
      email: new FormControl(''),
      lozinka: new FormControl('')
    });
  }

  posaljiPodatke(korisnik){
    console.log(korisnik);
    console.log(korisnik._value);
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

constructor(public _navCtrl: NavController) {

this.korisnik = new FormGroup({

korisnicko_ime: new FormControl(''),

email: new FormControl(''),

lozinka: new FormControl('')

});

}

posaljiPodatke(korisnik){

console.log(korisnik);

console.log(korisnik._value);

}

Ako sada pokrenemo aplikaciju dobit ćemo sljedeće

Iako se ovo još uvijek puno ne razlikuje od primjera formi koje smo koristili u prijašnjim blog postovima ipak se kreće u smjeru onoga što s reaktivnim formama možemo i želimo postići. Više o tome u nastavku.

Napredne mogućnosti (FormBuilder)

Kako bi unutar naše forme kasnije mogli koristiti napredne mogućnosti dodatno ćemo prilagoditi logiku unutar home.ts datoteke na način da ćemo dodati FormBuilder klasu. Ako sada pokrenemo aplikaciju rezultat će biti isti kao na slici iznad.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: [''],
      email: [''],
      lozinka: ['']
    });
  }

  posaljiPodatke(korisnik){
    console.log(korisnik);
    console.log(korisnik._value);
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: [''],

email: [''],

lozinka: ['']

});

}

posaljiPodatke(korisnik){

console.log(korisnik);

console.log(korisnik._value);

}

Proširivanje mogućnosti forme (FormArray)

Dodatna funkcionalnost naše forme stižu u obliku FormArray klase.

FormArray is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormGroup.

Sada ćemo proširiti funkcionalnost naše forme iz primjera iznad na način da ćemo dodati mogućnost unosa adrese i kućnog broja. Posebno zanimljiva će biti mogućnost dodavanja više adresa unutar iste forme tj. kreiranje niza adresa.

Unutar postojećeg objekta korisnik dodajemo niz adrese. Također, dodajemo i funkcije za dodavanje nove adrese dodajAdresu(); tj. brisanje adrese obrisiAdresu(i);.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: [''],
      email: [''],
      lozinka: [''],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });
  }

  dohvatiAdresu(){
    return this._fb.group({
       ulica: [''],
       broj: ['']
    });
  }

  dodajAdresu(){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.push(this.dohvatiAdresu());
  }

  obrisiAdresu(i:number){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.removeAt(i);
  }

  posaljiPodatke(korisnik){
    console.log(korisnik._value);
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: [''],

email: [''],

lozinka: [''],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

}

dohvatiAdresu(){

return this._fb.group({

ulica: [''],

broj: ['']

});

}

dodajAdresu(){

const control = <FormArray>this.korisnik.controls['adrese'];

control.push(this.dohvatiAdresu());

}

obrisiAdresu(i:number){

const control = <FormArray>this.korisnik.controls['adrese'];

control.removeAt(i);

}

posaljiPodatke(korisnik){

console.log(korisnik._value);

}

Prema tome i izgled forme smo morali prilagoditi. Ovdje nikako se smijemo zaboraviti dodati type="button" za gumbe za dodavanje i brisanje adrese jer ćemo u suprotnom dobiti vrlo zanimljive nuspojave, a to ne želimo.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Reaktivna forma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <form [formGroup]="korisnik" (ngSubmit)="posaljiPodatke(korisnik)">
<ion-list>
   <ion-item>
     <ion-label stacked>Korisničko ime</ion-label>
     <ion-input type="text" formControlName="korisnicko_ime"></ion-input>
   </ion-item>
    <ion-item>
     <ion-label stacked>E-mail</ion-label>
     <ion-input type="text" formControlName="email"></ion-input>
   </ion-item>
     <ion-item>
     <ion-label stacked>Lozinka</ion-label>
     <ion-input type="text" formControlName="lozinka"></ion-input>
   </ion-item>

   <ion-list formArrayName="adrese" no-lines>
     <div *ngFor="let adresa of korisnik.controls.adrese.controls; let i=index">
       <div [formGroupName]="i">
         <ion-item>
           <ion-label stacked>Adresa {{i + 1}}</ion-label>
           <ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>
           <ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>
         </ion-item>
          <div text-center>
          <button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>
          </div>
       </div>
     </div>
      <div text-center>
      <button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>
       </div>
   </ion-list>

</ion-list>
  <button ion-button full type="submit">Spremi</button>
  </form>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Reaktivna forma

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label stacked>Korisničko ime</ion-label>

<ion-input type="text" formControlName="korisnicko_ime"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>E-mail</ion-label>

<ion-input type="text" formControlName="email"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>Lozinka</ion-label>

<ion-input type="text" formControlName="lozinka"></ion-input>

</ion-item>

<ion-list formArrayName="adrese" no-lines>

<ion-item>

<ion-label stacked>Adresa {{i + 1}}</ion-label>

<ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>

<ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>

</ion-item>

<button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>

</div>

<button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>

</div>

</ion-list>

<button ion-button full type="submit">Spremi</button>

</form>

</ion-content>

Ako sada pokrenemo aplikaciju forma će izgledati ovako

Validacija forme

U našoj trenutnoj formi možemo u bilo koje polje unijeti bilo koju vrijednost jer nemamo nikakvu vrstu provjere tih vrijednosti. Sada ćemo to omogućiti koristeći Validators klasu.

Korisničko ime mora biti duže od 3 znaka, email mora imati ispravan oblik tj. mora sadržavati znak ‘@’, a lozinka ne smije biti duža od 9 znakova.

U našoj komponenti to izgleda ovako:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;
  changeLog: string[] = [];

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      lozinka: ['', [Validators.required, Validators.maxLength(9)]],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });
  }

  dohvatiAdresu(){
    return this._fb.group({
       ulica: [''],
       broj: ['']
    });
  }

  dodajAdresu(){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.push(this.dohvatiAdresu());
  }

  obrisiAdresu(i:number){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.removeAt(i);
  }

  posaljiPodatke(korisnik){
    console.log(korisnik._status);
    console.log(korisnik._value);
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

changeLog: string[] = [];

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],

email: ['', [Validators.required, Validators.email]],

lozinka: ['', [Validators.required, Validators.maxLength(9)]],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

}

dohvatiAdresu(){

return this._fb.group({

ulica: [''],

broj: ['']

});

}

dodajAdresu(){

const control = <FormArray>this.korisnik.controls['adrese'];

control.push(this.dohvatiAdresu());

}

obrisiAdresu(i:number){

const control = <FormArray>this.korisnik.controls['adrese'];

control.removeAt(i);

}

posaljiPodatke(korisnik){

console.log(korisnik._status);

console.log(korisnik._value);

}

Dok forma nije validna korisnik ne smije imati mogućnost slanja podataka tj. mora mu se onemogućiti klik na gumb za slanje/spremanje podatka [disabled]="korisnik.invalid".

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Reaktivna forma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <form [formGroup]="korisnik" (ngSubmit)="posaljiPodatke(korisnik)">
<ion-list>
   <ion-item>
     <ion-label stacked>Korisničko ime</ion-label>
     <ion-input type="text" formControlName="korisnicko_ime"></ion-input>
   </ion-item>
    <ion-item *ngIf="korisnik.controls.korisnicko_ime.invalid && korisnik.controls.korisnicko_ime.dirty" no-lines>
      <p>Korisničko ime treba biti duže od 3 znaka!</p>
    </ion-item>
    <ion-item>
     <ion-label stacked>E-mail</ion-label>
     <ion-input type="text" formControlName="email"></ion-input>
   </ion-item>
    <ion-item *ngIf="korisnik.controls.email.invalid && korisnik.controls.email.dirty" no-lines>
      <p>E-mail nije ispravan!</p>
    </ion-item>
     <ion-item>
     <ion-label stacked>Lozinka</ion-label>
     <ion-input type="password" formControlName="lozinka"></ion-input>
   </ion-item>
      <ion-item *ngIf="korisnik.controls.lozinka.invalid && korisnik.controls.lozinka.dirty" no-lines>
      <p>Lozinka ne može biti duža od 9 znakova!</p>
      </ion-item>

   <ion-list formArrayName="adrese" no-lines>
     <div *ngFor="let adresa of korisnik.controls.adrese.controls; let i=index">
       <div [formGroupName]="i">
         <ion-item>
           <ion-label stacked>Adresa {{i + 1}}</ion-label>
           <ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>
           <ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>
         </ion-item>
          <div text-center>
          <button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>
          </div>
       </div>
     </div>
      <div text-center>
      <button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>
       </div>
   </ion-list>

</ion-list>
  <button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>
  </form>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Reaktivna forma

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label stacked>Korisničko ime</ion-label>

<ion-input type="text" formControlName="korisnicko_ime"></ion-input>

</ion-item>

<ion-item *ngIf="korisnik.controls.korisnicko_ime.invalid && korisnik.controls.korisnicko_ime.dirty" no-lines>

<p>Korisničko ime treba biti duže od 3 znaka!</p>

</ion-item>

<ion-item>

<ion-label stacked>E-mail</ion-label>

<ion-input type="text" formControlName="email"></ion-input>

</ion-item>

<ion-item *ngIf="korisnik.controls.email.invalid && korisnik.controls.email.dirty" no-lines>

<p>E-mail nije ispravan!</p>

</ion-item>

<ion-item>

<ion-label stacked>Lozinka</ion-label>

<ion-input type="password" formControlName="lozinka"></ion-input>

</ion-item>

<ion-item *ngIf="korisnik.controls.lozinka.invalid && korisnik.controls.lozinka.dirty" no-lines>

<p>Lozinka ne može biti duža od 9 znakova!</p>

</ion-item>

<ion-list formArrayName="adrese" no-lines>

<ion-item>

<ion-label stacked>Adresa {{i + 1}}</ion-label>

<ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>

<ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>

</ion-item>

<button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>

</div>

<button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>

</div>

</ion-list>

<button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>

</form>

</ion-content>

Forma sada izgleda ovako

Kreiranje prilagođenog validatora

Ovisno o potrebama moguće je napraviti i prilagođene validatore. Npr. ako pogledate validator za e-mail adresu iz gornjeg primjera možete vidjeti da on dopušta unos e-mail adrese sa nastavkom (.com) koji ima više od 3 znaka. Zato ćemo mi sada napraviti prilagođeni validator koji će takvu adresu označiti kao neispravnu.

Unutar mape Ionic3ReaktivnaForma\src\ kreirati ćemo novu mapu \validators\ sa datotekom email.ts

import { FormControl } from '@angular/forms';

export class EmailValidator {
    static isValid(control: FormControl){
        const res = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(control.value);

        if (res) {
            return null;
        }

        return {'invalidEmail': true};
    }
}

import { FormControl } from '@angular/forms';

export class EmailValidator {

static isValid(control: FormControl){

const res = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(control.value);

if (res) {

return null;

}

return {'invalidEmail': true};

}

Prema tome možemo prilagoditi i home.ts datoteku

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

import { EmailValidator } from './../../validators/email';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;
  changeLog: string[] = [];

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [EmailValidator.isValid]],
      lozinka: ['', [Validators.required, Validators.maxLength(9)]],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });

  }

...

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

import { EmailValidator } from './../../validators/email';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

changeLog: string[] = [];

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],

email: ['', [EmailValidator.isValid]],

lozinka: ['', [Validators.required, Validators.maxLength(9)]],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

}

...

Validacija e-mail polja sada izgleda ovako

Bonus – provjera tijekom unosa

Još jedna od mogućnosti koju možete koristiti je i provjera unešenih podataka u polje forme u trenutku unosa. U ovom ćemo primjeru provjeravati samo polje koje se tiče unosa korisničkog imena.

...
 constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [EmailValidator.isValid]],
      lozinka: ['', [Validators.required, Validators.maxLength(9)]],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });

    const nameControl = this.korisnik.get('korisnicko_ime');
    nameControl.valueChanges.forEach(
      (value: string) => this.changeLog.push(value)
    );

  }
...

...

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],

email: ['', [EmailValidator.isValid]],

lozinka: ['', [Validators.required, Validators.maxLength(9)]],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

const nameControl = this.korisnik.get('korisnicko_ime');

nameControl.valueChanges.forEach(

(value: string) => this.changeLog.push(value)

);

}

...

Na formi ćemo to prikazati na sljedeći način:

...
</ion-list>
  <button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>
  </form>

<div *ngFor="let ime of changeLog">{{ ime }}</div>

</ion-content>

...

</ion-list>

<button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>

</form>

</ion-content>

Na kraju to izgleda ovako:

Zaključak

Ovisno o potrebama koristiti ćete reactive ili template-driven forme. Ne postoji bolje ili lošije rješenje jer sve ovisi što vam u kojem trenutku treba.

Ako trebate napraviti jednostavniju tj. manju formu možete bez problema koristiti template-driven formu. To su forme koje sadržavaju [(ngModel)]="objekt".

Kada počnete raditi veće i kompleksnije forme svakako se prebacite na reactive forme. Jednostavnije ih je održavati i testirati plus što se sva logika nalazi na jednom mjestu.

Ionic 3 i Highcharts – prikaz grafikona

U ovom ću blog postu pokazati kako na jednostavan način prikazati napredne grafikone unutar Ionic 3 aplikacije koristeći Highcharts.

Više o Highchartsu možete pronaći u njihovoj službenoj dokumentaciji https://www.highcharts.com/docs

Postavljanje aplikacije

Za početak je potrebno kreirati novi Ionic projekt

$ ionic start Ionic3Highcharts blank
$ cd Ionic3Highcharts

1 2	$ ionic start Ionic3Highcharts blank $ cd Ionic3Highcharts

Highcharts implementacija

Highcharts ćemo u naš Ionic 3 projekt dodati koristeći naredbu:

$ npm install highcharts --save

1	$ npm install highcharts --save

I spremni smo za korištenje.

Datoteka home.html sada će izgledati ovako

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Highcharts
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
 
 <div id="container" style="display: block;"></div>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Highcharts

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

</ion-content>

A datoteka home.ts će izgledati ovako

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import * as Highcharts from 'highcharts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor() {
  }

  ionViewDidLoad(){

    var myChart = Highcharts.chart('container', {
          chart: {
          type: 'bar'
          },
          title: {
          text: 'Fruit Consumption'
          },
          xAxis: {
          categories: ['Apples', 'Bananas', 'Oranges']
          },
          yAxis: {
          title: {
          text: 'Fruit eaten'
          }
          },
          series: [{
          name: 'Jane',
          data: [1, 0, 4]
          }, {
          name: 'John',
          data: [5, 7, 3]
          }]
    });

  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import * as Highcharts from 'highcharts';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor() {

}

ionViewDidLoad(){

var myChart = Highcharts.chart('container', {

chart: {

type: 'bar'

title: {

text: 'Fruit Consumption'

xAxis: {

categories: ['Apples', 'Bananas', 'Oranges']

yAxis: {

title: {

text: 'Fruit eaten'

}

series: [{

data: [1, 0, 4]

}, {

data: [5, 7, 3]

}]

});

}

Možete primijetiti jednu stvar koja im je zajednička, a to je id="container".

Također, funkcija ionViewDidLoad(); brine se da se naš grafikon prikaže tek kada je stranice home.html tj. home.ts u potpunosti učitana, a spada pod Lifecycle events.

Lifecycle events are fired during various stages of navigation. They can be defined in any component type which is pushed/popped from a NavController.

I na kraju to izgleda ovako:

Ako želite prikaz nekog drugog grafikona dovoljno je promijeniti parametar type iz npr. type: 'bar' u npr. type: 'line' kako bi dobili sljedeće:

Prikaz dinamičkih vrijednosti

U gornjem primjeru koristimo fiksne podatke za prikaz grafikona, ali to ne mora biti slučaj i u vašoj aplikaciji. Naravno da možete koristiti API koji će vam dati dinamičke vrijednosti za prikaz.

Kako bi to bilo moguće prvo je potrebno kreirati servis za API tj. ApiProvider. U ovom ću primjeru također koristiti https://restcountries.eu/ API.

$ ionic generate provider ApiProvider

1	$ ionic generate provider ApiProvider

Sadržaj izgleda ovako:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
 
@Injectable()
export class ApiProvider {
 
  constructor(public _http: Http) {
    console.log('Hello ApiProvider Provider');
  }

  getData(){
    return this._http.get('https://restcountries.eu/rest/v2/all')
      .map(res => res.json())
      //Uzimam samo 10 vrijednosti iz API-ja
      .map(res => res.slice(56,66));
  }
 
}

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class ApiProvider {

constructor(public _http: Http) {

console.log('Hello ApiProvider Provider');

}

getData(){

return this._http.get('https://restcountries.eu/rest/v2/all')

.map(res => res.json())

//Uzimam samo 10 vrijednosti iz API-ja

.map(res => res.slice(56,66));

}

Datoteka home.html ostaje u istom obliku, ali zato home.ts sada izgleda ovako:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import * as Highcharts from 'highcharts';

import { ApiProvider } from "../../providers/api/api";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [ApiProvider]
})
export class HomePage {

  countryOptions:any;
  data:any;

  constructor(public _apiProvider: ApiProvider) {
  }

  getCountries(){
    this._apiProvider.getData().subscribe(res => {
     this.countryOptions = res;
     console.log(this.countryOptions);
 
          let myCountries = [];
            if(this.countryOptions.length > 0) {
                for(let i = 0; i < this.countryOptions.length; i++) {
                    myCountries.push(
                       this.countryOptions[i].name
                    );
                }
            }  

            let myPopulation = [];
            if(this.countryOptions.length > 0) {
                for(let i = 0; i < this.countryOptions.length; i++) {
                    myPopulation.push(
                       this.countryOptions[i].population
                    );
                }
            }  
 
         this.data = this.showHighchart(myCountries,myPopulation);
    
    });
  } 

   ionViewDidLoad(){

    this.getCountries();

  }


    showHighchart(myCountries,myPopulation){

      console.log(myCountries);
      console.log(myPopulation);

       Highcharts.chart('container', {
          chart: {
          type: 'bar'
          },
          title: {
          text: 'Country population'
          },
          xAxis: {
          categories: myCountries
          },
          yAxis: {
          title: {
          text: 'Population'
          }
          },
          series: [{
          name: 'Population',
          data: myPopulation
          }]
    });

    }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import * as Highcharts from 'highcharts';

import { ApiProvider } from "../../providers/api/api";

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [ApiProvider]

})

export class HomePage {

countryOptions:any;

data:any;

constructor(public _apiProvider: ApiProvider) {

}

getCountries(){

this._apiProvider.getData().subscribe(res => {

this.countryOptions = res;

console.log(this.countryOptions);

let myCountries = [];

if(this.countryOptions.length > 0) {

for(let i = 0; i < this.countryOptions.length; i++) {

myCountries.push(

this.countryOptions[i].name

);

}

let myPopulation = [];

if(this.countryOptions.length > 0) {

for(let i = 0; i < this.countryOptions.length; i++) {

myPopulation.push(

this.countryOptions[i].population

);

}

this.data = this.showHighchart(myCountries,myPopulation);

});

}

ionViewDidLoad(){

this.getCountries();

}

showHighchart(myCountries,myPopulation){

console.log(myCountries);

console.log(myPopulation);

Highcharts.chart('container', {

chart: {

type: 'bar'

title: {

text: 'Country population'

xAxis: {

categories: myCountries

yAxis: {

title: {

text: 'Population'

}

series: [{

data: myPopulation

}]

});

}

Aplikacija sada izgleda ovako:

Zaključak

Kao što ste mogli vidjeti iz ranije navedenih primjera korištenje Highchartsa unutar Ionic 3 aplikacije je vrlo jednostavno.

Ionic 3 – select, search i autocomplete komponenta

Iako sam već objavio blog post na temu Ionic 3 autocomplete funkcionalnosti mislim da će vam se primjer iz ovog blog posta još više svidjeti. Cijela se funkcionalnost temelji na proširivanju mogućnosti već postojeće Ionic Select komponente.

Postavljanje aplikacije

Za početak je potrebno kreirati novi Ionic projekt

$ ionic start Ionic3SelectSearchAutocomplete blank
$ cd Ionic3SelectSearchAutocomplete

1 2	$ ionic start Ionic3SelectSearchAutocomplete blank $ cd Ionic3SelectSearchAutocomplete

Izrada select komponente

Komponentu možete kreirati sljedećom naredbom:

$ ionic generate component select-search

1	$ ionic generate component select-search

Struktura datoteka sada izgleda ovako:

--src
 - app
 - assets
 - components
  - select-search
   - select-search-module.ts
   - select-search-page.html
   - select-search-page.scss
   - select-search-page.ts
   - select-search.html
   - select-search.scss
   - select-search.ts
 - pages
 - theme
 - ...

--src

- app

- assets

- components

- select-search

- select-search-module.ts

- select-search-page.html

- select-search-page.scss

- select-search-page.ts

- select-search.html

- select-search.scss

- select-search.ts

- pages

- theme

- ...

Sadržaj datoteka možete vidjeti u nastavku.

select-search-module.ts

Ovdje definiramo modul koji će Ionic aplikaciji reći od čega se sastoji naša Ionic komponenta te kako ju aplikacija prilikom pokretanja treba interpretirati.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SelectSearch } from './select-search';
import { SelectSearchPage } from './select-search-page';

@NgModule({
    declarations: [
        SelectSearch,
        SelectSearchPage
    ],
    imports: [
        IonicPageModule.forChild(SelectSearch),
        IonicPageModule.forChild(SelectSearchPage)
    ],
    exports: [
        SelectSearch,
        SelectSearchPage
    ],
    entryComponents: [
        SelectSearch,
        SelectSearchPage
    ]
})
export class SelectSearchModule { }

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { SelectSearch } from './select-search';

import { SelectSearchPage } from './select-search-page';

@NgModule({

declarations: [

SelectSearch,

SelectSearchPage

imports: [

IonicPageModule.forChild(SelectSearch),

IonicPageModule.forChild(SelectSearchPage)

exports: [

SelectSearch,

SelectSearchPage

entryComponents: [

SelectSearch,

SelectSearchPage

]

})

export class SelectSearchModule { }

select-search-page.html

<ion-header>
    <ion-navbar>
        <ion-title>{{selectComponent.title}}</ion-title>
    </ion-navbar>
    <ion-toolbar *ngIf="selectComponent.canSearch">
        <ion-searchbar
            #searchbarComponent
            [(ngModel)]="selectComponent.filterText"
            (ionInput)="filterItems()"
            [placeholder]="selectComponent.searchPlaceholder || 'Search'">
        </ion-searchbar>
    </ion-toolbar>
</ion-header>
<ion-content>
    <div class="select-search-spinner" *ngIf="selectComponent.isSearching">
        <div class="select-search-spinner-background"></div>
        <ion-spinner></ion-spinner>
    </div>
    <ion-list no-margin *ngIf="filteredItems.length">
        <button ion-item detail-none *ngFor="let item of filteredItems" (click)="select(item)">
            <ion-icon
                [name]="isItemSelected(item) ? 'checkmark-circle' : 'radio-button-off'"
                [color]="isItemSelected(item) ? 'primary' : 'daek'"
                item-left>
            </ion-icon>
            <h2>{{selectComponent.formatItem(item)}}</h2>
        </button>
    </ion-list>
    <div *ngIf="!filteredItems.length" margin>No items found.</div>
</ion-content>
<ion-footer *ngIf="selectComponent.canReset || selectComponent.multiple">
    <ion-toolbar padding>
        <ion-row>
            <ion-col no-padding *ngIf="selectComponent.canReset"
                [attr.col-6]="selectComponent.canReset && selectComponent.multiple ? '' : null"
                [attr.col-12]="selectComponent.canReset && !selectComponent.multiple ? '' : null">
                <button ion-button full no-margin (click)="reset()" [disabled]="!selectedItems.length">
                    Clear
                </button>
            </ion-col>
            <ion-col no-padding *ngIf="selectComponent.multiple"
                [attr.col-6]="selectComponent.canReset && selectComponent.multiple ? '' : null"
                [attr.col-12]="!selectComponent.canReset && selectComponent.multiple ? '' : null">
                <button ion-button full no-margin (click)="ok()">
                    OK
                </button>
            </ion-col>
        </ion-row>
    </ion-toolbar>
</ion-footer>

<ion-header>

<ion-navbar>

<ion-title>{{selectComponent.title}}</ion-title>

</ion-navbar>

<ion-toolbar *ngIf="selectComponent.canSearch">

<ion-searchbar

#searchbarComponent

[(ngModel)]="selectComponent.filterText"

(ionInput)="filterItems()"

[placeholder]="selectComponent.searchPlaceholder || 'Search'">

</ion-searchbar>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-spinner></ion-spinner>

</div>

<ion-list no-margin *ngIf="filteredItems.length">

<ion-icon

[name]="isItemSelected(item) ? 'checkmark-circle' : 'radio-button-off'"

[color]="isItemSelected(item) ? 'primary' : 'daek'"

item-left>

</ion-icon>

<h2>{{selectComponent.formatItem(item)}}</h2>

</button>

</ion-list>

<div *ngIf="!filteredItems.length" margin>No items found.</div>

</ion-content>

<ion-footer *ngIf="selectComponent.canReset || selectComponent.multiple">

<ion-toolbar padding>

<ion-row>

<ion-col no-padding *ngIf="selectComponent.canReset"

[attr.col-6]="selectComponent.canReset && selectComponent.multiple ? '' : null"

[attr.col-12]="selectComponent.canReset && !selectComponent.multiple ? '' : null">

Clear

</button>

</ion-col>

<ion-col no-padding *ngIf="selectComponent.multiple"

[attr.col-6]="selectComponent.canReset && selectComponent.multiple ? '' : null"

[attr.col-12]="!selectComponent.canReset && selectComponent.multiple ? '' : null">

</button>

</ion-col>

</ion-row>

</ion-toolbar>

</ion-footer>

select-search-page.scss

.select-search-page {
    &.select-search-page-can-reset.select-search-page-multiple {
        .footer .col:first-child {
            padding-right: $content-margin / 2;
        }
        
        .footer .col:last-child {
            padding-left: $content-margin / 2;
        }
    }
}

.select-search-page {

&.select-search-page-can-reset.select-search-page-multiple {

.footer .col:first-child {

padding-right: $content-margin / 2;

}

.footer .col:last-child {

padding-left: $content-margin / 2;

}

select-search-page.ts

import { Component, ViewChild } from '@angular/core';
import { NavParams, NavController, Searchbar } from 'ionic-angular';
import { SelectSearch } from './select-search';

@Component({
    selector: 'select-search-page',
    templateUrl: 'select-search-page.html',
    host: {
        'class': 'select-search-page',
        '[class.select-search-page-can-reset]': 'selectComponent.canReset',
        '[class.select-search-page-multiple]': 'selectComponent.multiple'
    }
})
export class SelectSearchPage {
    selectComponent: SelectSearch;
    filteredItems: any[];
    selectedItems: any[] = [];
    navController: NavController;
    @ViewChild('searchbarComponent') searchbarComponent: Searchbar;

    constructor(private navParams: NavParams) {
        this.selectComponent = navParams.get('selectComponent');
        this.navController = navParams.get('navController');
        this.filteredItems = this.selectComponent.items;
        this.filterItems();

        if (this.selectComponent.value) {
            if (this.selectComponent.multiple) {
                this.selectComponent.value.forEach(item => {
                    this.selectedItems.push(item);
                });
            } else {
                this.selectedItems.push(this.selectComponent.value);
            }
        }
    }

    ngAfterViewInit() {
        if (this.searchbarComponent) {
            // Focus after a delay because focus doesn't work without it.
            setTimeout(() => {
                this.searchbarComponent.setFocus();
            }, 1000);
        }
    }

    isItemSelected(item: any) {
        return this.selectedItems.find(selectedItem => {
            if (this.selectComponent.itemValueField) {
                return item[this.selectComponent.itemValueField] === selectedItem[this.selectComponent.itemValueField];
            }

            return item === selectedItem;
        }) !== undefined;
    }

    deleteSelectedItem(item: any) {
        let itemToDeleteIndex;

        this.selectedItems.forEach((selectedItem, itemIndex) => {
            if (this.selectComponent.itemValueField) {
                if (item[this.selectComponent.itemValueField] === selectedItem[this.selectComponent.itemValueField]) {
                    itemToDeleteIndex = itemIndex;
                }
            } else if (item === selectedItem) {
                itemToDeleteIndex = itemIndex;
            }
        });

        this.selectedItems.splice(itemToDeleteIndex, 1);
    }

    addSelectedItem(item: any) {
        this.selectedItems.push(item);
    }

    select(item: any) {
        if (this.selectComponent.multiple) {
            if (this.isItemSelected(item)) {
                this.deleteSelectedItem(item);
            } else {
                this.addSelectedItem(item);
            }
        } else {
            if (!this.isItemSelected(item)) {
                this.selectedItems = [];
                this.addSelectedItem(item);
                this.selectComponent.select(item);
            }

            this.close();
        }
    }

    ok() {
        this.selectComponent.select(this.selectedItems.length ? this.selectedItems : null);
        this.close();
    }

    close() {
        // Focused input interferes with the animation.
        // Blur it first, wait a bit and then close the page.
        if (this.searchbarComponent) {
            this.searchbarComponent._fireBlur();
        }

        setTimeout(() => {
            this.navController.pop();

            if (!this.selectComponent.hasSearchEvent) {
                this.selectComponent.filterText = '';
            }
        });
    }

    reset() {
        this.navController.pop();
        this.selectComponent.reset();
    }

    filterItems() {
        if (this.selectComponent.hasSearchEvent) {
            if (this.selectComponent.isNullOrWhiteSpace(this.selectComponent.filterText)) {
                this.selectComponent.items = [];
            } else {
                // Delegate filtering to the event.
                this.selectComponent.emitSearch();
            }
        } else {
            // Default filtering.
            if (!this.selectComponent.filterText || !this.selectComponent.filterText.trim()) {
                this.filteredItems = this.selectComponent.items;
                return;
            }

            let filterText = this.selectComponent.filterText.trim().toLowerCase();

            this.filteredItems = this.selectComponent.items.filter(item => {
                return item[this.selectComponent.itemTextField].toLowerCase().indexOf(filterText) !== -1;
            });
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

import { Component, ViewChild } from '@angular/core';

import { NavParams, NavController, Searchbar } from 'ionic-angular';

import { SelectSearch } from './select-search';

@Component({

selector: 'select-search-page',

templateUrl: 'select-search-page.html',

host: {

'class': 'select-search-page',

'[class.select-search-page-can-reset]': 'selectComponent.canReset',

'[class.select-search-page-multiple]': 'selectComponent.multiple'

}

})

export class SelectSearchPage {

selectComponent: SelectSearch;

filteredItems: any[];

selectedItems: any[] = [];

navController: NavController;

@ViewChild('searchbarComponent') searchbarComponent: Searchbar;

constructor(private navParams: NavParams) {

this.selectComponent = navParams.get('selectComponent');

this.navController = navParams.get('navController');

this.filteredItems = this.selectComponent.items;

this.filterItems();

if (this.selectComponent.value) {

if (this.selectComponent.multiple) {

this.selectComponent.value.forEach(item => {

this.selectedItems.push(item);

});

} else {

this.selectedItems.push(this.selectComponent.value);

}

ngAfterViewInit() {

if (this.searchbarComponent) {

// Focus after a delay because focus doesn't work without it.

setTimeout(() => {

this.searchbarComponent.setFocus();

}, 1000);

}

isItemSelected(item: any) {

return this.selectedItems.find(selectedItem => {

if (this.selectComponent.itemValueField) {

return item[this.selectComponent.itemValueField] === selectedItem[this.selectComponent.itemValueField];

}

return item === selectedItem;

}) !== undefined;

}

deleteSelectedItem(item: any) {

let itemToDeleteIndex;

this.selectedItems.forEach((selectedItem, itemIndex) => {

if (this.selectComponent.itemValueField) {

if (item[this.selectComponent.itemValueField] === selectedItem[this.selectComponent.itemValueField]) {

itemToDeleteIndex = itemIndex;

}

} else if (item === selectedItem) {

itemToDeleteIndex = itemIndex;

}

});

this.selectedItems.splice(itemToDeleteIndex, 1);

}

addSelectedItem(item: any) {

this.selectedItems.push(item);

}

select(item: any) {

if (this.selectComponent.multiple) {

if (this.isItemSelected(item)) {

this.deleteSelectedItem(item);

} else {

this.addSelectedItem(item);

}

} else {

if (!this.isItemSelected(item)) {

this.selectedItems = [];

this.addSelectedItem(item);

this.selectComponent.select(item);

}

this.close();

}

ok() {

this.selectComponent.select(this.selectedItems.length ? this.selectedItems : null);

this.close();

}

close() {

// Focused input interferes with the animation.

// Blur it first, wait a bit and then close the page.

if (this.searchbarComponent) {

this.searchbarComponent._fireBlur();

}

setTimeout(() => {

this.navController.pop();

if (!this.selectComponent.hasSearchEvent) {

this.selectComponent.filterText = '';

}

});

}

reset() {

this.navController.pop();

this.selectComponent.reset();

}

filterItems() {

if (this.selectComponent.hasSearchEvent) {

if (this.selectComponent.isNullOrWhiteSpace(this.selectComponent.filterText)) {

this.selectComponent.items = [];

} else {

// Delegate filtering to the event.

this.selectComponent.emitSearch();

}

} else {

// Default filtering.

if (!this.selectComponent.filterText || !this.selectComponent.filterText.trim()) {

this.filteredItems = this.selectComponent.items;

return;

}

let filterText = this.selectComponent.filterText.trim().toLowerCase();

this.filteredItems = this.selectComponent.items.filter(item => {

return item[this.selectComponent.itemTextField].toLowerCase().indexOf(filterText) !== -1;

});

}

select-search.html

<div class="select-search-label">{{title}}</div>
<div class="select-search-value">{{formatValue()}}</div>
<div class="select-search-icon">
    <div class="select-search-icon-inner"></div>
</div>
<button aria-haspopup="true" ion-button="item-cover" class="item-cover"></button>

<div class="select-search-label">{{title}}</div>

<div class="select-search-value">{{formatValue()}}</div>

</div>

select-search.scss

.item-select-search {
    .label {
        margin-right: 0;
    }
}

.select-search {
    display: flex;

    &-label {
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    &-value {
        max-width: 45%;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    &-icon {
        position: relative;
        width: 20px;
    }

    &-icon-inner {
        position: absolute;
        top: 50%;
        left: 5px;
        border-top: 5px solid;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        pointer-events: none;
    }

    &-ios {
        .select-search-icon {
            height: 18px;
        }

        .select-search-icon-inner {
            margin-top: -2px;
            color: $select-ios-icon-color;
        }

        .select-search-value {
            padding-left: $select-ios-padding-left;
        }
    }

    &-md {
        .select-search-icon {
            height: 19px;
        }

        .select-search-icon-inner {
            margin-top: -3px;
            color: $select-md-icon-color;
        }

        .select-search-value {
            padding-left: $select-md-padding-left;
        }

        .select-search-label {
            color: $select-md-placeholder-color;
        }
    }

    &-spinner {
        &-background {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: absolute;
            background-color: #000;
            z-index: 100;
            opacity: 0.05;
        }

        ion-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10;
            margin-top: -14px;
            margin-left: -14px;
        }
    }
}

.item-select-search {

.label {

margin-right: 0;

}

.select-search {

display: flex;

&-label {

flex: 1;

text-overflow: ellipsis;

overflow: hidden;

}

&-value {

max-width: 45%;

text-overflow: ellipsis;

overflow: hidden;

}

&-icon {

position: relative;

width: 20px;

}

&-icon-inner {

position: absolute;

top: 50%;

left: 5px;

border-top: 5px solid;

border-right: 5px solid transparent;

border-left: 5px solid transparent;

pointer-events: none;

}

&-ios {

.select-search-icon {

height: 18px;

}

.select-search-icon-inner {

margin-top: -2px;

color: $select-ios-icon-color;

}

.select-search-value {

padding-left: $select-ios-padding-left;

}

&-md {

.select-search-icon {

height: 19px;

}

.select-search-icon-inner {

margin-top: -3px;

color: $select-md-icon-color;

}

.select-search-value {

padding-left: $select-md-padding-left;

}

.select-search-label {

color: $select-md-placeholder-color;

}

&-spinner {

&-background {

top: 0;

bottom: 0;

left: 0;

right: 0;

position: absolute;

background-color: #000;

z-index: 100;

opacity: 0.05;

}

ion-spinner {

position: absolute;

top: 50%;

left: 50%;

z-index: 10;

margin-top: -14px;

margin-left: -14px;

}

select-search.ts

import { Component, Input, Output, EventEmitter, Optional, OnDestroy, forwardRef, HostListener, OnChanges, SimpleChanges } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { Item, Form, NavController, Platform } from 'ionic-angular';
import { SelectSearchPage } from './select-search-page';

@Component({
    selector: 'select-search',
    templateUrl: 'select-search.html',
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => SelectSearch),
        multi: true
    }],
    host: {
        'class': 'select-search',
        '[class.select-search-ios]': 'isIos',
        '[class.select-search-md]': 'isMd',
        '[class.select-search-can-reset]': 'canReset'
    }
})
export class SelectSearch implements ControlValueAccessor, OnDestroy, OnChanges {
    private _items: any[] = [];
    private isIos: boolean;
    private isMd: boolean;
    filterText = '';
    value: any = null;
    hasSearchEvent: boolean;
    get items(): any[] {
        return this._items;
    }
    @Input('items')
    set items(items: any[]) {
        // The original reference of the array should be preserved to keep two-way data binding working between SelectSearchable and SelectSearchablePage.
        this._items.splice(0, this._items.length);

        // Add new items to the array.
        Array.prototype.push.apply(this._items, items);
    }
    @Input() isSearching: boolean;
    @Input() itemValueField: string;
    @Input() itemTextField: string;
    @Input() canSearch = false;
    @Input() canReset = false;
    @Input() title: string;
    @Input() searchPlaceholder: string = '...';
    @Output() onChange: EventEmitter<any> = new EventEmitter();
    @Output() onSearch: EventEmitter<any> = new EventEmitter();
    @Input() itemTemplate: Function;
    @Input() multiple: boolean;

    constructor(private navController: NavController, private ionForm: Form, private platform: Platform, @Optional() private ionItem: Item) { }

    isNullOrWhiteSpace(value: any): boolean {
        if (value === null || value === undefined) {
            return true;
        }

        // Convert value to string in case if it's not.
        return value.toString().replace(/\s/g, '').length < 1;
    }

    ngOnInit() {
        this.isIos = this.platform.is('ios');
        this.isMd = this.platform.is('android');
        this.hasSearchEvent = this.onSearch.observers.length > 0;
        this.ionForm.register(this);

        if (this.ionItem) {
            this.ionItem.setElementClass('item-select-search', true);
        }
    }

    initFocus() { }

    @HostListener('click', ['$event'])
    _click(event: UIEvent) {
        if (event.detail === 0) {
            // Don't continue if the click event came from a form submit.
            return;
        }

        event.preventDefault();
        event.stopPropagation();
        this.open();
    }

    select(selectedItem: any) {
        this.value = selectedItem;
        this.emitChange();
    }

    emitChange() {
        this.propagateChange(this.value);
        this.onChange.emit({
            component: this,
            value: this.value
        });
    }

    emitSearch() {
        this.onSearch.emit({
            component: this,
            text: this.filterText
        });
    }

    open() {
        this.navController.push(SelectSearchPage, {
            selectComponent: this,
            navController: this.navController
        });
    }

    reset() {
        this.setValue(null);
        this.emitChange();
    }

    formatItem(value: any): string {
        if (this.itemTemplate) {
            return this.itemTemplate(value);
        }

        return value ? value[this.itemTextField] : null;
    }

    formatValue(): string {
        if (!this.value) {
            return null;
        }

        if (this.multiple) {
            return this.value.map(item => this.formatItem(item)).join(', ');
        } else {
            return this.formatItem(this.value);
        }
    }

    private propagateChange = (_: any) => { }

    writeValue(value: any) {
        this.setValue(value);
    }

    registerOnChange(fn: any): void {
        this.propagateChange = fn;
    }

    registerOnTouched(fn: any) { }

    setDisabledState(isDisabled: boolean) { }

    ngOnDestroy() {
        this.ionForm.deregister(this);
    }

    setValue(value: any) {
        this.value = value;

        // Get an item from the list for value.
        // We need this in case value contains only id, which is not sufficient for template rendering.
        if (this.value && !this.isNullOrWhiteSpace(this.value[this.itemValueField])) {
            let selectedItem = this.items.find(item => {
                return item[this.itemValueField] === this.value[this.itemValueField];
            });

            if (selectedItem) {
                this.value = selectedItem;
            }
        }
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes['items'] && this.items.length > 0) {
            this.setValue(this.value);
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

import { Component, Input, Output, EventEmitter, Optional, OnDestroy, forwardRef, HostListener, OnChanges, SimpleChanges } from '@angular/core';

import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

import { Item, Form, NavController, Platform } from 'ionic-angular';

import { SelectSearchPage } from './select-search-page';

@Component({

selector: 'select-search',

templateUrl: 'select-search.html',

providers: [{

provide: NG_VALUE_ACCESSOR,

useExisting: forwardRef(() => SelectSearch),

multi: true

}],

host: {

'class': 'select-search',

'[class.select-search-ios]': 'isIos',

'[class.select-search-md]': 'isMd',

'[class.select-search-can-reset]': 'canReset'

}

})

export class SelectSearch implements ControlValueAccessor, OnDestroy, OnChanges {

private _items: any[] = [];

private isIos: boolean;

private isMd: boolean;

filterText = '';

value: any = null;

hasSearchEvent: boolean;

get items(): any[] {

return this._items;

}

@Input('items')

set items(items: any[]) {

// The original reference of the array should be preserved to keep two-way data binding working between SelectSearchable and SelectSearchablePage.

this._items.splice(0, this._items.length);

// Add new items to the array.

Array.prototype.push.apply(this._items, items);

}

@Input() isSearching: boolean;

@Input() itemValueField: string;

@Input() itemTextField: string;

@Input() canSearch = false;

@Input() canReset = false;

@Input() title: string;

@Input() searchPlaceholder: string = '...';

@Output() onChange: EventEmitter<any> = new EventEmitter();

@Output() onSearch: EventEmitter<any> = new EventEmitter();

@Input() itemTemplate: Function;

@Input() multiple: boolean;

constructor(private navController: NavController, private ionForm: Form, private platform: Platform, @Optional() private ionItem: Item) { }

isNullOrWhiteSpace(value: any): boolean {

if (value === null || value === undefined) {

return true;

}

// Convert value to string in case if it's not.

return value.toString().replace(/\s/g, '').length < 1;

}

ngOnInit() {

this.isIos = this.platform.is('ios');

this.isMd = this.platform.is('android');

this.hasSearchEvent = this.onSearch.observers.length > 0;

this.ionForm.register(this);

if (this.ionItem) {

this.ionItem.setElementClass('item-select-search', true);

}

initFocus() { }

@HostListener('click', ['$event'])

_click(event: UIEvent) {

if (event.detail === 0) {

// Don't continue if the click event came from a form submit.

return;

}

event.preventDefault();

event.stopPropagation();

this.open();

}

select(selectedItem: any) {

this.value = selectedItem;

this.emitChange();

}

emitChange() {

this.propagateChange(this.value);

this.onChange.emit({

component: this,

value: this.value

});

}

emitSearch() {

this.onSearch.emit({

component: this,

text: this.filterText

});

}

open() {

this.navController.push(SelectSearchPage, {

selectComponent: this,

navController: this.navController

});

}

reset() {

this.setValue(null);

this.emitChange();

}

formatItem(value: any): string {

if (this.itemTemplate) {

return this.itemTemplate(value);

}

return value ? value[this.itemTextField] : null;

}

formatValue(): string {

if (!this.value) {

return null;

}

if (this.multiple) {

return this.value.map(item => this.formatItem(item)).join(', ');

} else {

return this.formatItem(this.value);

}

private propagateChange = (_: any) => { }

writeValue(value: any) {

this.setValue(value);

}

registerOnChange(fn: any): void {

this.propagateChange = fn;

}

registerOnTouched(fn: any) { }

setDisabledState(isDisabled: boolean) { }

ngOnDestroy() {

this.ionForm.deregister(this);

}

setValue(value: any) {

this.value = value;

// Get an item from the list for value.

// We need this in case value contains only id, which is not sufficient for template rendering.

if (this.value && !this.isNullOrWhiteSpace(this.value[this.itemValueField])) {

let selectedItem = this.items.find(item => {

return item[this.itemValueField] === this.value[this.itemValueField];

});

if (selectedItem) {

this.value = selectedItem;

}

ngOnChanges(changes: SimpleChanges) {

if (changes['items'] && this.items.length > 0) {

this.setValue(this.value);

}

Što se komponente tiče gore navedene datoteke su sve što vam treba. Za nešto više posjetite https://github.com/eakoriakin/ionic-select-searchable

Kreiranje klase

Nakon što smo kreirali komponentu možemo kreirati i klasu koja će se nalaziti u posebnoj datoteci. Takva vrsta odvajanja olakšava kasnije održavanje aplikacija.

country.ts

export class Country {
    public id: number;
    public name: string;
    public population: number;
}

export class Country {

public id: number;

public name: string;

public population: number;

}

types.ts

export * from './country';

1	export * from './country';

Struktura datoteka sada izgleda ovako

--src
 - app
 - assets
 - components
  - select-search
   - select-search-module.ts
   - select-search-page.html
   - select-search-page.scss
   - select-search-page.ts
   - select-search.html
   - select-search.scss
   - select-search.ts
 - pages
 - theme
 - types
  - country.ts
  - types.ts
 - ...

--src

- app

- assets

- components

- select-search

- select-search-module.ts

- select-search-page.html

- select-search-page.scss

- select-search-page.ts

- select-search.html

- select-search.scss

- select-search.ts

- pages

- theme

- types

- country.ts

- types.ts

- ...

Korištenje funkcionalnosti

Imamo komponentu, imamo klasu i sada napokon možemo nešto od svega toga konkretno i napraviti. Ako vam sve napravljeno do sada nije bilo poznato možete odahnuti jer se sada fokusiramo na home.ts i home.html datoteke jer ondje ćemo koristiti ranije kreiranu komponentu.

home.ts

import { Component } from '@angular/core';

import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { SelectSearch } from '../../components/select-search/select-search';
import { Country } from '../../types/types';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  countries: Country[];
    country1: Country;
    country2: Country;
    country3: Country;
    country4: Country;
    country5: Country;
    country6: Country;
    country7: Country;
    form: FormGroup;
    country8Control: FormControl;

  constructor(private _formBuilder: FormBuilder) {

    this.countries = this.getCountries();
        this.country2 = this.countries[4];
        this.country7 = this.countries[4];
        this.country8Control = _formBuilder.control(this.countries[4], Validators.required);
        this.form = _formBuilder.group({
            country8: this.country8Control
        });

  }

  getCountries(): Country[] {
        return [
            { id: 0, name: 'Afghanistan', population: 27657145 },
            { id: 1, name: 'Albania', population: 2886026 },
            { id: 2, name: 'Austria', population: 8725931 },
            { id: 3, name: 'Bosnia and Herzegovina', population: 3531159 },
            { id: 4, name: 'Croatia', population: 4190669 },
            { id: 5, name: 'France', population: 66710000 },
            { id: 6, name: 'Hungary', population: 9823000 },
            { id: 7, name: 'Indonesia', population: 258705000 },
            { id: 8, name: 'Liechtenstein', population: 37623 },
            { id: 9, name: 'Mexico', population: 122273473 },
            { id: 10, name: 'San Marino', population: 33005 }
        ];
    }

    searchCountries(event: { component: SelectSearch, text: string }) {
        let text = (event.text || '').trim().toLowerCase();

        if (!text) {
            event.component.items = [];
            return;
        } else if (event.text.length < 3) {
            return;
        }

        event.component.isSearching = true;

        // Simulate AJAX.
        setTimeout(() => {
            event.component.items = this.getCountries().filter(country => {
                return country.name.toLowerCase().indexOf(text) !== -1
            });

            event.component.isSearching = false;
        }, 2000);
    }

    countryTemplate(country: Country) {
        return `${country.name}, ${country.population}`;
    }

    countryChange(event: { component: SelectSearch, value: any }) {
        console.log('value:', event.value);
    }

    reset() {
        this.country8Control.reset();
    }

}

import { Component } from '@angular/core';

import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

import { SelectSearch } from '../../components/select-search/select-search';

import { Country } from '../../types/types';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

countries: Country[];

country1: Country;

country2: Country;

country3: Country;

country4: Country;

country5: Country;

country6: Country;

country7: Country;

form: FormGroup;

country8Control: FormControl;

constructor(private _formBuilder: FormBuilder) {

this.countries = this.getCountries();

this.country2 = this.countries[4];

this.country7 = this.countries[4];

this.country8Control = _formBuilder.control(this.countries[4], Validators.required);

this.form = _formBuilder.group({

country8: this.country8Control

});

}

getCountries(): Country[] {

return [

{ id: 0, name: 'Afghanistan', population: 27657145 },

{ id: 1, name: 'Albania', population: 2886026 },

{ id: 2, name: 'Austria', population: 8725931 },

{ id: 3, name: 'Bosnia and Herzegovina', population: 3531159 },

{ id: 4, name: 'Croatia', population: 4190669 },

{ id: 5, name: 'France', population: 66710000 },

{ id: 6, name: 'Hungary', population: 9823000 },

{ id: 7, name: 'Indonesia', population: 258705000 },

{ id: 8, name: 'Liechtenstein', population: 37623 },

{ id: 9, name: 'Mexico', population: 122273473 },

{ id: 10, name: 'San Marino', population: 33005 }

];

}

searchCountries(event: { component: SelectSearch, text: string }) {

let text = (event.text || '').trim().toLowerCase();

if (!text) {

event.component.items = [];

return;

} else if (event.text.length < 3) {

return;

}

event.component.isSearching = true;

// Simulate AJAX.

setTimeout(() => {

event.component.items = this.getCountries().filter(country => {

return country.name.toLowerCase().indexOf(text) !== -1

});

event.component.isSearching = false;

}, 2000);

}

countryTemplate(country: Country) {

return `${country.name}, ${country.population}`;

}

countryChange(event: { component: SelectSearch, value: any }) {

console.log('value:', event.value);

}

reset() {

this.country8Control.reset();

}

home.html

<ion-header>
    <ion-navbar>
        <ion-title>Ionic: Select, search & autocomplete</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
     <ion-list>
        <ion-list-header>
            Simple Select
        </ion-list-header>
        <ion-item>
            <select-search
                [(ngModel)]="country1"
                title="Country"
                itemValueField="id"
                itemTextField="name"
                [items]="countries"
                (onChange)="countryChange($event)">
            </select-search>
        </ion-item>
    </ion-list> 
     <ion-list>
        <ion-list-header>
            With preselected value
        </ion-list-header>
        <ion-item>
            <select-search
                [(ngModel)]="country2"
                title="Country"
                itemValueField="id"
                itemTextField="name"
                [items]="countries"
                (onChange)="countryChange($event)">
            </select-search>
        </ion-item>
    </ion-list> 
     <ion-list>
        <ion-list-header>
            With Search
        </ion-list-header>
        <ion-item>
            <select-search
                [(ngModel)]="country3"
                title="Country"
                itemValueField="id"
                itemTextField="name"
                [items]="countries"
                [canSearch]="true"
                (onChange)="countryChange($event)">
            </select-search>
        </ion-item>
    </ion-list> 
     <ion-list>
        <ion-list-header>
            With Async Search (AJAX)
        </ion-list-header>
        <ion-item>
            <select-search
                [(ngModel)]="country4"
                title="Country"
                itemValueField="id"
                itemTextField="name"
                [items]="countries"
                [canSearch]="true"
                searchPlaceholder="..."
                (onSearch)="searchCountries($event)"
                (onChange)="countryChange($event)">
            </select-search>
        </ion-item>
    </ion-list> 
     <ion-list>
        <ion-list-header>
            With a custom template for items
        </ion-list-header>
        <ion-item>
            <select-search
                [(ngModel)]="country5"
                title="Country"
                itemValueField="id"
                itemTextField="name"
                [itemTemplate]="countryTemplate"
                [items]="countries"
                [canSearch]="true"
                (onChange)="countryChange($event)">
            </select-search>
        </ion-item>
    </ion-list> 
    <ion-list>
        <ion-list-header>
            Multiple selection
        </ion-list-header>
        <ion-item>
            <select-search
                [(ngModel)]="country6"
                title="Country"
                itemValueField="id"
                itemTextField="name"
                [items]="countries"
                [canSearch]="true"
                [multiple]="true"
                (onChange)="countryChange($event)">
            </select-search>
        </ion-item>
    </ion-list>
    <ion-list>
        <ion-list-header>
            With "Clear" button
        </ion-list-header>
        <ion-item>
            <select-search
                [(ngModel)]="country7"
                title="Country"
                itemValueField="id"
                itemTextField="name"
                [items]="countries"
                (onChange)="countryChange($event)"
                [canReset]="true">
            </select-search>
        </ion-item>
    </ion-list>
    <form [formGroup]="form">
        <ion-list>
            <ion-list-header>
                Using together with Angular 2 Validators
            </ion-list-header>
            <ion-item>
                <select-search
                    formControlName="country8"
                    title="Country"
                    itemValueField="id"
                    itemTextField="name"
                    [items]="countries"
                    [canSearch]="true"
                    (onChange)="countryChange($event)">
                </select-search>
                <button ion-button item-right (click)="reset()" [disabled]="!form.valid">Reset</button>
            </ion-item>
            <ion-item>
                <p>Is valid: {{form.valid}}</p>
            </ion-item>
        </ion-list>
    </form> 
</ion-content>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<ion-header>

<ion-navbar>

<ion-title>Ionic: Select, search & autocomplete</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-list>

<ion-list-header>

Simple Select

</ion-list-header>

<ion-item>

<select-search

[(ngModel)]="country1"

title="Country"

itemValueField="id"

itemTextField="name"

[items]="countries"

(onChange)="countryChange($event)">

</select-search>

</ion-item>

</ion-list>

<ion-list>

<ion-list-header>

With preselected value

</ion-list-header>

<ion-item>

<select-search

[(ngModel)]="country2"

title="Country"

itemValueField="id"

itemTextField="name"

[items]="countries"

(onChange)="countryChange($event)">

</select-search>

</ion-item>

</ion-list>

<ion-list>

<ion-list-header>

With Search

</ion-list-header>

<ion-item>

<select-search

[(ngModel)]="country3"

title="Country"

itemValueField="id"

itemTextField="name"

[items]="countries"

[canSearch]="true"

(onChange)="countryChange($event)">

</select-search>

</ion-item>

</ion-list>

<ion-list>

<ion-list-header>

With Async Search (AJAX)

</ion-list-header>

<ion-item>

<select-search

[(ngModel)]="country4"

title="Country"

itemValueField="id"

itemTextField="name"

[items]="countries"

[canSearch]="true"

searchPlaceholder="..."

(onSearch)="searchCountries($event)"

(onChange)="countryChange($event)">

</select-search>

</ion-item>

</ion-list>

<ion-list>

<ion-list-header>

With a custom template for items

</ion-list-header>

<ion-item>

<select-search

[(ngModel)]="country5"

title="Country"

itemValueField="id"

itemTextField="name"

[itemTemplate]="countryTemplate"

[items]="countries"

[canSearch]="true"

(onChange)="countryChange($event)">

</select-search>

</ion-item>

</ion-list>

<ion-list>

<ion-list-header>

Multiple selection

</ion-list-header>

<ion-item>

<select-search

[(ngModel)]="country6"

title="Country"

itemValueField="id"

itemTextField="name"

[items]="countries"

[canSearch]="true"

[multiple]="true"

(onChange)="countryChange($event)">

</select-search>

</ion-item>

</ion-list>

<ion-list>

<ion-list-header>

With "Clear" button

</ion-list-header>

<ion-item>

<select-search

[(ngModel)]="country7"

title="Country"

itemValueField="id"

itemTextField="name"

[items]="countries"

(onChange)="countryChange($event)"

[canReset]="true">

</select-search>

</ion-item>

</ion-list>

<ion-list>

<ion-list-header>

Using together with Angular 2 Validators

</ion-list-header>

<ion-item>

<select-search

formControlName="country8"

title="Country"

itemValueField="id"

itemTextField="name"

[items]="countries"

[canSearch]="true"

(onChange)="countryChange($event)">

</select-search>

<button ion-button item-right (click)="reset()" [disabled]="!form.valid">Reset</button>

</ion-item>

<ion-item>

<p>Is valid: {{form.valid}}</p>

</ion-item>

</ion-list>

</form>

</ion-content>

Na kraju to izgleda ovako

Prikaz podataka direktno s API-ja

Ovdje ću koristiti https://restcountries.eu/rest/v2/all API. Ovaj sam API koristio u jednom od prethodnih blog postova.

Prvo je potrebno kreirati ApiProvider naredbom:

$ ionic generate provider ApiProvider

1	$ ionic generate provider ApiProvider

Sadržaj izgleda ovako:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ApiProvider {

  constructor(public _http: Http) {
    console.log('Hello ApiProvider Provider');
  }

   loadData(){
    return this._http.get('https://restcountries.eu/rest/v2/all')
      .map(res => res.json());
  }

}

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class ApiProvider {

constructor(public _http: Http) {

console.log('Hello ApiProvider Provider');

}

loadData(){

return this._http.get('https://restcountries.eu/rest/v2/all')

.map(res => res.json());

}

I sada se opet vraćamo datotekama home.html i home.ts koje ću za potrebe ovog primjera pojednostaviti.

<ion-header>
    <ion-navbar>
        <ion-title>Ionic: Select, search & autocomplete</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-list>
        <ion-list-header>
            Multiple selection
        </ion-list-header>
        <ion-item>
            <select-search
                [(ngModel)]="country"
                title="Country"
                itemValueField="population"
                itemTextField="name"
                [items]="countries"
                [canSearch]="true"
                [multiple]="true"
                (onChange)="countryChange($event)">
            </select-search>
        </ion-item>
    </ion-list>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>Ionic: Select, search & autocomplete</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-list>

<ion-list-header>

Multiple selection

</ion-list-header>

<ion-item>

<select-search

[(ngModel)]="country"

title="Country"

itemValueField="population"

itemTextField="name"

[items]="countries"

[canSearch]="true"

[multiple]="true"

(onChange)="countryChange($event)">

</select-search>

</ion-item>

</ion-list>

</ion-content>

Funkcionalnost se sastoji od tri glavna dijela. Prvi dohvaća sve podatke s API-ja, drugi puni novi niz samo sa podacima koje želimo koristiti u aplikaciji i treći se tiče odabira vrijednosti u komponenti na klijentskoj strani.

import { Component } from '@angular/core';

import { SelectSearch } from '../../components/select-search/select-search';
import { Country } from '../../types/types';

import { ApiProvider } from "../../providers/api/api";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [ApiProvider]
})
export class HomePage {

    countries: Country[];
    country: Country;

    countryOptions:any;

  constructor(public _apiProvider: ApiProvider) {

  }

   ionViewDidLoad() {
    this.getCountries();
  }

     getCountries(){
     this._apiProvider.loadData().subscribe(res => {
     this.countryOptions = res;
     console.log(this.countryOptions);

          let myCountries = [];
            if(this.countryOptions.length > 0) {
                for(let i = 0; i < this.countryOptions.length; i++) {
                    myCountries.push({
                        id: this.countryOptions[i].alpha2Code,
                        population: this.countryOptions[i].population,
                        name: this.countryOptions[i].name
                    });
                }
            } 

         this.countries = this.passingFunction(myCountries);
    
    });
  } 

   passingFunction(data:any): Country[]{
    return data
   }

    countryChange(event: { component: SelectSearch, value: any }) {
        console.log('value:', event.value);

        let myCountries = [];
            if(event.value.length > 0) {
                for(let i = 0; i < event.value.length; i++) {
                    myCountries.push({
                        id: event.value[i].id
                    });
                }
            } 

         console.log(myCountries);

    }

}

import { Component } from '@angular/core';

import { SelectSearch } from '../../components/select-search/select-search';

import { Country } from '../../types/types';

import { ApiProvider } from "../../providers/api/api";

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [ApiProvider]

})

export class HomePage {

countries: Country[];

country: Country;

countryOptions:any;

constructor(public _apiProvider: ApiProvider) {

}

ionViewDidLoad() {

this.getCountries();

}

getCountries(){

this._apiProvider.loadData().subscribe(res => {

this.countryOptions = res;

console.log(this.countryOptions);

let myCountries = [];

if(this.countryOptions.length > 0) {

for(let i = 0; i < this.countryOptions.length; i++) {

myCountries.push({

id: this.countryOptions[i].alpha2Code,

population: this.countryOptions[i].population,

});

}

this.countries = this.passingFunction(myCountries);

});

}

passingFunction(data:any): Country[]{

return data

}

countryChange(event: { component: SelectSearch, value: any }) {

console.log('value:', event.value);

let myCountries = [];

if(event.value.length > 0) {

for(let i = 0; i < event.value.length; i++) {

myCountries.push({

id: event.value[i].id

});

}

console.log(myCountries);

}

Funkcija this.getCountries(); dohvaća popis svih država s API-ja. Unutar te funkcije vrtimo petlju kojom odabiremo koje parametre trebamo od API-ja jer ne trebaju nam svi parametri. Znači uzimao samo id, population i name.

 if(this.countryOptions.length > 0) {
                for(let i = 0; i < this.countryOptions.length; i++) {
                    myCountries.push({
                        id: this.countryOptions[i].alpha2Code,
                        population: this.countryOptions[i].population,
                        name: this.countryOptions[i].name
                    });
                }
            }

if(this.countryOptions.length > 0) {

for(let i = 0; i < this.countryOptions.length; i++) {

myCountries.push({

id: this.countryOptions[i].alpha2Code,

population: this.countryOptions[i].population,

});

}

Tako napunjen niz (array) proslijedimo ranije kreiranoj komponenti this.countries = this.passingFunction(myCountries);.

I na kraju kada odaberemo željene vrijednosti opet vrtimo petlju izdvajajući samo id.

let myCountries = [];
            if(event.value.length > 0) {
                for(let i = 0; i < event.value.length; i++) {
                    myCountries.push({
                        id: event.value[i].id
                    });
                }
            }

let myCountries = [];

if(event.value.length > 0) {

for(let i = 0; i < event.value.length; i++) {

myCountries.push({

id: event.value[i].id

});

}

Na kraju to izgleda ovako:

Zaključak

I to je sve. Ova se tema može obraditi na više načina, ali vjerujem da je i ovo dovoljno da dobijete uvid u jedan od načina kako riješiti pitanje Ionic autocomplete funkcionalnosti.

Ionic Framework resursi

Iako sve blog postove koje sam objavio na temu Ionic Frameworka možete pronaći u kategoriji Razvoj odlučio sam objaviti ovaj blog post kako bi dodatno olakšao pronalazak i pregled svih blog postova vezanih upravo uz Ionic Framework.

Ako niste pronašli vama zanimljiv/potreban blog post slobodno ostavite komentar s prijedlogom teme pa ću se potruditi objaviti blog post ili pronaći Ionic Framework resurs koji će vam biti od pomoći.

Ionic Framework 4 resursi

– Angular & Ionic 4 – PayPal mobilno plaćanje
– Ionic 4 & Angular Router – prosljeđivanje parametara
– Ionic 4 PWA – kreiranje aplikacije
– Uber API & Ionic 4 – Ride Request Button
– Ionic 4 Slides – prikaz galerije slika
– Otvaranje postavki mobilnog uređaja iz Ionic aplikacije
– Što je i čemu služi Ionic Native 4.x?
– Ionic geolociranje – dohvaćanje lokacije korisnika
– Kako saznati status napunjenosti baterije unutar Ionic aplikacije
– Ionic + OpenWeatherMap – prikaz vremenske prognoze
– Video pozadina u Ionic aplikaciji
– Uvod u Ionic 4
– Stigao je Ionic 4!

Ionic Framework 3 resursi

– Ionic Card IO – prikupljanje podataka s bankovne kartice
– Ionic 3 – uspostavljanje telefonskog poziva
– Ionic 3 Popover
– Ionic Launch Navigator – otvaranje nativne aplikacije za navigaciju
– Ionic Social Sharing – dijeljenje sadržaja mobilne aplikacije
– Ionic 3 Market
– Ionic 3 Skeleton Screen – stvaranje dojma brzine
– Ionic 3 – Barcode QR skener
– Ionic Range komponenta
– Ionic Insomnia – Nitko nije lud da spava
– Ionic Tabs App – Kako spriječiti da se HomePage učitava prije AppComponent
– Ionic 3 – Searchbar komponenta
– Ionic 3 – kako spriječiti slučajno gašenje aplikacije
– Ionic 3 – Google login/prijava
– Ionic 3 i WordPress REST API – prikaz blog postova
– Ionic 3 – prikaz informacija o SIM kartici
– Ionic 3 – Facebook prijava
– Ionic 3 – Spremanje i slanje podataka kada nema interneta
– Ionic 3 – podrška za vibraciju
– Ažuriranje Ionic Android aplikacije bez Google Storea
– Ionic 3 & Google Maps – prikaz rute između dvije lokacije
– Ionic 3 desktop aplikacija koristeći Electron
– Uvod u Ionic 3
– Ionic 3 – Korištenje, napredne, reaktivne forme
– Ionic 3 i Highcharts – prikaz grafikona
– Ionic 3 – select, search i autocomplete komponenta
– Ionic 3 – Slanje podataka na API
– Ionic 3 – Primjeri najbolje prakse
– Ionic 3 aplikacija za audio i video stream
– Ionic 3 – zatražite od korisnika da ocjeni vašu aplikaciju
– Ionic 3 – Autocomplete polje za unos
– Čemu služi Ionic Native 3.x?
– Ionic 3 – Slanje SMS poruka
– Ionic 3 – Lazy Loading (lijeno učitavanje)
– Ionic 3 – Firebase registracija i prijava
– Ionic 3 – prikaz informacija o uređaju
– Ionic 3 – aplikacija koja govori
– Ionic 3 – Prikaz Google mape
– Kako ubrzati pokretanje Ionic 3 aplikacije?
– Ionic 3 – AdMob monetizacija
– Ionic 2 & 3 – SQLite servis
– Stigao je Ionic 3!

Ionic Framework 2 resursi

– Ionic 2 – SQLite za trajno spremanje podataka
– Ionic 2 – Dodavanje vanjskih skripti
– Ionic 2 – prosljeđivanje parametara između stranica
– Ionic 2 – Events, upravljanje događajima
– Google Drive REST API & Ionic 2 – prikaz podataka
– Ionic 2 – Podrška za višejezičnost
– Ionic 2 – Toast obavijesti
– Ionic 2 – Push notifikacije za Android
– Ionic 2 – provjera povezanosti s mrežom
– Ionic 2 – prikaz JSON-a sa API-ja
– Uvod u Ionic 2

Ionic Framework 1 resursi

– Slanje e-maila iz Ionic mobilne aplikacije pomoću Mailgun APIja
– Ionic aplikacija (ni)je povezana s internetom
– Pokretanje Ionic aplikacije na Android platformi
– Stvaranje novog Ionic projekta
– Ionic Framework – priprema razvojne okoline

Razno

– Kako Ionic aplikaciju ugraditi u postojeće web stranice
– Ionic & Facebook login/prijava
– Razvoj Ionic aplikacija za iOS
– Ionic & Google Firebase login/prijava – Error Code 10
– Ionic – kako odrediti minimalnu verziju Androida
– Ionic aplikacija sa SVG ikonama
– Ionic i Gravatar – prikaz slike profila
– Ionic – RxJS Observable Timer
– DevApp – uživo osvježavanje Ionic aplikacija na više uređaja
– Ionic Deploy – jednostavan i brz način ažuriranja Ionic aplikacije
– Ionic & Crosswalk – podrška za starije verzije Androida
– Ionic – automatska prijava u aplikaciju
– Priprema i objava Ionic aplikacije na Google Play Store
– Ikona i početni zaslon Ionic aplikacije
– Što je i čemu služi ngCordova unutar Ionic aplikacije?
– Što je Ionic View?
– Kako napraviti Apache Cordova Platform update