Tomislav Stanković, Autor na Tomislav Stanković

Ionic Tabs App – HomePage se učitava prije AppComponent

U ovom ću blog postu pokazati kako spriječiti da se AppComponent učitava nakon HomePage.

Kada se kreira nova Ionic aplikacija koristeći tabs predložak kao rootPage odabrana je TabsPage komponenta koja unutar sebe poziva HomePage.

U tom slučaju ako se nekakva logika stavi unutar app.component.ts i onda ovisno o nekom uvjetu učita HomePage ili neka druga stranica

Kreiranje aplikacije

Novu aplikaciju kreiram naredbom

$ ionic start IonicTabaApp tabs
$ cd IonicTabaApp

1 2	$ ionic start IonicTabaApp tabs $ cd IonicTabaApp

I nakon što pokrenem aplikaciju

$ ionic serve

1	$ ionic serve

mogu vidjeti da se HomePage učitala prije AppComponent.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      console.log('AppComponent');
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

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

import { Platform } from 'ionic-angular';

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

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

import { TabsPage } from '../pages/tabs/tabs';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any = TabsPage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

platform.ready().then(() => {

console.log('AppComponent');

// Okay, so the platform is ready and our plugins are available.

// Here you can do any higher level native things you might need.

statusBar.styleDefault();

splashScreen.hide();

});

}

Uzrok tome nalazi se unutar app.component.ts datoteke gdje se definira rootPage. U ovom slučaju to je TabsPage.

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

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {
      console.log('TabsPage');
  }
}

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

import { AboutPage } from '../about/about';

import { ContactPage } from '../contact/contact';

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

@Component({

templateUrl: 'tabs.html'

})

export class TabsPage {

tab1Root = HomePage;

tab2Root = AboutPage;

tab3Root = ContactPage;

constructor() {

console.log('TabsPage');

}

Gore se može vidjeti da TabsPage komponenta kao tab1Root uzima HomePage komponentu i zato se ona učitava prije AppComponent.

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

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

  constructor(public navCtrl: NavController) {
      console.log('HomePage');
  }

}

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController) {

console.log('HomePage');

}

Kako bi se to spriječilo potrebno je napraviti sljedeće:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any;
  
  provjera = 1;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
	   console.log('AppComponent');
	  // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
	  
	  if (this.provjera == 1) {
        this.rootPage = TabsPage;
      } else {
        //
      }
	  
    });
  }
}

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

import { Platform } from 'ionic-angular';

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

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

import { TabsPage } from '../pages/tabs/tabs';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any;

provjera = 1;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

platform.ready().then(() => {

console.log('AppComponent');

// Okay, so the platform is ready and our plugins are available.

// Here you can do any higher level native things you might need.

statusBar.styleDefault();

splashScreen.hide();

if (this.provjera == 1) {

this.rootPage = TabsPage;

} else {

}

});

}

Struktura projekta prema package.json

{
  "name": "IonicTabsApp",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/core": "4.6.0",
    "@ionic-native/splash-screen": "4.6.0",
    "@ionic-native/status-bar": "4.6.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "~2.6.2"
  },
  "description": "Ionic Project - IonicTabsApp"
}

{

"name": "IonicTabsApp",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/animations": "5.2.9",

"@angular/common": "5.2.9",

"@angular/compiler": "5.2.9",

"@angular/compiler-cli": "5.2.9",

"@angular/core": "5.2.9",

"@angular/forms": "5.2.9",

"@angular/http": "5.2.9",

"@angular/platform-browser": "5.2.9",

"@angular/platform-browser-dynamic": "5.2.9",

"@ionic-native/core": "4.6.0",

"@ionic-native/splash-screen": "4.6.0",

"@ionic-native/status-bar": "4.6.0",

"@ionic/storage": "2.1.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.8",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.20"

"devDependencies": {

"@ionic/app-scripts": "3.1.8",

"typescript": "~2.6.2"

"description": "Ionic Project - IonicTabsApp"

}

Ionic 3 – Searchbar komponenta

Za razliku od blog postova Ionic 3 – Autocomplete polje za unos i Ionic 3 – select, search i autocomplete komponenta u kojima sam obradio temu autocomplete polja za unos u ovom ću blog postu obraditi primjer polja za filtriranje sadržaja.

Ova je funkcionalnost podržana od strane Ionic i nije potrebno instalirati dodatne Ionic Native pluginove.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju

$ ionic start IonicSearchbar blank
$ cd IonicSearchbar

1 2	$ ionic start IonicSearchbar blank $ cd IonicSearchbar

Aplikacija će se sastojati od jednog ekrana sa prikazom trenutnih članova OSC-a na poveznici http://softwarecity.hr/clanovi/.

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

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let stavka of nizPodaci">
      <h2>{{stavka.ime}} {{stavka.prezime}}</h2>
      <p>{{stavka.tvrtka}}</p>
    </ion-item>
  </ion-list> 
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Searchbar

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item *ngFor="let stavka of nizPodaci">

<h2>{{stavka.ime}} {{stavka.prezime}}</h2>

<p>{{stavka.tvrtka}}</p>

</ion-item>

</ion-list>

</ion-content>

Kreiran je niz nizPodaci koji sadržava popis članova OSC-a.

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

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

  nizPodaci = [];

  constructor(public _navCtrl: NavController) {
 
    this.initializeItems();

  }

  initializeItems(){
    this.nizPodaci = [{'ime': 'Nenad', 'prezime': 'Andraković', 'tvrtka': 'Inchoo'},
    {'ime': 'Toni', 'prezime': 'Aničić', 'tvrtka': 'Inchoo'},
    {'ime': 'Zrinka', 'prezime': 'Antolović', 'tvrtka': 'Inchoo'},
    {'ime': 'Davor', 'prezime': 'Banović', 'tvrtka': 'Oradian'},
    {'ime': 'Maja', 'prezime': 'Berger', 'tvrtka': 'Certus'},
    {'ime': 'Tomislav', 'prezime': 'Bilić', 'tvrtka': 'Inchoo'},
    {'ime': 'Kristina', 'prezime': 'Bite', 'tvrtka': ''},
    {'ime': 'Goran', 'prezime': 'Bokun', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Bosnić', 'tvrtka': 'LegalTie'},
    {'ime': 'Marko', 'prezime': 'Briševac', 'tvrtka': 'Inchoo'},
    {'ime': 'Igor', 'prezime': 'Buzatović', 'tvrtka': 'Inovativni trendovi d.o.o.'},
    {'ime': 'Katarina', 'prezime': 'Dijaković', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Galamboš', 'tvrtka': ''},
    {'ime': 'Ivan', 'prezime': 'Grgić', 'tvrtka': 'Agencija Adventa'},
    {'ime': 'Hrvoje', 'prezime': 'Horvat', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},
    {'ime': 'Bela', 'prezime': 'Ikotić', 'tvrtka': 'BIOS/OSC'},
    {'ime': 'Tomislav', 'prezime': 'Jakopec', 'tvrtka': 'Filozofski fakultet u Osijeku'},
    {'ime': 'Antun', 'prezime': 'Jalovičar', 'tvrtka': 'MUP'},
    {'ime': 'Goran', 'prezime': 'Jarić', 'tvrtka': 'Odvjetnički ured'},
    {'ime': 'Marko', 'prezime': 'Jovanovac', 'tvrtka': 'Marivo'},
    {'ime': 'Hrvoje', 'prezime': 'Jurišić', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Jurlina', 'tvrtka': 'Osijek Software City ⁄ COBE'},
    {'ime': 'Ružica', 'prezime': 'Kadić', 'tvrtka': 'Plava tvornica'},
    {'ime': 'Hrvoje', 'prezime': 'Kalić', 'tvrtka': ''},
    {'ime': 'Dražen', 'prezime': 'Karačić', 'tvrtka': 'Inchoo'},
    {'ime': 'Maja', 'prezime': 'Kardum', 'tvrtka': 'Inchoo'},
    {'ime': 'Tomislav', 'prezime': 'Krpan', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Antun', 'prezime': 'Lauc', 'tvrtka': ''},
    {'ime': 'Ana', 'prezime': 'Leh', 'tvrtka': ''},
    {'ime': 'Nandino', 'prezime': 'Lončar', 'tvrtka': 'Inchoo'},
    {'ime': 'Mislav', 'prezime': 'Majdandžić', 'tvrtka': 'Eksperimental Games'},
    {'ime': 'Stefani', 'prezime': 'Majić', 'tvrtka': 'SPAN d.o.o.'},
    {'ime': 'Krešimir', 'prezime': 'Marić', 'tvrtka': 'Keeper Solutions'},
    {'ime': 'Ivan', 'prezime': 'Marković', 'tvrtka': 'SPAN d.o.o.'},
    {'ime': 'Tina', 'prezime': 'Mazalin', 'tvrtka': 'Odvjetnički ured Tanja Petković Gregurek'},
    {'ime': 'Ivan', 'prezime': 'Mihalj', 'tvrtka': 'RISE GmbH'},
    {'ime': 'Tajana', 'prezime': 'Milanović', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Ivan', 'prezime': 'Milanović', 'tvrtka': 'Okami, obrt za računalne usluge'},
    {'ime': 'Kruno', 'prezime': 'Miličević', 'tvrtka': ''},
    {'ime': 'Vanda', 'prezime': 'Muhar', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Damjan', 'prezime': 'Orešković', 'tvrtka': 'Shoutem'},
    {'ime': 'Akoš', 'prezime': 'Papp', 'tvrtka': ''},
    {'ime': 'Vojislav', 'prezime': 'Pavaosvić', 'tvrtka': 'BetaWare'},
    {'ime': 'Luka', 'prezime': 'Pavličić', 'tvrtka': ''},
    {'ime': 'Tomislav', 'prezime': 'Perić', 'tvrtka': 'Olimpias Tekstil d.o.o.'},
    {'ime': 'Igor', 'prezime': 'Plac', 'tvrtka': 'Prototyp'},
    {'ime': 'Tomislav', 'prezime': 'Plavčić', 'tvrtka': 'Percona'},
    {'ime': 'Toni', 'prezime': 'Podmanički', 'tvrtka': ''},
    {'ime': 'Igor', 'prezime': 'Ragić', 'tvrtka': 'Siemens CVC d.o.o.'},
    {'ime': 'Ana', 'prezime': 'Rogina', 'tvrtka': 'Digitalna agencija Gerila'},
    {'ime': 'Marijana', 'prezime': 'Schonberger', 'tvrtka': ''},
    {'ime': 'Aron', 'prezime': 'Stanić', 'tvrtka': 'Inchoo'},
    {'ime': 'Tomislav', 'prezime': 'Stanković', 'tvrtka': 'Informatika Fortuno'},
    {'ime': 'Stanislav', 'prezime': 'Strešnjak', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},
    {'ime': 'Filip', 'prezime': 'Svetličić', 'tvrtka': 'Inchoo'},
    {'ime': 'Antonija', 'prezime': 'Tadić', 'tvrtka': 'Inchoo'},
    {'ime': 'Mihael', 'prezime': 'Tomić', 'tvrtka': 'Mono d.o.o.'},
    {'ime': 'Miroslav', 'prezime': 'Varga', 'tvrtka': 'Escape d.o.o.'},
    {'ime': 'Ivan', 'prezime': 'Varga', 'tvrtka': 'Adcon'},
    {'ime': 'Pavle', 'prezime': 'Vidaković', 'tvrtka': 'Agronova'},
    {'ime': 'Blaž', 'prezime': 'Vincetić', 'tvrtka': 'Siemens CVC d.o.o.'},
    {'ime': 'Dunja', 'prezime': 'Vorkapić', 'tvrtka': 'Inchoo'},
    {'ime': 'Zvonimir', 'prezime': 'Vuković', 'tvrtka': ''},
    {'ime': 'Ivan', 'prezime': 'Weiler', 'tvrtka': 'Inchoo'},
    {'ime': 'Marijana', 'prezime': 'Zekić-Sušac', 'tvrtka': 'EFOS'},
    {'ime': 'Bojan', 'prezime': 'Zidarević', 'tvrtka': ''},
    {'ime': 'Andreja', 'prezime': 'Čičak', 'tvrtka': 'Inchoo'}];
  }
}

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

nizPodaci = [];

constructor(public _navCtrl: NavController) {

this.initializeItems();

}

initializeItems(){

this.nizPodaci = [{'ime': 'Nenad', 'prezime': 'Andraković', 'tvrtka': 'Inchoo'},

{'ime': 'Toni', 'prezime': 'Aničić', 'tvrtka': 'Inchoo'},

{'ime': 'Zrinka', 'prezime': 'Antolović', 'tvrtka': 'Inchoo'},

{'ime': 'Davor', 'prezime': 'Banović', 'tvrtka': 'Oradian'},

{'ime': 'Maja', 'prezime': 'Berger', 'tvrtka': 'Certus'},

{'ime': 'Tomislav', 'prezime': 'Bilić', 'tvrtka': 'Inchoo'},

{'ime': 'Kristina', 'prezime': 'Bite', 'tvrtka': ''},

{'ime': 'Goran', 'prezime': 'Bokun', 'tvrtka': 'Inchoo'},

{'ime': 'Ivan', 'prezime': 'Bosnić', 'tvrtka': 'LegalTie'},

{'ime': 'Marko', 'prezime': 'Briševac', 'tvrtka': 'Inchoo'},

{'ime': 'Igor', 'prezime': 'Buzatović', 'tvrtka': 'Inovativni trendovi d.o.o.'},

{'ime': 'Katarina', 'prezime': 'Dijaković', 'tvrtka': 'Inchoo'},

{'ime': 'Ivan', 'prezime': 'Galamboš', 'tvrtka': ''},

{'ime': 'Ivan', 'prezime': 'Grgić', 'tvrtka': 'Agencija Adventa'},

{'ime': 'Hrvoje', 'prezime': 'Horvat', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},

{'ime': 'Bela', 'prezime': 'Ikotić', 'tvrtka': 'BIOS/OSC'},

{'ime': 'Tomislav', 'prezime': 'Jakopec', 'tvrtka': 'Filozofski fakultet u Osijeku'},

{'ime': 'Antun', 'prezime': 'Jalovičar', 'tvrtka': 'MUP'},

{'ime': 'Goran', 'prezime': 'Jarić', 'tvrtka': 'Odvjetnički ured'},

{'ime': 'Marko', 'prezime': 'Jovanovac', 'tvrtka': 'Marivo'},

{'ime': 'Hrvoje', 'prezime': 'Jurišić', 'tvrtka': 'Inchoo'},

{'ime': 'Ivan', 'prezime': 'Jurlina', 'tvrtka': 'Osijek Software City ⁄ COBE'},

{'ime': 'Ružica', 'prezime': 'Kadić', 'tvrtka': 'Plava tvornica'},

{'ime': 'Hrvoje', 'prezime': 'Kalić', 'tvrtka': ''},

{'ime': 'Dražen', 'prezime': 'Karačić', 'tvrtka': 'Inchoo'},

{'ime': 'Maja', 'prezime': 'Kardum', 'tvrtka': 'Inchoo'},

{'ime': 'Tomislav', 'prezime': 'Krpan', 'tvrtka': 'Siemens Convergence Creators'},

{'ime': 'Antun', 'prezime': 'Lauc', 'tvrtka': ''},

{'ime': 'Ana', 'prezime': 'Leh', 'tvrtka': ''},

{'ime': 'Nandino', 'prezime': 'Lončar', 'tvrtka': 'Inchoo'},

{'ime': 'Mislav', 'prezime': 'Majdandžić', 'tvrtka': 'Eksperimental Games'},

{'ime': 'Stefani', 'prezime': 'Majić', 'tvrtka': 'SPAN d.o.o.'},

{'ime': 'Krešimir', 'prezime': 'Marić', 'tvrtka': 'Keeper Solutions'},

{'ime': 'Ivan', 'prezime': 'Marković', 'tvrtka': 'SPAN d.o.o.'},

{'ime': 'Tina', 'prezime': 'Mazalin', 'tvrtka': 'Odvjetnički ured Tanja Petković Gregurek'},

{'ime': 'Ivan', 'prezime': 'Mihalj', 'tvrtka': 'RISE GmbH'},

{'ime': 'Tajana', 'prezime': 'Milanović', 'tvrtka': 'Siemens Convergence Creators'},

{'ime': 'Ivan', 'prezime': 'Milanović', 'tvrtka': 'Okami, obrt za računalne usluge'},

{'ime': 'Kruno', 'prezime': 'Miličević', 'tvrtka': ''},

{'ime': 'Vanda', 'prezime': 'Muhar', 'tvrtka': 'Siemens Convergence Creators'},

{'ime': 'Damjan', 'prezime': 'Orešković', 'tvrtka': 'Shoutem'},

{'ime': 'Akoš', 'prezime': 'Papp', 'tvrtka': ''},

{'ime': 'Vojislav', 'prezime': 'Pavaosvić', 'tvrtka': 'BetaWare'},

{'ime': 'Luka', 'prezime': 'Pavličić', 'tvrtka': ''},

{'ime': 'Tomislav', 'prezime': 'Perić', 'tvrtka': 'Olimpias Tekstil d.o.o.'},

{'ime': 'Igor', 'prezime': 'Plac', 'tvrtka': 'Prototyp'},

{'ime': 'Tomislav', 'prezime': 'Plavčić', 'tvrtka': 'Percona'},

{'ime': 'Toni', 'prezime': 'Podmanički', 'tvrtka': ''},

{'ime': 'Igor', 'prezime': 'Ragić', 'tvrtka': 'Siemens CVC d.o.o.'},

{'ime': 'Ana', 'prezime': 'Rogina', 'tvrtka': 'Digitalna agencija Gerila'},

{'ime': 'Marijana', 'prezime': 'Schonberger', 'tvrtka': ''},

{'ime': 'Aron', 'prezime': 'Stanić', 'tvrtka': 'Inchoo'},

{'ime': 'Tomislav', 'prezime': 'Stanković', 'tvrtka': 'Informatika Fortuno'},

{'ime': 'Stanislav', 'prezime': 'Strešnjak', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},

{'ime': 'Filip', 'prezime': 'Svetličić', 'tvrtka': 'Inchoo'},

{'ime': 'Antonija', 'prezime': 'Tadić', 'tvrtka': 'Inchoo'},

{'ime': 'Mihael', 'prezime': 'Tomić', 'tvrtka': 'Mono d.o.o.'},

{'ime': 'Miroslav', 'prezime': 'Varga', 'tvrtka': 'Escape d.o.o.'},

{'ime': 'Ivan', 'prezime': 'Varga', 'tvrtka': 'Adcon'},

{'ime': 'Pavle', 'prezime': 'Vidaković', 'tvrtka': 'Agronova'},

{'ime': 'Blaž', 'prezime': 'Vincetić', 'tvrtka': 'Siemens CVC d.o.o.'},

{'ime': 'Dunja', 'prezime': 'Vorkapić', 'tvrtka': 'Inchoo'},

{'ime': 'Zvonimir', 'prezime': 'Vuković', 'tvrtka': ''},

{'ime': 'Ivan', 'prezime': 'Weiler', 'tvrtka': 'Inchoo'},

{'ime': 'Marijana', 'prezime': 'Zekić-Sušac', 'tvrtka': 'EFOS'},

{'ime': 'Bojan', 'prezime': 'Zidarević', 'tvrtka': ''},

{'ime': 'Andreja', 'prezime': 'Čičak', 'tvrtka': 'Inchoo'}];

}

Searchbar komponenta

Sada ću dodati Searchbar komponentu.

Aplikacija sada izgleda ovako

U pregled sam dodao </ion-searchbar>

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Searchbar
    </ion-title>
  </ion-navbar>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let stavka of nizPodaci">
      <h2>{{stavka.ime}} {{stavka.prezime}}</h2>
      <p>{{stavka.tvrtka}}</p>
    </ion-item>
  </ion-list> 
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Searchbar

</ion-title>

</ion-navbar>

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item *ngFor="let stavka of nizPodaci">

<h2>{{stavka.ime}} {{stavka.prezime}}</h2>

<p>{{stavka.tvrtka}}</p>

</ion-item>

</ion-list>

</ion-content>

Osim toga, dodao sam još i funkciju getItems() koja je zadužena za filtriranje.

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

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

  nizPodaci = [];

  constructor(public _navCtrl: NavController) {
 
    this.initializeItems();

  }

  initializeItems(){
    this.nizPodaci = [{'ime': 'Nenad', 'prezime': 'Andraković', 'tvrtka': 'Inchoo'},
    {'ime': 'Toni', 'prezime': 'Aničić', 'tvrtka': 'Inchoo'},
    {'ime': 'Zrinka', 'prezime': 'Antolović', 'tvrtka': 'Inchoo'},
    {'ime': 'Davor', 'prezime': 'Banović', 'tvrtka': 'Oradian'},
    {'ime': 'Maja', 'prezime': 'Berger', 'tvrtka': 'Certus'},
    {'ime': 'Tomislav', 'prezime': 'Bilić', 'tvrtka': 'Inchoo'},
    {'ime': 'Kristina', 'prezime': 'Bite', 'tvrtka': ''},
    {'ime': 'Goran', 'prezime': 'Bokun', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Bosnić', 'tvrtka': 'LegalTie'},
    {'ime': 'Marko', 'prezime': 'Briševac', 'tvrtka': 'Inchoo'},
    {'ime': 'Igor', 'prezime': 'Buzatović', 'tvrtka': 'Inovativni trendovi d.o.o.'},
    {'ime': 'Katarina', 'prezime': 'Dijaković', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Galamboš', 'tvrtka': ''},
    {'ime': 'Ivan', 'prezime': 'Grgić', 'tvrtka': 'Agencija Adventa'},
    {'ime': 'Hrvoje', 'prezime': 'Horvat', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},
    {'ime': 'Bela', 'prezime': 'Ikotić', 'tvrtka': 'BIOS/OSC'},
    {'ime': 'Tomislav', 'prezime': 'Jakopec', 'tvrtka': 'Filozofski fakultet u Osijeku'},
    {'ime': 'Antun', 'prezime': 'Jalovičar', 'tvrtka': 'MUP'},
    {'ime': 'Goran', 'prezime': 'Jarić', 'tvrtka': 'Odvjetnički ured'},
    {'ime': 'Marko', 'prezime': 'Jovanovac', 'tvrtka': 'Marivo'},
    {'ime': 'Hrvoje', 'prezime': 'Jurišić', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Jurlina', 'tvrtka': 'Osijek Software City ⁄ COBE'},
    {'ime': 'Ružica', 'prezime': 'Kadić', 'tvrtka': 'Plava tvornica'},
    {'ime': 'Hrvoje', 'prezime': 'Kalić', 'tvrtka': ''},
    {'ime': 'Dražen', 'prezime': 'Karačić', 'tvrtka': 'Inchoo'},
    {'ime': 'Maja', 'prezime': 'Kardum', 'tvrtka': 'Inchoo'},
    {'ime': 'Tomislav', 'prezime': 'Krpan', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Antun', 'prezime': 'Lauc', 'tvrtka': ''},
    {'ime': 'Ana', 'prezime': 'Leh', 'tvrtka': ''},
    {'ime': 'Nandino', 'prezime': 'Lončar', 'tvrtka': 'Inchoo'},
    {'ime': 'Mislav', 'prezime': 'Majdandžić', 'tvrtka': 'Eksperimental Games'},
    {'ime': 'Stefani', 'prezime': 'Majić', 'tvrtka': 'SPAN d.o.o.'},
    {'ime': 'Krešimir', 'prezime': 'Marić', 'tvrtka': 'Keeper Solutions'},
    {'ime': 'Ivan', 'prezime': 'Marković', 'tvrtka': 'SPAN d.o.o.'},
    {'ime': 'Tina', 'prezime': 'Mazalin', 'tvrtka': 'Odvjetnički ured Tanja Petković Gregurek'},
    {'ime': 'Ivan', 'prezime': 'Mihalj', 'tvrtka': 'RISE GmbH'},
    {'ime': 'Tajana', 'prezime': 'Milanović', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Ivan', 'prezime': 'Milanović', 'tvrtka': 'Okami, obrt za računalne usluge'},
    {'ime': 'Kruno', 'prezime': 'Miličević', 'tvrtka': ''},
    {'ime': 'Vanda', 'prezime': 'Muhar', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Damjan', 'prezime': 'Orešković', 'tvrtka': 'Shoutem'},
    {'ime': 'Akoš', 'prezime': 'Papp', 'tvrtka': ''},
    {'ime': 'Vojislav', 'prezime': 'Pavaosvić', 'tvrtka': 'BetaWare'},
    {'ime': 'Luka', 'prezime': 'Pavličić', 'tvrtka': ''},
    {'ime': 'Tomislav', 'prezime': 'Perić', 'tvrtka': 'Olimpias Tekstil d.o.o.'},
    {'ime': 'Igor', 'prezime': 'Plac', 'tvrtka': 'Prototyp'},
    {'ime': 'Tomislav', 'prezime': 'Plavčić', 'tvrtka': 'Percona'},
    {'ime': 'Toni', 'prezime': 'Podmanički', 'tvrtka': ''},
    {'ime': 'Igor', 'prezime': 'Ragić', 'tvrtka': 'Siemens CVC d.o.o.'},
    {'ime': 'Ana', 'prezime': 'Rogina', 'tvrtka': 'Digitalna agencija Gerila'},
    {'ime': 'Marijana', 'prezime': 'Schonberger', 'tvrtka': ''},
    {'ime': 'Aron', 'prezime': 'Stanić', 'tvrtka': 'Inchoo'},
    {'ime': 'Tomislav', 'prezime': 'Stanković', 'tvrtka': 'Informatika Fortuno'},
    {'ime': 'Stanislav', 'prezime': 'Strešnjak', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},
    {'ime': 'Filip', 'prezime': 'Svetličić', 'tvrtka': 'Inchoo'},
    {'ime': 'Antonija', 'prezime': 'Tadić', 'tvrtka': 'Inchoo'},
    {'ime': 'Mihael', 'prezime': 'Tomić', 'tvrtka': 'Mono d.o.o.'},
    {'ime': 'Miroslav', 'prezime': 'Varga', 'tvrtka': 'Escape d.o.o.'},
    {'ime': 'Ivan', 'prezime': 'Varga', 'tvrtka': 'Adcon'},
    {'ime': 'Pavle', 'prezime': 'Vidaković', 'tvrtka': 'Agronova'},
    {'ime': 'Blaž', 'prezime': 'Vincetić', 'tvrtka': 'Siemens CVC d.o.o.'},
    {'ime': 'Dunja', 'prezime': 'Vorkapić', 'tvrtka': 'Inchoo'},
    {'ime': 'Zvonimir', 'prezime': 'Vuković', 'tvrtka': ''},
    {'ime': 'Ivan', 'prezime': 'Weiler', 'tvrtka': 'Inchoo'},
    {'ime': 'Marijana', 'prezime': 'Zekić-Sušac', 'tvrtka': 'EFOS'},
    {'ime': 'Bojan', 'prezime': 'Zidarević', 'tvrtka': ''},
    {'ime': 'Andreja', 'prezime': 'Čičak', 'tvrtka': 'Inchoo'}];
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.nizPodaci = this.nizPodaci.filter((stavka) => {
        return ((stavka.ime + stavka.prezime + stavka.tvrtka).toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

}

100

101

102

103