├── src
    ├── pages
    │   └── home
    │   │   ├── home.scss
    │   │   ├── home.html
    │   │   └── home.ts
    ├── app
    │   ├── app.html
    │   ├── main.ts
    │   ├── app.scss
    │   ├── app.component.ts
    │   └── app.module.ts
    ├── assets
    │   ├── imgs
    │   │   └── logo.png
    │   └── icon
    │   │   └── favicon.ico
    ├── manifest.json
    ├── pipes
    │   ├── pipes.module.ts
    │   ├── search
    │   │   └── search.ts
    │   └── sort
    │   │   └── sort.ts
    ├── service-worker.js
    ├── providers
    │   └── rest-api
    │   │   └── rest-api.ts
    ├── index.html
    └── theme
    │   └── variables.scss
├── ionic.config.json
├── tslint.json
├── README.md
├── .editorconfig
├── .gitignore
├── tsconfig.json
├── LICENSE
└── package.json


/src/pages/home/home.scss:
--------------------------------------------------------------------------------
1 | page-home {
2 | 
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app/app.html:
--------------------------------------------------------------------------------
1 | <ion-nav [root]="rootPage"></ion-nav>
2 | 


--------------------------------------------------------------------------------
/src/assets/imgs/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/didinj/ionic3-angular5-search-sort-list/HEAD/src/assets/imgs/logo.png


--------------------------------------------------------------------------------
/src/assets/icon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/didinj/ionic3-angular5-search-sort-list/HEAD/src/assets/icon/favicon.ico


--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "ionic-search",
3 |   "app_id": "",
4 |   "type": "ionic-angular",
5 |   "integrations": {}
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | 
3 | import { AppModule } from './app.module';
4 | 
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "no-duplicate-variable": true,
 4 |     "no-unused-variable": [
 5 |       true
 6 |     ]
 7 |   },
 8 |   "rulesDirectory": [
 9 |     "node_modules/tslint-eslint-rules/dist/rules"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Ionic",
 3 |   "short_name": "Ionic",
 4 |   "start_url": "index.html",
 5 |   "display": "standalone",
 6 |   "icons": [{
 7 |     "src": "assets/imgs/logo.png",
 8 |     "sizes": "512x512",
 9 |     "type": "image/png"
10 |   }],
11 |   "background_color": "#4e8ef7",
12 |   "theme_color": "#4e8ef7"
13 | }


--------------------------------------------------------------------------------
/src/pipes/pipes.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { SearchPipe } from './search/search';
 3 | import { SortPipe } from './sort/sort';
 4 | @NgModule({
 5 | 	declarations: [SearchPipe,
 6 |     SortPipe],
 7 | 	imports: [],
 8 | 	exports: [SearchPipe,
 9 |     SortPipe]
10 | })
11 | export class PipesModule {}
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Ionic 3 and Angular 5 Search and Sort List of Data
 2 | 
 3 | This source code is part of [Ionic 3 and Angular 5 Search and Sort List of Data](https://www.djamware.com/post/5a37ceaf80aca7059c142970/ionic-3-and-angular-5-search-and-sort-list-of-data) tutorial.
 4 | 
 5 | To run this example:
 6 | 
 7 | * Clone this repo
 8 | * Run `npm install`
 9 | * Run `ionic serve -l` to run on the browser
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
 2 | # editorconfig.org
 3 | 
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = space
 8 | indent_size = 2
 9 | 
10 | # We recommend you to keep these unchanged
11 | end_of_line = lf
12 | charset = utf-8
13 | trim_trailing_whitespace = true
14 | insert_final_newline = true
15 | 
16 | [*.md]
17 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/src/pipes/search/search.ts:
--------------------------------------------------------------------------------
 1 | import { Pipe, PipeTransform } from '@angular/core';
 2 | 
 3 | @Pipe({
 4 |   name: 'search',
 5 | })
 6 | export class SearchPipe implements PipeTransform {
 7 |   transform(items: any[], terms: string): any[] {
 8 |     if(!items) return [];
 9 |     if(!terms) return items;
10 |     terms = terms.toLowerCase();
11 |     return items.filter( it => {
12 |       return it.name.toLowerCase().includes(terms);
13 |     });
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/pipes/sort/sort.ts:
--------------------------------------------------------------------------------
 1 | import { Pipe, PipeTransform } from '@angular/core';
 2 | 
 3 | @Pipe({
 4 |   name: 'sort',
 5 | })
 6 | export class SortPipe implements PipeTransform {
 7 |   transform(array: Array<string>, args?: any): Array<string> {
 8 |     return array.sort(function(a, b){
 9 |       if(a[args.property] < b[args.property]){
10 |           return -1 * args.order;
11 |       }
12 |       else if( a[args.property] > b[args.property]){
13 |           return 1 * args.order;
14 |       }
15 |       else{
16 |           return 0;
17 |       }
18 |     });
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Specifies intentionally untracked files to ignore when using Git
 2 | # http://git-scm.com/docs/gitignore
 3 | 
 4 | *~
 5 | *.sw[mnpcod]
 6 | *.log
 7 | *.tmp
 8 | *.tmp.*
 9 | log.txt
10 | *.sublime-project
11 | *.sublime-workspace
12 | .vscode/
13 | npm-debug.log*
14 | 
15 | .idea/
16 | .sourcemaps/
17 | .sass-cache/
18 | .tmp/
19 | .versions/
20 | coverage/
21 | dist/
22 | node_modules/
23 | tmp/
24 | temp/
25 | hooks/
26 | platforms/
27 | plugins/
28 | plugins/android.json
29 | plugins/ios.json
30 | www/
31 | $RECYCLE.BIN/
32 | 
33 | .DS_Store
34 | Thumbs.db
35 | UserInterfaceState.xcuserstate
36 | 


--------------------------------------------------------------------------------
/src/pages/home/home.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 |   <ion-navbar>
 3 |     <ion-title>
 4 |       Country List
 5 |     </ion-title>
 6 |   </ion-navbar>
 7 | </ion-header>
 8 | 
 9 | <ion-content padding>
10 |   <ion-searchbar [(ngModel)]="terms"></ion-searchbar>
11 |   <button ion-button type="button" (click)="sort()">Sort</button>
12 |   <ion-list>
13 |     <ion-item *ngFor="let c of countries | search : terms | sort: {property: column, order: order}">
14 |       <ion-avatar item-left>
15 |         <img src="{{c.flag}}">
16 |       </ion-avatar>
17 |       <h2>{{c.name}}</h2>
18 |       <p>Capital: {{c.capital}}, Region: {{c.region}}</p>
19 |     </ion-item>
20 |   </ion-list>
21 | </ion-content>
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "declaration": false,
 5 |     "emitDecoratorMetadata": true,
 6 |     "experimentalDecorators": true,
 7 |     "lib": [
 8 |       "dom",
 9 |       "es2015"
10 |     ],
11 |     "module": "es2015",
12 |     "moduleResolution": "node",
13 |     "sourceMap": true,
14 |     "target": "es5",
15 |     "typeRoots": [
16 |       "../node_modules/@types"
17 |     ]
18 |   },
19 |   "include": [
20 |     "src/**/*.ts"
21 |   ],
22 |   "exclude": [
23 |     "node_modules",
24 |     "src/**/*.spec.ts",
25 |     "src/**/__tests__/*.ts"
26 |   ],
27 |   "compileOnSave": false,
28 |   "atom": {
29 |     "rewriteTsconfig": false
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/app/app.scss:
--------------------------------------------------------------------------------
 1 | // http://ionicframework.com/docs/theming/
 2 | 
 3 | 
 4 | // App Global Sass
 5 | // --------------------------------------------------
 6 | // Put style rules here that you want to apply globally. These
 7 | // styles are for the entire app and not just one component.
 8 | // Additionally, this file can be also used as an entry point
 9 | // to import other Sass files to be included in the output CSS.
10 | //
11 | // Shared Sass variables, which can be used to adjust Ionic's
12 | // default Sass variables, belong in "theme/variables.scss".
13 | //
14 | // To declare rules for a specific mode, create a child rule
15 | // for the .md, .ios, or .wp mode classes. The mode class is
16 | // automatically applied to the <body> element in the app.
17 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { Platform } from 'ionic-angular';
 3 | import { StatusBar } from '@ionic-native/status-bar';
 4 | import { SplashScreen } from '@ionic-native/splash-screen';
 5 | 
 6 | import { HomePage } from '../pages/home/home';
 7 | @Component({
 8 |   templateUrl: 'app.html'
 9 | })
10 | export class MyApp {
11 |   rootPage:any = HomePage;
12 | 
13 |   constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
14 |     platform.ready().then(() => {
15 |       // Okay, so the platform is ready and our plugins are available.
16 |       // Here you can do any higher level native things you might need.
17 |       statusBar.styleDefault();
18 |       splashScreen.hide();
19 |     });
20 |   }
21 | }
22 | 
23 | 


--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Check out https://googlechromelabs.github.io/sw-toolbox/ for
 3 |  * more info on how to use sw-toolbox to custom configure your service worker.
 4 |  */
 5 | 
 6 | 
 7 | 'use strict';
 8 | importScripts('./build/sw-toolbox.js');
 9 | 
10 | self.toolbox.options.cache = {
11 |   name: 'ionic-cache'
12 | };
13 | 
14 | // pre-cache our key assets
15 | self.toolbox.precache(
16 |   [
17 |     './build/main.js',
18 |     './build/vendor.js',
19 |     './build/main.css',
20 |     './build/polyfills.js',
21 |     'index.html',
22 |     'manifest.json'
23 |   ]
24 | );
25 | 
26 | // dynamically cache any other local assets
27 | self.toolbox.router.any('/*', self.toolbox.fastest);
28 | 
29 | // for any other requests go to the network, cache,
30 | // and then only use that cached resource if your user goes offline
31 | self.toolbox.router.default = self.toolbox.networkFirst;
32 | 


--------------------------------------------------------------------------------
/src/pages/home/home.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { NavController } from 'ionic-angular';
 3 | import { RestApiProvider } from '../../providers/rest-api/rest-api';
 4 | 
 5 | @Component({
 6 |   selector: 'page-home',
 7 |   templateUrl: 'home.html'
 8 | })
 9 | export class HomePage {
10 | 
11 |   countries: string[];
12 |   errorMessage: string;
13 |   descending: boolean = false;
14 |   order: number;
15 |   column: string = 'name';
16 | 
17 |   constructor(public navCtrl: NavController, public rest: RestApiProvider) {}
18 | 
19 |   ionViewDidLoad() {
20 |     this.getCountries();
21 |   }
22 | 
23 |   getCountries() {
24 |     this.rest.getCountries()
25 |        .subscribe(
26 |          countries => this.countries = countries,
27 |          error =>  this.errorMessage = <any>error);
28 |   }
29 | 
30 |   sort(){
31 |     this.descending = !this.descending;
32 |     this.order = this.descending ? 1 : -1;
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/providers/rest-api/rest-api.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { Observable } from 'rxjs/Observable';
 4 | import { map, catchError } from 'rxjs/operators';
 5 | 
 6 | @Injectable()
 7 | export class RestApiProvider {
 8 | 
 9 |   private apiUrl = 'https://restcountries.eu/rest/v2/all';
10 | 
11 |   constructor(public http: HttpClient) {}
12 | 
13 |   getCountries(): Observable<string[]> {
14 |     return this.http.get(this.apiUrl).pipe(
15 |       map(this.extractData),
16 |       catchError(this.handleError)
17 |     );
18 |   }
19 | 
20 |   private extractData(res: Response) {
21 |     let body = res;
22 |     return body || {};
23 |   }
24 | 
25 |   private handleError (error: Response | any) {
26 |     let errMsg: string;
27 |     if (error instanceof Response) {
28 |       const err = error || '';
29 |       errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
30 |     } else {
31 |       errMsg = error.message ? error.message : error.toString();
32 |     }
33 |     console.error(errMsg);
34 |     return Observable.throw(errMsg);
35 |   }
36 | 
37 | }
38 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Didin Jamaludin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { ErrorHandler, NgModule } from '@angular/core';
 3 | import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
 4 | import { SplashScreen } from '@ionic-native/splash-screen';
 5 | import { StatusBar } from '@ionic-native/status-bar';
 6 | import { HttpClientModule } from '@angular/common/http';
 7 | 
 8 | import { MyApp } from './app.component';
 9 | import { HomePage } from '../pages/home/home';
10 | import { RestApiProvider } from '../providers/rest-api/rest-api';
11 | import { SearchPipe } from '../pipes/search/search';
12 | import { SortPipe } from '../pipes/sort/sort';
13 | 
14 | @NgModule({
15 |   declarations: [
16 |     MyApp,
17 |     HomePage,
18 |     SearchPipe,
19 |     SortPipe
20 |   ],
21 |   imports: [
22 |     BrowserModule,
23 |     HttpClientModule,
24 |     IonicModule.forRoot(MyApp)
25 |   ],
26 |   bootstrap: [IonicApp],
27 |   entryComponents: [
28 |     MyApp,
29 |     HomePage
30 |   ],
31 |   providers: [
32 |     StatusBar,
33 |     SplashScreen,
34 |     {provide: ErrorHandler, useClass: IonicErrorHandler},
35 |     RestApiProvider
36 |   ]
37 | })
38 | export class AppModule {}
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-search",
 3 |   "version": "0.0.1",
 4 |   "author": "Ionic Framework",
 5 |   "homepage": "http://ionicframework.com/",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "clean": "ionic-app-scripts clean",
 9 |     "build": "ionic-app-scripts build",
10 |     "lint": "ionic-app-scripts lint",
11 |     "ionic:build": "ionic-app-scripts build",
12 |     "ionic:serve": "ionic-app-scripts serve"
13 |   },
14 |   "dependencies": {
15 |     "@angular/common": "5.0.3",
16 |     "@angular/compiler": "5.0.3",
17 |     "@angular/compiler-cli": "5.0.3",
18 |     "@angular/core": "5.0.3",
19 |     "@angular/forms": "5.0.3",
20 |     "@angular/http": "5.0.3",
21 |     "@angular/platform-browser": "5.0.3",
22 |     "@angular/platform-browser-dynamic": "5.0.3",
23 |     "@ionic-native/core": "4.4.0",
24 |     "@ionic-native/splash-screen": "4.4.0",
25 |     "@ionic-native/status-bar": "4.4.0",
26 |     "@ionic/storage": "2.1.3",
27 |     "ionic-angular": "3.9.2",
28 |     "ionicons": "3.0.0",
29 |     "rxjs": "5.5.2",
30 |     "sw-toolbox": "3.6.0",
31 |     "zone.js": "0.8.18"
32 |   },
33 |   "devDependencies": {
34 |     "@ionic/app-scripts": "3.1.5",
35 |     "typescript": "2.4.2"
36 |   },
37 |   "description": "An Ionic project"
38 | }
39 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Ionic App</title>
 6 |   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |   <meta name="format-detection" content="telephone=no">
 8 |   <meta name="msapplication-tap-highlight" content="no">
 9 | 
10 |   <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
11 |   <link rel="manifest" href="manifest.json">
12 |   <meta name="theme-color" content="#4e8ef7">
13 | 
14 |   <!-- add to homescreen for ios -->
15 |   <meta name="apple-mobile-web-app-capable" content="yes">
16 |   <meta name="apple-mobile-web-app-status-bar-style" content="black">
17 | 
18 |   <!-- cordova.js required for cordova apps (remove if not needed) -->
19 |   <script src="cordova.js"></script>
20 | 
21 |   <!-- un-comment this code to enable service worker
22 |   <script>
23 |     if ('serviceWorker' in navigator) {
24 |       navigator.serviceWorker.register('service-worker.js')
25 |         .then(() => console.log('service worker installed'))
26 |         .catch(err => console.error('Error', err));
27 |     }
28 |   </script>-->
29 | 
30 |   <link href="build/main.css" rel="stylesheet">
31 | 
32 | </head>
33 | <body>
34 | 
35 |   <!-- Ionic's root component and where the app will load -->
36 |   <ion-app></ion-app>
37 | 
38 |   <!-- The polyfills js is generated during the build process -->
39 |   <script src="build/polyfills.js"></script>
40 | 
41 |   <!-- The vendor js is generated during the build process
42 |        It contains all of the dependencies in node_modules -->
43 |   <script src="build/vendor.js"></script>
44 | 
45 |   <!-- The main bundle js is generated during the build process -->
46 |   <script src="build/main.js"></script>
47 | 
48 | </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
 1 | // Ionic Variables and Theming. For more info, please see:
 2 | // http://ionicframework.com/docs/theming/
 3 | 
 4 | // Font path is used to include ionicons,
 5 | // roboto, and noto sans fonts
 6 | $font-path: "../assets/fonts";
 7 | 
 8 | 
 9 | // The app direction is used to include
10 | // rtl styles in your app. For more info, please see:
11 | // http://ionicframework.com/docs/theming/rtl-support/
12 | $app-direction: ltr;
13 | 
14 | 
15 | @import "ionic.globals";
16 | 
17 | 
18 | // Shared Variables
19 | // --------------------------------------------------
20 | // To customize the look and feel of this app, you can override
21 | // the Sass variables found in Ionic's source scss files.
22 | // To view all the possible Ionic variables, see:
23 | // http://ionicframework.com/docs/theming/overriding-ionic-variables/
24 | 
25 | 
26 | 
27 | 
28 | // Named Color Variables
29 | // --------------------------------------------------
30 | // Named colors makes it easy to reuse colors on various components.
31 | // It's highly recommended to change the default colors
32 | // to match your app's branding. Ionic uses a Sass map of
33 | // colors so you can add, rename and remove colors as needed.
34 | // The "primary" color is the only required color in the map.
35 | 
36 | $colors: (
37 |   primary:    #488aff,
38 |   secondary:  #32db64,
39 |   danger:     #f53d3d,
40 |   light:      #f4f4f4,
41 |   dark:       #222
42 | );
43 | 
44 | 
45 | // App iOS Variables
46 | // --------------------------------------------------
47 | // iOS only Sass variables can go here
48 | 
49 | 
50 | 
51 | 
52 | // App Material Design Variables
53 | // --------------------------------------------------
54 | // Material Design only Sass variables can go here
55 | 
56 | 
57 | 
58 | 
59 | // App Windows Variables
60 | // --------------------------------------------------
61 | // Windows only Sass variables can go here
62 | 
63 | 
64 | 
65 | 
66 | // App Theme
67 | // --------------------------------------------------
68 | // Ionic apps can have different themes applied, which can
69 | // then be future customized. This import comes last
70 | // so that the above variables are used and Ionic's
71 | // default are overridden.
72 | 
73 | @import "ionic.theme.default";
74 | 
75 | 
76 | // Ionicons
77 | // --------------------------------------------------
78 | // The premium icon font for Ionic. For more info, please see:
79 | // http://ionicframework.com/docs/ionicons/
80 | 
81 | @import "ionic.ionicons";
82 | 
83 | 
84 | // Fonts
85 | // --------------------------------------------------
86 | 
87 | @import "roboto";
88 | @import "noto-sans";
89 | 


--------------------------------------------------------------------------------