Arhiva angular2-tag-input - Tomislav Stanković

Iako Ionic raspolaže s dosta različitih i korisnih komponenti još uvijek među njima nećete pronaći autocomplete komponentu i prisiljeni ste koristiti neko vanjsko rješenje. U velikom broju slučajeva to je nekakav Angular NPM modul, kao što će biti slučaj i u ovom blog postu.

Što je autocomplete (samodovršavanje)?

To je funkcionalnost koja olakšava pregled, odabir i unos vrijednosti prilikom ispunjavanja nekakve forme. Recimo da imate formu u kojoj jedno od polja prikazuje popis djelatnika, a vi morate odabrati nekoliko njih. To se vrlo jednostavno može riješiti običnim padajućim izbornikom, Ionic za to koristi Select komponentu, i to je dobar izbor kada imate nekoliko djelatnika na tom popisu. Međutim, kada se nađete u situaciji da popis sadržava više stotina stavki odjednom padajući izbornik više nije toliko dobra opcija. Tu uskače autocomplete koji olakšava pronalazak i unos željene vrijednosti.

Google Autocomplete — Autocomplete s kojim ste se sigurno susreli

Postavljanje aplikacije

Prvo ćemo kreirati novi Ionic projekt i pokrenuti ga

$ ionic start Ionic3AutocompleteTokenInput blank --v2
$ cd Ionic3AutocompleteTokenInput

1 2	$ ionic start Ionic3AutocompleteTokenInput blank --v2 $ cd Ionic3AutocompleteTokenInput

Sada ćemo instalirati angular2-tag-input NPM modul koji je osnova naše Ionic 3 autocomplete aplikacije.

npm install angular2-tag-input --save

1	npm install angular2-tag-input --save

Nakon toga potrebno je dodati referencu na RlTagInputModule , a to se radi unutar app.module.ts

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 { HttpModule } from '@angular/http';

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

import {RlTagInputModule} from 'angular2-tag-input';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    RlTagInputModule,
    BrowserModule,
    HttpModule,
    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 { HttpModule } from '@angular/http';

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

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

import {RlTagInputModule} from 'angular2-tag-input';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

RlTagInputModule,

BrowserModule,

HttpModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

I to je to. Spremni smo za korištenje autocomplete funkcionalnosti.

Autocomplete implementacija

Postoje dva načina na koja možemo koristiti autocomplete. Prvi je da ponudimo niz (array) sa zadanim vrijednostima, a drugi je da omogućimo unos bilo koje vrijednosti. U ovom primjeru ponudit ćemo zadani niz.

Logika funkcionalnosti nalazit će se unutar home.ts datoteke. Ovdje imamo dva niza, autocompleteTags koji će se puniti vrijednostima koje odaberemo i autocompleteItems koji sadržava vrijednosti koje će biti ponuđene unutar autocomplete polja.

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

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

  public autocompleteTags = [];
  public autocompleteItems = [
    'Tomislav Stanković',
    'Marko Marulić',
    'Milan Cimeša',
    'Faust Vrančić',
    'Željko Hegedušić',
    'Đuro Pulitika',
    'Ivan Generalić',
    'Tomislav Šenoa'
  ];

  constructor(public navCtrl: NavController) {}

}

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

public autocompleteTags = [];

public autocompleteItems = [

'Tomislav Stanković',

'Marko Marulić',

'Milan Cimeša',

'Faust Vrančić',

'Željko Hegedušić',

'Đuro Pulitika',

'Ivan Generalić',

'Tomislav Šenoa'

];

constructor(public navCtrl: NavController) {}

}

Kako to izgleda možemo vidjeti u home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 (angular2-tag-input)
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <ion-item no-padding>
</ion-item>
  <rl-tag-input
    [addOnBlur]="false"
    [autocomplete]="true"
    [autocompleteItems]="autocompleteItems"
    [(ngModel)]="autocompleteTags"
    placeholder="Unesi vrijednost">
  </rl-tag-input>
<br><hr>
<ion-list>
  <ion-item text-wrap>
    <h2>Popis:</h2>
    {{autocompleteTags | json}}
  </ion-item>
</ion-list> 
 
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic 3 (angular2-tag-input)

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-item no-padding>

</ion-item>

<rl-tag-input

[addOnBlur]="false"

[autocomplete]="true"

[autocompleteItems]="autocompleteItems"

[(ngModel)]="autocompleteTags"

placeholder="Unesi vrijednost">

</rl-tag-input>

<ion-list>

<ion-item text-wrap>

<h2>Popis:</h2>

</ion-item>

</ion-list>

</ion-content>

I uz malo CSS-a

page-home {

   [_nghost-c1] {
        background-color: color($colors, primary);
        border-radius: 40px;
        font-size: 14px;
        color: #fff;
        margin-top: 1px;
    }
    [_nghost-c1] .ng2-tag-input-remove[_ngcontent-c1] {
        color: color($colors, primary);
        background: #fff;
        height: 20px;
        width: 20px;
        line-height: 20px;
    }

}

page-home {

[_nghost-c1] {

background-color: color($colors, primary);

border-radius: 40px;

font-size: 14px;

color: #fff;

margin-top: 1px;

}

[_nghost-c1] .ng2-tag-input-remove[_ngcontent-c1] {

color: color($colors, primary);

background: #fff;

height: 20px;

width: 20px;

line-height: 20px;

}

U konačnici to izgleda ovako

Dinamičke vrijednosti autocomplete niza?

U gornjem primjeru koristili smo niz od nekoliko ručno dodanih vrijednosti, ali to ne znači da ne možemo koristiti i dinamički niz koji dobijemo od API-ja.

U tom je slučaju potrebno kreirati ApiProvider naredbom

$ ionic generate provider ApiProvider

1	$ ionic generate provider ApiProvider

Koristit ćemo popis država s REST Countries API-ja https://restcountries.eu/

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());

}

Kada pozovemo API dobit ćemo console.log(res); koji nam daje niz (array) objekata. Međutim to je previše informacija, a nama trebaju samo imena država kako bi prema njima mogli raditi autocomplete.

Zato ćemo napraviti petlju koja će nam izdvojiti samo nazive država i s njima napuniti naš autocompleteItems niz (array).

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

        this.autocompleteItems.push(
            res[i].name
        );

      };

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

this.autocompleteItems.push(

res[i].name

);

};

home.ts će u tom slučaju izgledati nešto malo drugačije

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ApiProvider } from '../../providers/api-provider';

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

  public autocompleteTags = [];
  public autocompleteItems = [];

  constructor(public navCtrl: NavController,
              public _apiProvider: ApiProvider) {

   //Pozivanje funkcije
   this.getCountries();

  }

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

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

        this.autocompleteItems.push(
            res[i].name
        );

      };

        console.log(this.autocompleteItems);
    
    });
  } 

}

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

import { NavController } from 'ionic-angular';

import { ApiProvider } from '../../providers/api-provider';

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [ApiProvider]

})

export class HomePage {

public autocompleteTags = [];

public autocompleteItems = [];

constructor(public navCtrl: NavController,

public _apiProvider: ApiProvider) {

//Pozivanje funkcije

this.getCountries();

}

getCountries(){

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

console.log(res);

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

this.autocompleteItems.push(

res[i].name

);

};

console.log(this.autocompleteItems);

});

}

A konačan rezultat možete vidjeti u nastavku

Oznaka: angular2-tag-input

Ionic 3 – Autocomplete polje za unos

Postavljanje aplikacije

Autocomplete implementacija

Dinamičke vrijednosti autocomplete niza?