Up and Running With Ionic 3 in 15 Minutes

[@paulhalliday]

Nearly 1,000 subscribers! I can smell a "FIRE" in my "BASE" soon. Can anyone else? Thanks to the Patreon supporters!

[@3mro_coding]

Paul Halliday thank you for your useful tutorials and am sure tech magazines are gonna package this videos soon as free DVD gift with their weekly or Monthly publications. you are in the right path keep it up.

[@tubo-ibimbraide4195]

I am quite new to ionic and I am trying to develop a todo application in ionic version 3.9. I tried creating a fab button which would lead me to a “ArchiveTodos” Page, but each time I click on the fab button I get this result: Error Close Runtime Error _co.gotoArchivePage is not a function Stack TypeError: _co.gotoArchivePage is not a function at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:152:31) at handleEvent (localhost:8100/build/vendor.js:13963:155) at callWithDebugContext (localhost:8100/build/vendor.js:15472:42) at Object.debugHandleEvent [as handleEvent] (localhost:8100/build/vendor.js:15059:12) at dispatchEvent (localhost:8100/build/vendor.js:10378:25) at localhost:8100/build/vendor.js:11003:38 at HTMLButtonElement. (localhost:8100/build/vendor.js:39492:53) at t.invokeTask (localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (localhost:8100/build/vendor.js:5125:33) at t.invokeTask (localhost:8100/build/polyfills.js:3:15581) Ionic Framework: 3.9.2 Ionic App Scripts: 3.1.11 Angular Core: 5.2.11 Angular Compiler CLI: 5.2.11 Node: 8.9.3 OS Platform: Windows 10 Navigator Platform: Win32 User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68... Safari/537.36 HERE IS MY home.ts CODE: import { Component } from ‘@angular/core’; import { NavController, AlertController, reorderArray } from ‘ionic-angular’; import { TodoProvider } from “…/…/providers/todo/todo”; import { ArchivedTodosPage } from “…/archived-todos/archived-todos”; @Component({ selector: ‘page-home’, templateUrl: ‘home.html’ }) export class HomePage { public todos = []; public reorderIsEnabled = false; constructor(private todoProvider: TodoProvider, public navCtrl: NavController, private alertController : AlertController, public archivedtodosPage : ArchivedTodosPage) { this.todos = this.todoProvider.getTodos(); } goToArchivePage(){ this.navCtrl.push(ArchivedTodosPage); } toggleReorder(){ this.reorderIsEnabled = !this.reorderIsEnabled; } itemReordered($event){ reorderArray(this.todos, $event); } openTodoAlert(){ let addTodoAlert = this.alertController.create({ title: “Add A Todo”, message: “Enter your Todo”, inputs: [ { type: “text”, name: “addTodoInput” } ], buttons: [ { text: “Cancel” }, { text: “Add Todo”, handler: (inputData)=> { let todoText; todoText = inputData.addTodoInput; this.todoProvider.addTodo(todoText); } } ] }); addTodoAlert.present(); } } HERE IS MY home.html CODE: the Real Todo Edit Done {{todo}} HERE IS MY app.module.ts CODE: import { BrowserModule } from ‘@angular/platform-browser’; import { ErrorHandler, NgModule } from ‘@angular/core’; import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’; import { SplashScreen } from ‘@ionic-native/splash-screen’; import { StatusBar } from ‘@ionic-native/status-bar’; import { MyApp } from ‘./app.component’; import { HomePage } from ‘…/pages/home/home’; import { TodoProvider } from “…/providers/todo/todo”; import { HttpClientModule } from ‘@angular/common/http’; import { ArchivedTodosPage } from “…/pages/archived-todos/archived-todos”; @NgModule({ declarations: [ MyApp, HomePage, ArchivedTodosPage ], imports: [ HttpClientModule, BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, ArchivedTodosPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, TodoProvider ] }) export class AppModule {} HERE IS MY app.component.ts CODE: import { Component } from ‘@angular/core’; import { Platform } from ‘ionic-angular’; import { StatusBar } from ‘@ionic-native/status-bar’; import { SplashScreen } from ‘@ionic-native/splash-screen’; import { ArchivedTodosPage } from “…/pages/archived-todos/archived-todos”; import { HomePage } from ‘…/pages/home/home’; @Component({ templateUrl: ‘app.html’ }) export class MyApp { rootPage:any = HomePage; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault(); splashScreen.hide(); }); } }

[@shaggy6700]

You are best youtuber rn always looking forward to your daily videos thank you!

[@paulhalliday]

+Sagaya Abdul Thanks Sagaya! :)

[@samwd5039]

New subscriber here, Paul i was wondering if you could do most demanded 3 tutorials that alot of people encounters 1) Connecting ionic app to your Android or iOS phone step by step 2) Creating executable file for iOs and uploading to phone 3) last but not the least when running ionic of emulator people get alot of problems, in my case i always encounter different problems, if you could run through the check list would be great i think it would benefits everyone, not one has done these before and you have alot of subscribers too. Cheers

[@jorn-jorenjorenson5028]

Many thanks, great tutorial! I've been struggling several nights getting all together and all the time at least something did not work. Watching this, it took me half an hour to build my 1st apk. Liked and subscribed : )

[@paulhalliday]

Awesome! That makes me happy to know it helped. :) Don't forget I've got a "Learn Ionic 3 From Scratch" course that is currently available at a discount as it's in early access! This may be useful for you. www.udemy.com/learn-ionic-3-from-scratch/?couponCode=LEARNIONIC3

[@jorn-jorenjorenson5028]

Checked it out, will sign up for the course. : )

[@paulhalliday]

Thanks for making the purchase! It's still a work in progress with it being in early access, but similar to the KZbin channel, lectures and content is added daily. Paul

[@johnk1086]

Brilliant, great job covering some of the smaller but important details.

[@paulhalliday]

+John K Thanks John.

[@deannawagner2320]

Thanks. I am surprised you don't address Linux users in your instructions, since many developers use it. Cheers!

[@osarogiuwaigiebor5468]

hi, can you possibly do a video on ionic3 native Calendar like creating Calendar events that can store info on the mobile native Calendar? thanks in advance

[@djika100]

Hello Thank for the course. I want to open et specific pdf document in ionic (assets/pdf/leson.pdf) but I never do It, to add a serch button, Bookmark. Thank for your help.

[@samuelhuang7309]

thank you for your amazing tutorials, its really very helpful!

[@SangeetaDevi-pz7ln]

Hello Sir, Can u please upload some samples on using datatables in ionic 3

[@ruiandrade8879]

Paul ! I have no doubt your are the best!

[@paulhalliday]

You're too kind! Thanks for the support, it means a lot.

[@ajinkyax]

thanks for the video. BUT the audio volume is bit low

[@SiddharthRay1]

Thank you so much Paul

[@paulhalliday]

+Siddharth Ray Thanks for watching! :)

[@hotmodi]

Hi Paul. Can you make a tuts about the camera preview plugin?

[@paulhalliday]

Will do Mohammed!

[@hotmodi]

Great :) Have been trying to get it to work, but no luck so far. So would appreciate it much!

[@yassir-amzel]

in project of ionic 2 when run in the smartphone the botton not run :( i will check....

[@goku1502]

Hi Paul! great tutorials ! please can you make one about BackgroundGeolocation ? In advance many many thanks!!!

[@paulhalliday]

Hi Emir, I have a Geolocation video within my Ionic Native course: paulhalliday.io/p/master-ionic-3-with-ionic-native-and-cordova-integrations :)

[@goku1502]

Paul Halliday Yes, thanks. I have watched some tutorials about that plugin. But I refer to the plugin: Background Geolocation. ionicframework.com/docs/native/background-geolocation/ I'm thinking on take your Ionic's course there are really interesting. Thanks!

[@paulhalliday]

Emir A. Bosques R. Gotcha. Misread the comment, I'll look at adding BackgroundGeolocation to that course. :)

[@goku1502]

Paul Halliday Oh thanks! Amazing! Dude. could you inform me when this chapter be ready? you'll put only on the course content or in your KZbin channel too? Thanks

[@katef93]

Very thorough! :)

[@SurinderSingh-ue9ft]

Hello Sir, which version of visual studio you are using? Thanks

[@paulhalliday]

I use VS Code for all of my editing. I even tend to use it with my C# projects now!

[@SurinderSingh-ue9ft]

Thanks Paul for quick reply. I installed VS code and its really great.

[@paulhalliday]

Surinder Singh Awesome. It's my favourite editor too. :)

[@vishalnagpure8051]

how do I reload ionic application

[@lalitkumar2432]

After running apk in android its show the white blank screen and app closed after 2-3 seconds plzz help

[@paulhalliday]

Hi Lalit, I offer assistance and code reviews at Patreon: www.patreon.com/PaulHalliday Paul

[@jeremyflowers8908]

@9:32: brew install android-sdk is a bad idea if you use Cordova. I burnt thru 2 days figuring out stuff based on that comment, and Google recommending Android Studio.... See my answer here stackoverflow.com/questions/42667277/cordova-phonegap-android-target-not-installed-android-studio-installed/43565291#43565291

[@awani-choayb]

this in not ionic3 version ...

[@CariagaXIII]

ionic cordova platform add android to add the android platform

[@kakerake6018]

THIS WASNT 15 MINS THIS WAS 15 SECONDS OVERTIME COMPLETE WASTE OF MY TIME!!

[@palakondarayuduuppu6420]

this is not ionic 3 beware of it users.