;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/http-rest-api-get-method-example-random-users/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HttpClient } from '@angular/common/http';
3 | import { LoadingController } from '@ionic/angular';
4 |
5 |
6 | @Component({
7 | selector: 'app-home',
8 | templateUrl: 'home.page.html',
9 | styleUrls: ['home.page.scss'],
10 | })
11 | export class HomePage {
12 | constructor(public http: HttpClient,public loadingController: LoadingController) {
13 | this.getUsersList()
14 | }
15 | usersList:any[]=[]
16 | async getUsersList()
17 | {
18 | const loading = await this.loadingController.create({
19 | message: 'Hellooo',
20 | duration: 2000
21 | });
22 | await loading.present();
23 |
24 | this.http.get('https://randomuser.me/api/?results=10').subscribe(data=>{
25 | this.usersList=data["results"]
26 | loading.dismiss()
27 | })
28 | }
29 |
30 |
31 | }
32 |
--------------------------------------------------------------------------------
/http-rest-api-get-method-example-random-users/pic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/http-rest-api-get-method-example-random-users/pic.png
--------------------------------------------------------------------------------
/i4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/i4.png
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/README.md:
--------------------------------------------------------------------------------
1 | ## Ionic 4 Calendar UI Example
2 |
3 |
4 | ## Preview of Calendar UI
5 |
6 | 
7 | 
8 | 
9 |
10 |
11 |
12 | 
13 | 
14 | 
15 | 
16 |
17 |
18 |
19 | ## Plugins Used For Calendar UI
20 |
21 | https://github.com/HsuanXyz/ion2-calendar
22 |
23 | ## How to use this plugin?
24 |
25 | Use the below link to implement this plugin from scratch using Ionic 4
26 |
27 | https://ampersandacademy.com/tutorials/ionic-framework-4/ionic-4-calendar-ui-plugin-example
28 |
29 |
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IonicModule } from '@ionic/angular';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 | import { IonTextAvatar } from 'ionic-text-avatar';
7 |
8 | import { HomePage } from './home.page';
9 | import { AvatarComponent } from '../components/avatar/avatar.component';
10 | import { CalendarComponent } from '../components/calendar/calendar.component';
11 | import { CalendarModule } from 'ion2-calendar';
12 |
13 | @NgModule({
14 | imports: [
15 | CalendarModule,
16 | CommonModule,
17 | FormsModule,
18 | IonicModule,
19 | RouterModule.forChild([
20 | {
21 | path: '',
22 | component: HomePage
23 | }
24 | ])
25 | ],
26 | declarations: [HomePage,AvatarComponent,CalendarComponent]
27 | })
28 | export class HomePageModule {}
29 |
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | calendar-ui1
4 |
5 |
6 |
7 |
8 |
9 | Basic
10 | Multiple
11 |
12 | Range
13 |
14 |
18 |
19 |
20 |
24 |
25 |
26 |
27 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/home/home.page.scss:
--------------------------------------------------------------------------------
1 | .bg
2 | {
3 |
4 | --background: linear-gradient(to right, #6441A5 0%, #2a0845 51%, #6441A5 100%);
5 |
6 | }
7 |
8 | .bg2{
9 |
10 | --background: linear-gradient(to right, #fd746c 0%, #ff9068 51%, #fd746c 100%);
11 |
12 | }
13 |
14 | .bg3{
15 |
16 | --background: linear-gradient(to right, #ff00cc 0%, #333399 51%, #ff00cc 100%);
17 |
18 | }
19 |
20 | .mbg{
21 |
22 | .week-toolbar.primary[_ngcontent-c2] {
23 | --background:
24 | linear-gradient(to right, #ff00cc 0%, #333399 51%, #ff00cc 100%);
25 |
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { CalendarComponentOptions } from 'ion2-calendar';
3 | import {
4 | CalendarModal,
5 | CalendarModalOptions,
6 | DayConfig,
7 | CalendarResult
8 | } from 'ion2-calendar';
9 | import { ModalController } from '@ionic/angular';
10 |
11 | @Component({
12 | selector: 'app-home',
13 | templateUrl: 'home.page.html',
14 | styleUrls: ['home.page.scss'],
15 | })
16 | export class HomePage implements OnInit {
17 |
18 | constructor(public modalCtrl: ModalController) { }
19 |
20 | ngOnInit() {
21 | }
22 |
23 | dateRange: { from: '2019-05-02'; to: '2019-05-07'; };
24 | type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'
25 | optionsRange: CalendarComponentOptions = {
26 | pickMode: 'range'
27 | };
28 |
29 | optionsMulti: CalendarComponentOptions = {
30 | pickMode: 'multi'
31 | };
32 |
33 | async basic()
34 | {
35 | const options: CalendarModalOptions = {
36 | title: 'BASIC',
37 | color:'dark'
38 | };
39 |
40 | const myCalendar = await this.modalCtrl.create({
41 | component: CalendarModal,
42 | componentProps: { options }
43 |
44 | });
45 |
46 | myCalendar.present();
47 |
48 | const event: any = await myCalendar.onDidDismiss();
49 | const date: CalendarResult = event.data;
50 | console.log(date);
51 |
52 | }
53 |
54 | async multiple()
55 | {
56 | const options = {
57 | pickMode: 'multi',
58 | title: 'MULTI',
59 | };
60 |
61 | const myCalendar = await this.modalCtrl.create({
62 | component: CalendarModal,
63 | componentProps: { options },
64 | cssClass:'mbg'
65 | });
66 |
67 | myCalendar.present();
68 |
69 | const event: any = await myCalendar.onDidDismiss();
70 | const date: CalendarResult = event.data;
71 | console.log(date);
72 | }
73 |
74 | async range()
75 | {
76 | const options: CalendarModalOptions = {
77 | pickMode: 'range',
78 | title: 'RANGE',
79 | color:'danger'
80 | };
81 |
82 | const myCalendar = await this.modalCtrl.create({
83 | component: CalendarModal,
84 | componentProps: { options }
85 | });
86 |
87 | myCalendar.present();
88 |
89 | const event: any = await myCalendar.onDidDismiss();
90 | const date = event.data;
91 | const from: CalendarResult = date.from;
92 | const to: CalendarResult = date.to;
93 |
94 | console.log(date, from, to);
95 | }
96 |
97 | }
98 |
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/screenshots/sc1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/ionic4-calendar-ui-example1/screenshots/sc1.png
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/screenshots/sc2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/ionic4-calendar-ui-example1/screenshots/sc2.png
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/screenshots/sc3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/ionic4-calendar-ui-example1/screenshots/sc3.png
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/screenshots/sc4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/ionic4-calendar-ui-example1/screenshots/sc4.png
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/screenshots/sc5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/ionic4-calendar-ui-example1/screenshots/sc5.png
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/screenshots/sc6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/ionic4-calendar-ui-example1/screenshots/sc6.png
--------------------------------------------------------------------------------
/ionic4-calendar-ui-example1/screenshots/sc7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/ionic4-calendar-ui-example1/screenshots/sc7.png
--------------------------------------------------------------------------------
/ionic4-infinite-scroll-example/README.md:
--------------------------------------------------------------------------------
1 | ## Ionic 4 Infinite Scroll Example
2 |
3 |
4 |
5 |
6 | 
7 |
8 |
--------------------------------------------------------------------------------
/ionic4-infinite-scroll-example/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IonicModule } from '@ionic/angular';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 | import { IonTextAvatar } from 'ionic-text-avatar';
7 |
8 | import { HomePage } from './home.page';
9 | import { AvatarComponent } from '../components/avatar/avatar.component';
10 | import { CalendarComponent } from '../components/calendar/calendar.component';
11 | import { CalendarModule } from 'ion2-calendar';
12 |
13 | @NgModule({
14 | imports: [
15 | CalendarModule,
16 | CommonModule,
17 | FormsModule,
18 | IonicModule,
19 | RouterModule.forChild([
20 | {
21 | path: '',
22 | component: HomePage
23 | }
24 | ])
25 | ],
26 | declarations: [HomePage,AvatarComponent,CalendarComponent]
27 | })
28 | export class HomePageModule {}
29 |
--------------------------------------------------------------------------------
/ionic4-infinite-scroll-example/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Infinite Scroll Example
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Random Users List
12 |
13 |
14 |
15 | ![]()
16 |
17 |
18 | {{x.name.title}}. {{x.name.first}}
19 | {{x.email}}
20 | {{x.registered.date}}
21 |
22 |
23 |
24 |
25 |
26 |
27 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/ionic4-infinite-scroll-example/home/home.page.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/ionic4-infinite-scroll-example/home/home.page.scss
--------------------------------------------------------------------------------
/ionic4-infinite-scroll-example/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/ionic4-infinite-scroll-example/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { HttpClient } from '@angular/common/http';
4 |
5 |
6 | @Component({
7 | selector: 'app-home',
8 | templateUrl: 'home.page.html',
9 | styleUrls: ['home.page.scss'],
10 | })
11 | export class HomePage {
12 |
13 | constructor(public http: HttpClient){
14 |
15 | this.getData()
16 | }
17 |
18 |
19 | usersList:any[]=[]
20 | getData()
21 | {
22 |
23 | this.http.get('https://randomuser.me/api/?results=10').subscribe(data=>{
24 | //process the json data
25 | console.log(data)
26 | this.usersList=data["results"]
27 | })
28 | }
29 |
30 | loadData(event)
31 | {
32 | this.http.get('https://randomuser.me/api/?results=10').subscribe(data=>{
33 | //process the json data
34 | event.target.complete();
35 | console.log(data)
36 | this.usersList=this.usersList.concat(data["results"])
37 | })
38 | }
39 |
40 |
41 |
42 |
43 | }
44 |
--------------------------------------------------------------------------------
/ionic4-infinite-scroll-example/screenshot/sc2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/ionic4-infinite-scroll-example/screenshot/sc2.png
--------------------------------------------------------------------------------
/location-accuracy-example/README.md:
--------------------------------------------------------------------------------
1 | ## Ionic 4 Location Accuracy Plugin Example ( Programmatically enable location using Ionic)
2 |
3 | In this tutorial, you will learn, how to enable location programmatically using the Ionic 4 Location Accuracy plugin. Location plays a very import role in many applications. Online delivery and e-commerce apps mostly rely on the location. This improves the user experience. If you take the popular raid hailing applications such as uber, ola, etc, their application mainly relying on the location of users and drivers. So getting the location of the device is very important for many applications. New startups also want to give the same experience to the user from their app.
4 |
5 | Let's do the automatically location enable service from scratch using the Ionic 4 and Location Accuracy plugin with code examples using the below link.
6 |
7 | https://ampersandacademy.com/tutorials/ionic-framework-4/ionic-4-location-accuracy-example
8 |
9 |
10 | Preview of Android.
11 |
12 | 
13 |
14 |
15 |
16 | ## Downnload APK
17 |
18 | Get the APK and test it on your Android Device.
19 |
20 | APK
21 |
22 | Tested Device:
23 | Moto G4 Plus
24 |
25 | You can download this apk and test it on your device. This apk is not harmful and it is not stealing any info.
26 | If you wanna try, please download install on your device. And you can try this without any worries.
27 |
--------------------------------------------------------------------------------
/location-accuracy-example/app-debug.apk:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/location-accuracy-example/app-debug.apk
--------------------------------------------------------------------------------
/location-accuracy-example/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IonicModule } from '@ionic/angular';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 |
7 | import { HomePage } from './home.page';
8 |
9 | @NgModule({
10 | imports: [
11 | CommonModule,
12 | FormsModule,
13 | IonicModule,
14 | RouterModule.forChild([
15 | {
16 | path: '',
17 | component: HomePage
18 | }
19 | ])
20 | ],
21 | declarations: [HomePage]
22 | })
23 | export class HomePageModule {}
24 |
--------------------------------------------------------------------------------
/location-accuracy-example/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Enable location Example
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Enable Location
13 |
14 |
15 |
--------------------------------------------------------------------------------
/location-accuracy-example/home/home.page.scss:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/location-accuracy-example/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/location-accuracy-example/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';
4 |
5 | import { AlertController } from '@ionic/angular';
6 |
7 |
8 | @Component({
9 | selector: 'app-home',
10 | templateUrl: 'home.page.html',
11 | styleUrls: ['home.page.scss'],
12 | })
13 | export class HomePage {
14 |
15 | constructor(private locationAccuracy: LocationAccuracy,private alertController:AlertController)
16 | {
17 |
18 | }
19 |
20 | enableLocation(){
21 |
22 | // the accuracy option will be ignored by iOS
23 | this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
24 | () => {
25 | console.log('Request successful')
26 | this.showLoader('Location Enable Request successful')
27 |
28 | },
29 | error => {
30 | console.log('Error requesting location permissions', error)
31 | this.showLoader('Error requesting location permissions '+JSON.stringify(error))
32 | }
33 | );
34 |
35 | }
36 |
37 |
38 |
39 | async showLoader(msg)
40 | {
41 | const alert = await this.alertController.create({
42 | message: msg,
43 | buttons: ['OK']
44 | });
45 |
46 | await alert.present();
47 | }
48 |
49 |
50 | }
51 |
--------------------------------------------------------------------------------
/location-accuracy-example/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/location-accuracy-example/screenshot.jpg
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/README.md:
--------------------------------------------------------------------------------
1 | ## Ionic 4 Modal Example with IPL 2019 Player Data
2 |
3 | Get the full tutorial on how to implement the modal using the Ionic 4 Framework using the below link.
4 |
5 | https://ampersandacademy.com/tutorials/ionic-framework-4/ionic-4-modal-example-using-ipl-2019-players-information
6 |
7 | The above link explains, how to create the modal from scratch.
8 |
9 | The prime aim of this tutorial is, to explain
10 | 1. How to create a modal in Ionic 4.
11 | 2. How to close the modal in Ionic 4.
12 | 3. How to pass data to a modal in Ionic 4.
13 | 4. How to receive data from a page to modal in Ionic 4
14 | 5. How to send data from modal to page in Ionic 4
15 | 6. How to receive data from modal once the modal is closed in Ionic 4.
16 |
17 | ### Preview of Android
18 |
19 |
20 | 
21 | 
22 |
23 |
24 | 
25 | 
26 |
27 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/edit-player/edit-player.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 | import { Routes, RouterModule } from '@angular/router';
5 |
6 | import { IonicModule } from '@ionic/angular';
7 |
8 | import { EditPlayerPage } from './edit-player.page';
9 |
10 | const routes: Routes = [
11 | {
12 | path: '',
13 | component: EditPlayerPage
14 | }
15 | ];
16 |
17 | @NgModule({
18 | imports: [
19 | CommonModule,
20 | FormsModule,
21 | IonicModule,
22 | RouterModule.forChild(routes)
23 | ],
24 | declarations: [EditPlayerPage]
25 | })
26 | export class EditPlayerPageModule {}
27 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/edit-player/edit-player.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Edit Player Info
10 |
11 |
12 |
13 |
14 |
15 |
16 | Edit {{player.name}} Information
17 |
18 |
19 |
20 | Matches
21 |
22 |
23 |
24 |
25 | Runs
26 |
27 |
28 |
29 |
30 | Fifties
31 |
32 |
33 |
34 |
35 | 4s
36 |
37 |
38 |
39 |
40 | 6s
41 |
42 |
43 | Update
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/edit-player/edit-player.page.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/modal-example-with-ipl-data/edit-player/edit-player.page.scss
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/edit-player/edit-player.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { EditPlayerPage } from './edit-player.page';
5 |
6 | describe('EditPlayerPage', () => {
7 | let component: EditPlayerPage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ EditPlayerPage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(EditPlayerPage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/edit-player/edit-player.page.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { NavParams, ModalController } from '@ionic/angular';
3 |
4 | @Component({
5 | selector: 'app-edit-player',
6 | templateUrl: './edit-player.page.html',
7 | styleUrls: ['./edit-player.page.scss'],
8 | })
9 | export class EditPlayerPage implements OnInit {
10 |
11 | player:any
12 | constructor(navParams: NavParams,public viewCtrl: ModalController) {
13 | this.player=navParams.get('player')
14 | }
15 |
16 | ngOnInit() {
17 | }
18 |
19 | update()
20 | {
21 | this.viewCtrl.dismiss(this.player);
22 |
23 | }
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IonicModule } from '@ionic/angular';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 | import { IonTextAvatar } from 'ionic-text-avatar';
7 |
8 | import { HomePage } from './home.page';
9 | import { AvatarComponent } from '../components/avatar/avatar.component';
10 |
11 | @NgModule({
12 | imports: [
13 | CommonModule,
14 | FormsModule,
15 | IonicModule,
16 | RouterModule.forChild([
17 | {
18 | path: '',
19 | component: HomePage
20 | }
21 | ])
22 | ],
23 | declarations: [HomePage,AvatarComponent]
24 | })
25 | export class HomePageModule {}
26 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | IPL 2019
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | CSK SQUAD
14 |
15 |
16 |
17 | ![]()
18 |
19 |
20 | {{x.name}}
21 | {{x.role}}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/home/home.page.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ModalController } from '@ionic/angular';
3 | import { ViewPlayerPage } from '../view-player/view-player.page';
4 | import { EditPlayerPage } from '../edit-player/edit-player.page';
5 |
6 | @Component({
7 | selector: 'app-home',
8 | templateUrl: 'home.page.html',
9 | styleUrls: ['home.page.scss'],
10 | })
11 | export class HomePage {
12 | constructor(public modalController: ModalController) {
13 |
14 | }
15 |
16 | playersList:any[]=[{
17 | name:'MS Dhoni',image:'https://iplstatic.s3.amazonaws.com/players/284/1.png',role:"Wicketkeeper batsman",
18 | batting_style:"Right-handed",
19 | bowling_style:"Right-arm medium",
20 | nationality:"Indian",
21 | matches:183,
22 | runs:4246,
23 | fifties:22,
24 | fours:287,
25 | sixes:196
26 | },
27 | {
28 | name:'Kedar Jadhav',image:'https://iplstatic.s3.amazonaws.com/players/284/297.png',role:"Batsman",
29 | batting_style:"Right-handed",
30 | bowling_style:"Right-arm off-spin",
31 | nationality:"Indian",
32 | matches:73,
33 | runs:1052,
34 | fifties:4,
35 | fours:90,
36 | sixes:37
37 | },
38 | {
39 | name:'Dwayne Bravo',image:'https://iplstatic.s3.amazonaws.com/players/284/25.png',role:"All-rounder",
40 | batting_style:"Right-handed",
41 | bowling_style:"Right-arm medium fast",
42 | nationality:"West Indian",
43 | matches:126,
44 | runs:1442,
45 | fifties:5,
46 | fours:114,
47 | sixes:60
48 | }]
49 |
50 | async openModal(player) {
51 | const modal = await this.modalController.create({
52 | component: ViewPlayerPage,
53 | componentProps: { player: player }
54 | });
55 | return await modal.present();
56 | }
57 |
58 | async editModal(player,index) {
59 | const modal = await this.modalController.create({
60 | component: EditPlayerPage,
61 | componentProps: { player: player }
62 | });
63 | modal.onDidDismiss().then(data=>{
64 | this.playersList[index]=data.data
65 | })
66 | return await modal.present();
67 | }
68 |
69 | /*
70 | {
71 | name:'',image:'',role:"",
72 | batting_style:"",
73 | bowling_style:"",
74 | nationality:"",
75 | matches:,
76 | runs:,
77 | fifties:,
78 | fours:,
79 | sixes:
80 | }
81 | */
82 | }
83 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/modal1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/modal-example-with-ipl-data/modal1.png
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/modal2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/modal-example-with-ipl-data/modal2.png
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/modal3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/modal-example-with-ipl-data/modal3.png
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/modal4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/modal-example-with-ipl-data/modal4.png
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/view-player/view-player.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 | import { Routes, RouterModule } from '@angular/router';
5 |
6 | import { IonicModule } from '@ionic/angular';
7 |
8 | import { ViewPlayerPage } from './view-player.page';
9 |
10 | const routes: Routes = [
11 | {
12 | path: '',
13 | component: ViewPlayerPage
14 | }
15 | ];
16 |
17 | @NgModule({
18 | imports: [
19 | CommonModule,
20 | FormsModule,
21 | IonicModule,
22 | RouterModule.forChild(routes)
23 | ],
24 | declarations: [ViewPlayerPage]
25 | })
26 | export class ViewPlayerPageModule {}
27 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/view-player/view-player.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | View Player Info
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | {{player.name}}
18 | {{player.role}},{{player.nationality}}
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | Info
27 |
28 |
29 | Matches
30 | {{player.matches}}
31 |
32 |
33 | Runs
34 | {{player.runs}}
35 |
36 |
37 | 50s
38 | {{player.fifties}}
39 |
40 |
41 | 4s
42 | {{player.fours}}
43 |
44 |
45 | 6s
46 | {{player.sixes}}
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/view-player/view-player.page.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/modal-example-with-ipl-data/view-player/view-player.page.scss
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/view-player/view-player.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { ViewPlayerPage } from './view-player.page';
5 |
6 | describe('ViewPlayerPage', () => {
7 | let component: ViewPlayerPage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ ViewPlayerPage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(ViewPlayerPage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/modal-example-with-ipl-data/view-player/view-player.page.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { NavParams, ModalController } from '@ionic/angular';
3 |
4 | @Component({
5 | selector: 'app-view-player',
6 | templateUrl: './view-player.page.html',
7 | styleUrls: ['./view-player.page.scss'],
8 | })
9 | export class ViewPlayerPage implements OnInit {
10 | player:any
11 | constructor(navParams: NavParams,public viewCtrl: ModalController) {
12 | this.player=navParams.get('player')
13 | }
14 |
15 | ngOnInit() {
16 | }
17 |
18 | dismiss() {
19 | this.viewCtrl.dismiss();
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/push-notification-android-example/README.md:
--------------------------------------------------------------------------------
1 | ## Ionic4 Push Notification Example - Android
2 |
3 | I am very happy to present this apk to all. Setting up push notification is always a hectic task. Many time we will encounter build error. Some time the push notification won't work. Some times the images can not be delivered, due to the poor documentation from Phonegap push plugin and Firebase.
4 |
5 | Preview of Android.
6 |
7 | 
8 | 
9 |
10 |
11 |
12 | Preview of iOS.
13 |
14 | Coming soon.
15 |
16 | ## Download APK
17 |
18 | Get the APK and test it on your Android Device.
19 |
20 | APK
21 |
22 | Note: You can download this apk and test it on your device. This apk is not harmful and it is not stealing any of your private info.
23 | If you wanna try, please download install on your device. And you can try this without any worries. The data captured by this apk is mentined below.
24 |
25 | Tested Device:
26 | Moto G4 Plus
27 |
28 | ## Plugins Used in APK
29 |
30 | 1. Phonegap Push
31 | 2. Storage
32 | 3. HttpClient
33 | 4. Firebase (Only for notification)
34 |
35 | ## Data Captured Using this APK
36 |
37 | Information will be captured only, when your press the send notification button. It won't capture any information, when you open this App. The below information will be capture when you press the send notification button.
38 |
39 | 1. IP
40 | 2. Device Basic Information
41 | 3. Custom title and message you send
42 | 4. Your push notification token
43 |
44 | We won't use any of these information for any marketing purpose. We capturing these information, only to know the usage of the APK.
45 |
46 | ## Features of this APK
47 |
48 | 1. You can send your custom title and message to your device using this notification apk
49 | 2. You can test the working of push notification on your device
50 |
51 | ## Must Do
52 | 1. You must change the title and message each time before pressing send message, or else it wont send the notification.
53 | 2. Image of this notification is fixed. You can not change it. You can change only title and message of push notification
54 |
55 | ## PHP Notification Code
56 |
57 | Use the below link to get code for sending push notification using PHP
58 |
59 | https://ampersandacademy.com/tutorials/ionic-framework-version-2/push-notification-automate-using-php
60 |
61 | ## Queries
62 |
63 | If you have any queries, please raise your query in the issue section og github.
64 |
65 | https://github.com/bharathirajatut/ionic4/issues
66 |
--------------------------------------------------------------------------------
/push-notification-android-example/app-debug.apk:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/push-notification-android-example/app-debug.apk
--------------------------------------------------------------------------------
/push-notification-android-example/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | const routes: Routes = [
5 | { path: '', redirectTo: 'home', pathMatch: 'full' },
6 | { path: 'home', loadChildren: './home/home.module#HomePageModule' },
7 | ];
8 |
9 | @NgModule({
10 | imports: [RouterModule.forRoot(routes)],
11 | exports: [RouterModule]
12 | })
13 | export class AppRoutingModule { }
14 |
--------------------------------------------------------------------------------
/push-notification-android-example/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/push-notification-android-example/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { TestBed, async } from '@angular/core/testing';
3 |
4 | import { Platform } from '@ionic/angular';
5 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
6 | import { StatusBar } from '@ionic-native/status-bar/ngx';
7 |
8 | import { AppComponent } from './app.component';
9 |
10 | describe('AppComponent', () => {
11 |
12 | let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
13 |
14 | beforeEach(async(() => {
15 | statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
16 | splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
17 | platformReadySpy = Promise.resolve();
18 | platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
19 |
20 | TestBed.configureTestingModule({
21 | declarations: [AppComponent],
22 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
23 | providers: [
24 | { provide: StatusBar, useValue: statusBarSpy },
25 | { provide: SplashScreen, useValue: splashScreenSpy },
26 | { provide: Platform, useValue: platformSpy },
27 | ],
28 | }).compileComponents();
29 | }));
30 |
31 | it('should create the app', () => {
32 | const fixture = TestBed.createComponent(AppComponent);
33 | const app = fixture.debugElement.componentInstance;
34 | expect(app).toBeTruthy();
35 | });
36 |
37 | it('should initialize the app', async () => {
38 | TestBed.createComponent(AppComponent);
39 | expect(platformSpy.ready).toHaveBeenCalled();
40 | await platformReadySpy;
41 | expect(statusBarSpy.styleDefault).toHaveBeenCalled();
42 | expect(splashScreenSpy.hide).toHaveBeenCalled();
43 | });
44 |
45 | // TODO: add more tests!
46 |
47 | });
48 |
--------------------------------------------------------------------------------
/push-notification-android-example/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { Platform } from '@ionic/angular';
4 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
5 | import { StatusBar } from '@ionic-native/status-bar/ngx';
6 | import { Push, PushObject, PushOptions } from '@ionic-native/push/ngx';
7 | import { HttpClient } from '@angular/common/http';
8 | import { Firebase } from '@ionic-native/firebase/ngx';
9 | import { Storage } from '@ionic/storage';
10 |
11 | @Component({
12 | selector: 'app-root',
13 | templateUrl: 'app.component.html'
14 | })
15 | export class AppComponent {
16 | constructor(firebase: Firebase,private http: HttpClient,private push: Push,
17 | private platform: Platform,
18 | private splashScreen: SplashScreen,
19 | private statusBar: StatusBar,
20 | private storage: Storage
21 | ) {
22 | this.initializeApp();
23 | }
24 |
25 | initializeApp() {
26 | this.platform.ready().then(() => {
27 | this.statusBar.styleDefault();
28 | this.splashScreen.hide();
29 | if(this.platform.is('android')){
30 | this.init()
31 | }
32 | });
33 | }
34 |
35 | init()
36 | {
37 | const options: PushOptions = {
38 | android: {
39 | icon: 'icon',
40 | iconColor:'#e21e2e',
41 | sound:'true',
42 | forceShow:true
43 | },
44 | ios: {
45 | alert: 'true',
46 | badge: true,
47 | sound: 'false'
48 | },
49 | windows: {},
50 | browser: {
51 | pushServiceURL: 'http://push.api.phonegap.com/v1/push'
52 | }
53 | }
54 |
55 | const pushObject: PushObject = this.push.init(options);
56 |
57 | //use this for broadcasting messages
58 | pushObject.subscribe('ampersand-academy-ionic-android').then(data=>{
59 | //alert('subscribe success: ' );
60 | });
61 |
62 | //receive notification
63 | pushObject.on('notification').subscribe((notification: any) => {
64 | console.log('Received a notification', notification)
65 | //alert('Received a notification'+JSON.stringify(notification))
66 | });
67 |
68 | //save token locally
69 | pushObject.on('registration').subscribe((registration: any) => {
70 | console.log('Device registered', registration)
71 | //alert('Device registered'+JSON.stringify(registration))
72 | this.storage.set('token', registration.registrationId);
73 |
74 | /*this.http.get('http://192.168.0.111/ionic/save-token.php?token='+JSON.stringify(registration)).subscribe((response) => {
75 | console.log(response);
76 | });
77 | */
78 |
79 | });
80 |
81 | pushObject.on('error').subscribe(error => {
82 | console.error('Error with Push plugin', error)
83 | alert('Error with Push plugin'+JSON.stringify(error))
84 | });
85 |
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/push-notification-android-example/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { RouteReuseStrategy } from '@angular/router';
4 |
5 | import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
6 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
7 | import { StatusBar } from '@ionic-native/status-bar/ngx';
8 |
9 | import { AppComponent } from './app.component';
10 | import { AppRoutingModule } from './app-routing.module';
11 |
12 | import { Push, PushObject, PushOptions } from '@ionic-native/push/ngx';
13 |
14 | import { HttpClientModule } from '@angular/common/http';
15 |
16 | import { Firebase } from '@ionic-native/firebase/ngx';
17 |
18 | import { IonicStorageModule } from '@ionic/storage';
19 | import { Device } from '@ionic-native/device/ngx';
20 |
21 | @NgModule({
22 | declarations: [AppComponent],
23 | entryComponents: [],
24 | imports: [BrowserModule,
25 | IonicModule.forRoot(),
26 | AppRoutingModule,
27 | HttpClientModule,
28 | IonicStorageModule.forRoot()
29 | ],
30 | providers: [Push,Firebase,Device,
31 | StatusBar,
32 | SplashScreen,
33 | { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
34 | ],
35 | bootstrap: [AppComponent]
36 | })
37 | export class AppModule {}
38 |
--------------------------------------------------------------------------------
/push-notification-android-example/app/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IonicModule } from '@ionic/angular';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 |
7 | import { HomePage } from './home.page';
8 |
9 | @NgModule({
10 | imports: [
11 | CommonModule,
12 | FormsModule,
13 | IonicModule,
14 | RouterModule.forChild([
15 | {
16 | path: '',
17 | component: HomePage
18 | }
19 | ])
20 | ],
21 | declarations: [HomePage]
22 | })
23 | export class HomePageModule {}
24 |
--------------------------------------------------------------------------------
/push-notification-android-example/app/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Push Notification Example
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Notification Title
13 |
14 |
15 |
16 |
17 | Notification Message
18 |
19 |
20 |
21 | Send Message
22 |
23 | Reset
24 |
25 |
26 |
--------------------------------------------------------------------------------
/push-notification-android-example/app/home/home.page.scss:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/push-notification-android-example/app/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/push-notification-android-example/app/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HttpClient } from '@angular/common/http';
3 | import { Storage } from '@ionic/storage';
4 | import { LoadingController } from '@ionic/angular';
5 | import { AlertController } from '@ionic/angular';
6 | import { Device } from '@ionic-native/device/ngx';
7 | import { Title } from '@angular/platform-browser';
8 |
9 | @Component({
10 | selector: 'app-home',
11 | templateUrl: 'home.page.html',
12 | styleUrls: ['home.page.scss'],
13 | })
14 | export class HomePage {
15 |
16 | title:any='Welcome to Ampersand Academy'
17 | message:any='Hello, Welcome to Ampersand Academy. You can test push notification using this app'
18 |
19 | constructor(public alertController: AlertController,
20 | private http:HttpClient,private storage: Storage,
21 | public loadingController: LoadingController,private device:Device)
22 | {
23 |
24 | }
25 |
26 | reset()
27 | {
28 | this.title=''
29 | this.message=''
30 | }
31 | async sendNotification()
32 | {
33 | let token= await this.storage.get('token').then((token) => {
34 | return token
35 | })
36 | //alert(token)
37 | let ua='model:'+this.device.model+',platform:'+this.device.model+',version:'+this.device.version+',manufacturer:'+this.device.manufacturer
38 |
39 | //change to ur own url
40 | let url="https://localhost/ionic/push/send-notification.php";
41 |
42 | let params="?title="+this.title+"&message="+this.message+"&ua="+ua+"&token="+token;
43 | //alert(url+params)
44 | await this.http.get(url+params).subscribe((response) => {
45 | console.log(response);
46 | //alert(JSON.stringify(response))
47 | });
48 | this.showAlert()
49 |
50 | }
51 |
52 | async showAlert()
53 | {
54 | const alert = await this.alertController.create({
55 | header: 'Success',
56 | message: 'Notification sent to your device. Please wait for sometime, the notification will appear on your device.',
57 | buttons: ['OK']
58 | });
59 |
60 | await alert.present();
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/push-notification-android-example/sc1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/push-notification-android-example/sc1.jpg
--------------------------------------------------------------------------------
/push-notification-android-example/sc2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/push-notification-android-example/sc2.jpg
--------------------------------------------------------------------------------
/sample-login-ui-example/README.md:
--------------------------------------------------------------------------------
1 | ## Ionic 4 Sample Login and Register Screen
2 |
3 | This is free UI for Login and Register for Ionic 4 framework. We try to bring more themes in future. Please give us a star, if you really like our work. Keep visit this repo to get more updates.
4 |
5 | ## Preview of Login Screen
6 |
7 | 
8 |
9 |
10 |
11 | ## Preview of Register Screen
12 |
13 |
14 | 
15 |
16 |
17 |
18 | ## Setup Instructions:
19 |
20 | You download the home folder and paste the files to desired location. It will work fine.
21 | You can modify these colors by modifying scss file.
22 |
23 |
24 | ## Tags for this Login and Register Screen
25 |
26 | 1. Ionic 4 login and register page design
27 | 2. Ionic login and registe page code
28 | 3. Ionic login and registe page template free
29 | 4. Ionic 4 login and registe page example
30 | 5. How to create login and registe page in ionic framework
31 | 6. Ionic 4 login and registe page github
32 | 7. Ionic login and registe authentication
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/sample-login-ui-example/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IonicModule } from '@ionic/angular';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 | import { IonTextAvatar } from 'ionic-text-avatar';
7 |
8 | import { HomePage } from './home.page';
9 | import { AvatarComponent } from '../components/avatar/avatar.component';
10 |
11 | @NgModule({
12 | imports: [
13 | CommonModule,
14 | FormsModule,
15 | IonicModule,
16 | RouterModule.forChild([
17 | {
18 | path: '',
19 | component: HomePage
20 | }
21 | ])
22 | ],
23 | declarations: [HomePage,AvatarComponent]
24 | })
25 | export class HomePageModule {}
26 |
--------------------------------------------------------------------------------
/sample-login-ui-example/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Login
7 |
8 |
9 | Register
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Email
19 |
20 |
21 |
22 | Username
23 |
24 |
25 |
26 | Password
27 |
28 |
29 |
30 |
31 | Register
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Email
43 |
44 |
45 |
46 |
47 | Password
48 |
49 |
50 |
51 |
52 | Login
53 |
54 |
55 |
56 |
57 |
58 | Login with Facebook
59 |
60 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/sample-login-ui-example/home/home.page.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | .bg{
4 | --background: #1a3352 !important;
5 | --box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(244,67,54,.4) !important;
6 | }
7 |
8 | .theme-color
9 | {
10 | color:#7ad0a4
11 | }
12 |
13 | ion-input{
14 | font-weight: bold;
15 | }
--------------------------------------------------------------------------------
/sample-login-ui-example/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/sample-login-ui-example/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 |
4 |
5 | @Component({
6 | selector: 'app-home',
7 | templateUrl: 'home.page.html',
8 | styleUrls: ['home.page.scss'],
9 | })
10 | export class HomePage {
11 |
12 | login=true
13 | register=false
14 | loginStyle="light"
15 | regStyle="primary"
16 | pressLogin()
17 | {
18 | this.login=true
19 | this.loginStyle="light"
20 | this.register=false
21 | this.regStyle="primary"
22 | }
23 |
24 | pressRegister()
25 | {
26 | this.login=false
27 | this.loginStyle="primary"
28 | this.register=true
29 | this.regStyle="light"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/sample-login-ui-example/sc1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/sample-login-ui-example/sc1.png
--------------------------------------------------------------------------------
/sample-login-ui-example/sc2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/sample-login-ui-example/sc2.png
--------------------------------------------------------------------------------
/slides-example/README.md:
--------------------------------------------------------------------------------
1 | ## Ionic 4 Slides Example
2 |
3 | This repo contains source code for the Ionic 4 Slides with sample implementation of the slide.
4 |
5 | ## Preview of Browser
6 |
7 |
8 |
9 | 
10 |
11 |
12 |
13 |
14 | 
15 |
16 |
17 |
18 |
19 | 
20 |
21 |
22 |
23 |
24 | 
25 |
26 |
--------------------------------------------------------------------------------
/slides-example/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IonicModule } from '@ionic/angular';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 | import { IonTextAvatar } from 'ionic-text-avatar';
7 |
8 | import { HomePage } from './home.page';
9 | import { AvatarComponent } from '../components/avatar/avatar.component';
10 | import { CalendarComponent } from '../components/calendar/calendar.component';
11 | import { CalendarModule } from 'ion2-calendar';
12 |
13 | @NgModule({
14 | imports: [
15 | CalendarModule,
16 | CommonModule,
17 | FormsModule,
18 | IonicModule,
19 | RouterModule.forChild([
20 | {
21 | path: '',
22 | component: HomePage
23 | }
24 | ])
25 | ],
26 | declarations: [HomePage,AvatarComponent,CalendarComponent]
27 | })
28 | export class HomePageModule {}
29 |
--------------------------------------------------------------------------------
/slides-example/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Slides Example
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | ![]()
14 |
15 |
16 |
17 |
18 |
19 |
20 | 
21 | Ready to Play?
22 |
23 | Continue
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/slides-example/home/home.page.scss:
--------------------------------------------------------------------------------
1 | ion-slide {
2 | flex-direction: column;
3 | }
4 |
5 | ion-img {
6 | max-width: 50vw;
7 | max-height: 50vh;
8 | overflow: hidden;
9 | }
--------------------------------------------------------------------------------
/slides-example/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/slides-example/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-home',
5 | templateUrl: 'home.page.html',
6 | styleUrls: ['home.page.scss'],
7 | })
8 | export class HomePage {
9 |
10 | slides = [
11 | {
12 | title: "Welcome to the Docs!",
13 | description: "The Ionic Component Documentation showcases a number of useful components that are included out of the box with Ionic.",
14 | image: "https://ionicframework.com/docs/v3/dist/preview-app/www/assets/img/ica-slidebox-img-1.png",
15 | },
16 | {
17 | title: "What is Ionic?",
18 | description: "Ionic Framework is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.",
19 | image: "https://ionicframework.com/docs/v3/dist/preview-app/www/assets/img/ica-slidebox-img-2.png",
20 | },
21 | {
22 | title: "What is Ionic Cloud?",
23 | description: "The Ionic Cloud is a cloud platform for managing and scaling Ionic apps with integrated services like push notifications, native builds, user auth, and live updating.",
24 | image: "https://ionicframework.com/docs/v3/dist/preview-app/www/assets/img/ica-slidebox-img-3.png",
25 | }
26 | ];
27 | }
28 |
--------------------------------------------------------------------------------
/slides-example/screenshot/sc1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/slides-example/screenshot/sc1.png
--------------------------------------------------------------------------------
/slides-example/screenshot/sc2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/slides-example/screenshot/sc2.png
--------------------------------------------------------------------------------
/slides-example/screenshot/sc3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/slides-example/screenshot/sc3.png
--------------------------------------------------------------------------------
/slides-example/screenshot/sc4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/slides-example/screenshot/sc4.png
--------------------------------------------------------------------------------
/tabs-example/README.md:
--------------------------------------------------------------------------------
1 | ## Ionic 4 Tabs Example With Login Screen
2 |
3 | Hi, the below link contains tutorial for the Ionic 4 tabs from scratch. If you find difficult to implement the tabs in Ionic 4, then this link will be very helpful.
4 |
5 | https://ampersandacademy.com/tutorials/ionic-framework-4/ionic-4-tabs-example-from-scratch-step-by-step-tutorial
6 |
7 | Preview of Browser.
8 |
9 | 
10 | 
11 |
12 |
13 |
14 | ## Downnload APK
15 |
16 | Get the APK and test it on your Android Device.
17 |
18 | APK
19 |
20 | Tested Device:
21 | Moto G4 Plus
22 |
23 | You can download this apk and test it on your device. This apk is not harmful and it is not stealing any info.
24 | If you wanna try, please download install on your device. And you can try this without any worries.
25 |
--------------------------------------------------------------------------------
/tabs-example/app-debug.apk:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/tabs-example/app-debug.apk
--------------------------------------------------------------------------------
/tabs-example/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
3 |
4 | const routes: Routes = [
5 | { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
6 | { path: '', loadChildren: './home/home.module#HomePageModule' }
7 | ];
8 | @NgModule({
9 | imports: [
10 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
11 | ],
12 | exports: [RouterModule]
13 | })
14 | export class AppRoutingModule {}
15 |
--------------------------------------------------------------------------------
/tabs-example/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/tabs-example/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { TestBed, async } from '@angular/core/testing';
3 |
4 | import { Platform } from '@ionic/angular';
5 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
6 | import { StatusBar } from '@ionic-native/status-bar/ngx';
7 |
8 | import { AppComponent } from './app.component';
9 |
10 | describe('AppComponent', () => {
11 |
12 | let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
13 |
14 | beforeEach(async(() => {
15 | statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
16 | splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
17 | platformReadySpy = Promise.resolve();
18 | platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
19 |
20 | TestBed.configureTestingModule({
21 | declarations: [AppComponent],
22 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
23 | providers: [
24 | { provide: StatusBar, useValue: statusBarSpy },
25 | { provide: SplashScreen, useValue: splashScreenSpy },
26 | { provide: Platform, useValue: platformSpy },
27 | ],
28 | }).compileComponents();
29 | }));
30 |
31 | it('should create the app', () => {
32 | const fixture = TestBed.createComponent(AppComponent);
33 | const app = fixture.debugElement.componentInstance;
34 | expect(app).toBeTruthy();
35 | });
36 |
37 | it('should initialize the app', async () => {
38 | TestBed.createComponent(AppComponent);
39 | expect(platformSpy.ready).toHaveBeenCalled();
40 | await platformReadySpy;
41 | expect(statusBarSpy.styleDefault).toHaveBeenCalled();
42 | expect(splashScreenSpy.hide).toHaveBeenCalled();
43 | });
44 |
45 | // TODO: add more tests!
46 |
47 | });
48 |
--------------------------------------------------------------------------------
/tabs-example/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { Platform } from '@ionic/angular';
4 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
5 | import { StatusBar } from '@ionic-native/status-bar/ngx';
6 |
7 | @Component({
8 | selector: 'app-root',
9 | templateUrl: 'app.component.html'
10 | })
11 | export class AppComponent {
12 | constructor(
13 | private platform: Platform,
14 | private splashScreen: SplashScreen,
15 | private statusBar: StatusBar
16 | ) {
17 | this.initializeApp();
18 | }
19 |
20 | initializeApp() {
21 | this.platform.ready().then(() => {
22 | this.statusBar.styleDefault();
23 | this.splashScreen.hide();
24 | });
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/tabs-example/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { RouteReuseStrategy } from '@angular/router';
4 |
5 | import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
6 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
7 | import { StatusBar } from '@ionic-native/status-bar/ngx';
8 |
9 | import { AppRoutingModule } from './app-routing.module';
10 | import { AppComponent } from './app.component';
11 |
12 | @NgModule({
13 | declarations: [AppComponent],
14 | entryComponents: [],
15 | imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
16 | providers: [
17 | StatusBar,
18 | SplashScreen,
19 | { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
20 | ],
21 | bootstrap: [AppComponent]
22 | })
23 | export class AppModule {}
24 |
--------------------------------------------------------------------------------
/tabs-example/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 | import { Routes, RouterModule } from '@angular/router';
5 |
6 | import { IonicModule } from '@ionic/angular';
7 |
8 | import { HomePage } from './home.page';
9 |
10 | const routes: Routes = [
11 | {
12 | path: '',
13 | component: HomePage
14 | }
15 | ];
16 |
17 | @NgModule({
18 | imports: [
19 | CommonModule,
20 | FormsModule,
21 | IonicModule,
22 | RouterModule.forChild(routes)
23 | ],
24 | declarations: [HomePage]
25 | })
26 | export class HomePageModule {}
27 |
--------------------------------------------------------------------------------
/tabs-example/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | home
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Username
12 |
13 |
14 |
15 |
16 | Password
17 |
18 |
19 |
20 |
21 | Login
22 |
23 |
--------------------------------------------------------------------------------
/tabs-example/home/home.page.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/tabs-example/home/home.page.scss
--------------------------------------------------------------------------------
/tabs-example/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/tabs-example/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-home',
5 | templateUrl: './home.page.html',
6 | styleUrls: ['./home.page.scss'],
7 | })
8 | export class HomePage implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/tabs-example/sc1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/tabs-example/sc1.png
--------------------------------------------------------------------------------
/tabs-example/sc2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/tabs-example/sc2.png
--------------------------------------------------------------------------------
/tabs-example/sc4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bharathirajatut/ionic4/8e83c48acebee4c942da844c97cb60b1e879c7ed/tabs-example/sc4.png
--------------------------------------------------------------------------------
/tabs-example/tab1/tab1.module.ts:
--------------------------------------------------------------------------------
1 | import { IonicModule } from '@ionic/angular';
2 | import { RouterModule } from '@angular/router';
3 | import { NgModule } from '@angular/core';
4 | import { CommonModule } from '@angular/common';
5 | import { FormsModule } from '@angular/forms';
6 | import { Tab1Page } from './tab1.page';
7 |
8 | @NgModule({
9 | imports: [
10 | IonicModule,
11 | CommonModule,
12 | FormsModule,
13 | RouterModule.forChild([{ path: '', component: Tab1Page }])
14 | ],
15 | declarations: [Tab1Page]
16 | })
17 | export class Tab1PageModule {}
18 |
--------------------------------------------------------------------------------
/tabs-example/tab1/tab1.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Tab One
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Get Started
14 | Welcome to Ionic
15 |
16 |
17 | Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.
18 |
19 |
20 |
21 |
22 | Resources
23 |
24 |
25 |
26 | Ionic Documentation
27 |
28 |
29 |
30 | Scaffold Out Your App
31 |
32 |
33 |
34 | Change Your App Layout
35 |
36 |
37 |
38 | Theme Your App
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/tabs-example/tab1/tab1.page.scss:
--------------------------------------------------------------------------------
1 | .welcome-card ion-img {
2 | max-height: 35vh;
3 | overflow: hidden;
4 | }
5 |
--------------------------------------------------------------------------------
/tabs-example/tab1/tab1.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { Tab1Page } from './tab1.page';
5 |
6 | describe('Tab1Page', () => {
7 | let component: Tab1Page;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [Tab1Page],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | }).compileComponents();
15 | }));
16 |
17 | beforeEach(() => {
18 | fixture = TestBed.createComponent(Tab1Page);
19 | component = fixture.componentInstance;
20 | fixture.detectChanges();
21 | });
22 |
23 | it('should create', () => {
24 | expect(component).toBeTruthy();
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/tabs-example/tab1/tab1.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-tab1',
5 | templateUrl: 'tab1.page.html',
6 | styleUrls: ['tab1.page.scss']
7 | })
8 | export class Tab1Page {}
9 |
--------------------------------------------------------------------------------
/tabs-example/tab2/tab2.module.ts:
--------------------------------------------------------------------------------
1 | import { IonicModule } from '@ionic/angular';
2 | import { RouterModule } from '@angular/router';
3 | import { NgModule } from '@angular/core';
4 | import { CommonModule } from '@angular/common';
5 | import { FormsModule } from '@angular/forms';
6 | import { Tab2Page } from './tab2.page';
7 |
8 | @NgModule({
9 | imports: [
10 | IonicModule,
11 | CommonModule,
12 | FormsModule,
13 | RouterModule.forChild([{ path: '', component: Tab2Page }])
14 | ],
15 | declarations: [Tab2Page]
16 | })
17 | export class Tab2PageModule {}
18 |
--------------------------------------------------------------------------------
/tabs-example/tab2/tab2.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Tab Two
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/tabs-example/tab2/tab2.page.scss:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/tabs-example/tab2/tab2.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { Tab2Page } from './tab2.page';
5 |
6 | describe('Tab2Page', () => {
7 | let component: Tab2Page;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [Tab2Page],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | }).compileComponents();
15 | }));
16 |
17 | beforeEach(() => {
18 | fixture = TestBed.createComponent(Tab2Page);
19 | component = fixture.componentInstance;
20 | fixture.detectChanges();
21 | });
22 |
23 | it('should create', () => {
24 | expect(component).toBeTruthy();
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/tabs-example/tab2/tab2.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-tab2',
5 | templateUrl: 'tab2.page.html',
6 | styleUrls: ['tab2.page.scss']
7 | })
8 | export class Tab2Page {}
9 |
--------------------------------------------------------------------------------
/tabs-example/tab3/tab3.module.ts:
--------------------------------------------------------------------------------
1 | import { IonicModule } from '@ionic/angular';
2 | import { RouterModule } from '@angular/router';
3 | import { NgModule } from '@angular/core';
4 | import { CommonModule } from '@angular/common';
5 | import { FormsModule } from '@angular/forms';
6 | import { Tab3Page } from './tab3.page';
7 |
8 | @NgModule({
9 | imports: [
10 | IonicModule,
11 | CommonModule,
12 | FormsModule,
13 | RouterModule.forChild([{ path: '', component: Tab3Page }])
14 | ],
15 | declarations: [Tab3Page]
16 | })
17 | export class Tab3PageModule {}
18 |
--------------------------------------------------------------------------------
/tabs-example/tab3/tab3.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Tab Three
5 |
6 |
7 |
8 |
9 |
10 | Logout
11 |
12 |
--------------------------------------------------------------------------------
/tabs-example/tab3/tab3.page.scss:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/tabs-example/tab3/tab3.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { Tab3Page } from './tab3.page';
5 |
6 | describe('Tab3Page', () => {
7 | let component: Tab3Page;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [Tab3Page],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | }).compileComponents();
15 | }));
16 |
17 | beforeEach(() => {
18 | fixture = TestBed.createComponent(Tab3Page);
19 | component = fixture.componentInstance;
20 | fixture.detectChanges();
21 | });
22 |
23 | it('should create', () => {
24 | expect(component).toBeTruthy();
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/tabs-example/tab3/tab3.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-tab3',
5 | templateUrl: 'tab3.page.html',
6 | styleUrls: ['tab3.page.scss']
7 | })
8 | export class Tab3Page {}
9 |
--------------------------------------------------------------------------------
/tabs-example/tabs/tabs.module.ts:
--------------------------------------------------------------------------------
1 | import { IonicModule } from '@ionic/angular';
2 | import { NgModule } from '@angular/core';
3 | import { CommonModule } from '@angular/common';
4 | import { FormsModule } from '@angular/forms';
5 |
6 | import { TabsPageRoutingModule } from './tabs.router.module';
7 |
8 | import { TabsPage } from './tabs.page';
9 |
10 | @NgModule({
11 | imports: [
12 | IonicModule,
13 | CommonModule,
14 | FormsModule,
15 | TabsPageRoutingModule
16 | ],
17 | declarations: [TabsPage]
18 | })
19 | export class TabsPageModule {}
20 |
--------------------------------------------------------------------------------
/tabs-example/tabs/tabs.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tab One
7 |
8 |
9 |
10 |
11 | Tab Two
12 |
13 |
14 |
15 |
16 | Tab Three
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/tabs-example/tabs/tabs.page.scss:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/tabs-example/tabs/tabs.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { TabsPage } from './tabs.page';
5 |
6 | describe('TabsPage', () => {
7 | let component: TabsPage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [TabsPage],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | }).compileComponents();
15 | }));
16 |
17 | beforeEach(() => {
18 | fixture = TestBed.createComponent(TabsPage);
19 | component = fixture.componentInstance;
20 | fixture.detectChanges();
21 | });
22 |
23 | it('should create', () => {
24 | expect(component).toBeTruthy();
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/tabs-example/tabs/tabs.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-tabs',
5 | templateUrl: 'tabs.page.html',
6 | styleUrls: ['tabs.page.scss']
7 | })
8 | export class TabsPage {}
9 |
--------------------------------------------------------------------------------
/tabs-example/tabs/tabs.router.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 | import { TabsPage } from './tabs.page';
4 |
5 | const routes: Routes = [
6 | {
7 | path: 'tabs',
8 | component: TabsPage,
9 | children: [
10 | {
11 | path: 'tab1',
12 | children: [
13 | {
14 | path: '',
15 | loadChildren: '../tab1/tab1.module#Tab1PageModule'
16 | }
17 | ]
18 | },
19 | {
20 | path: 'tab2',
21 | children: [
22 | {
23 | path: '',
24 | loadChildren: '../tab2/tab2.module#Tab2PageModule'
25 | }
26 | ]
27 | },
28 | {
29 | path: 'tab3',
30 | children: [
31 | {
32 | path: '',
33 | loadChildren: '../tab3/tab3.module#Tab3PageModule'
34 | }
35 | ]
36 | },
37 | {
38 | path: '',
39 | redirectTo: '/tabs/tab1',
40 | pathMatch: 'full'
41 | }
42 | ]
43 | },
44 | {
45 | path: '',
46 | redirectTo: '/tabs/tabs/tab1',
47 | pathMatch: 'full'
48 | }
49 | ];
50 |
51 | @NgModule({
52 | imports: [
53 | RouterModule.forChild(routes)
54 | ],
55 | exports: [RouterModule]
56 | })
57 | export class TabsPageRoutingModule {}
58 |
--------------------------------------------------------------------------------
14 | 
15 | 
16 |
17 | At Ampersand Academy, I am giving Ionic 4 training. If you are interested to join, Please visit the below link.
18 | https://ampersandacademy.com/contact-ampersand-academy-chennai.html
19 |
20 | ## Download Ionic 4Curriculum
21 |
22 | https://ampersandacademy.com/course/ionic-4-framework-training.html
23 |
24 | ## What we offer in Ampersand Academy
25 | At Ampersand Academy, we offer a comprehensive course on Ionic Framework 4. There is no prerequisite for joining this course. Following are the various high-level topics that are covered as part of the syllabus. Ampersand Academy’s Ionic 4 Framework course includes the following.
26 | 1. Ionic 4 Framework
27 | 2. Angular
28 | 3. Native Plugins
29 | 4. Projects
30 |
31 | ## Ionic 4 Tutorials and Source Code Links
32 |
33 | 1. Install Ionic 4 on Windows
35 | 2. Camera plugin Example
36 | 3. Image Upload using PHP
37 | 4. Image Picker Example
38 | 5. Tabs Example
39 | 6. Phonegap Push Notification Example
40 | 7. Ionic 4 Modal Page Example
41 | 8. HTTP REST API GET Method Example Using Random User API
42 | 9. Ionic 4 Angular - How to process the JSON Object/Array?
43 | 10. Sample Login and Register Screen UI
44 | 11. Ionic 4 Geolocation Tutorial using Geolocation Plugin
45 | 12. Ionic 4 Location Accuracy Plugin Example ( Programmatically enable location using Ionic)
46 | 13. Ionic 4 Calendar UI Example 1
47 | 14. Ionic 4 Slides Example
48 | 15. Ionic 4 Infinite Scroll Example
49 | 16. Ionic 4 Google Map Example using Native Plugin
50 | 17. Ionic 4 Get Device Information
51 |
52 | 18. Add to cart using plain TS
53 | 19. Cart - CRUD Example(PHP,MySQL Full Source Code)
54 |
55 | ## APK
56 | I thought to share the apk of Ionic example, which is written by me. So in each topic, i will share the apk. You can download and try it on your device. It is not harmful. If you want to know how the code works before trying by yourself, you can install these APK's. It is not stealing any info from your device. If any information is capture by any of these apk and i will let you know what are the information it records, if you install the apk.
57 |
58 | ## Get All Ionic 4 Tutorials
59 |
60 | Ionic 4 Tutorials
61 |
62 | ## Ionic 3 Tutorials
63 |
64 | Yo can Ionic 3 related tutorial using the below links.
65 | 1. https://github.com/bharathirajatut/ionic3
66 | 2. https://ampersandacademy.com/tutorials/ionic-framework-3
67 |
--------------------------------------------------------------------------------
/camera-example/README.md:
--------------------------------------------------------------------------------
1 | Hi,
2 |
3 | Get the tutorial of Ionic 4 camera using the below link.
4 |
5 | https://ampersandacademy.com/tutorials/ionic-framework-4/ionic-4-camera-plugin-example
6 |
7 | Preview of iOS.
8 |
9 | Coming soon.
10 |
11 | Preview of Android.
12 | 
10 | 
11 | 
8 | 
10 | 
11 | 
12 | -example/screenshot.jpg)
10 | 
10 | 
16 |
17 | ### Refresh Button
18 |
19 | In the above example, you can click the refresh button, which loads new random users information for each and every request.
20 |
21 | ### PHP REST API
22 |
23 | If you want to create your own REST API using PHP, then visit the below link.
24 |
25 | https://www.codeofaninja.com/2017/02/create-simple-rest-api-in-php.html
26 |
27 | It is really Step By Step Guide.
28 |
29 | ### Python Flask REST API
30 |
31 | 1. https://ampersandacademy.com/tutorials/flask-framework/flask-framework-json-example
32 | 2. https://ampersandacademy.com/tutorials/flask-framework
33 |
34 | The above links are useful for beginer level. Soon, i will put more tutorial to develop more robust REST API from scratch.
35 |
--------------------------------------------------------------------------------
/http-rest-api-get-method-example-random-users/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IonicModule } from '@ionic/angular';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 | import { IonTextAvatar } from 'ionic-text-avatar';
7 |
8 | import { HomePage } from './home.page';
9 | import { AvatarComponent } from '../components/avatar/avatar.component';
10 |
11 | @NgModule({
12 | imports: [
13 | CommonModule,
14 | FormsModule,
15 | IonicModule,
16 | RouterModule.forChild([
17 | {
18 | path: '',
19 | component: HomePage
20 | }
21 | ])
22 | ],
23 | declarations: [HomePage,AvatarComponent]
24 | })
25 | export class HomePageModule {}
26 |
--------------------------------------------------------------------------------
/http-rest-api-get-method-example-random-users/home/home.page.html:
--------------------------------------------------------------------------------
1 |