Create an Animated App Onboard with Ionic 3 & Angular 4

[@mehdiSupp]

Images don't show up on Android because ionic changes the project structure after the build.
stackoverflow.com/a/42830859/1399416

[@srikanthchitturi2206]

We can use ionic slides also for the same. But any ways thanks for this.

[@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();
});
}
}

[@arrietowski]

Great video, worked fine with: {
"@angular/animations": "^6.0.2",
"@angular/common": "5.2.10",
"@ionic-native/core": "4.7.0",
}

[@NovusRider]

can i get the code for this?

[@noumankhan2715]

Can you please move this video under ionic playlist ? that will be more helpful while searching as i have subscribe your channel i was assuming this video under that playlist.

[@moracabanas]

Hi, first, this is the most easy way i found to intro to ionic development. So many thanks. My problem is no icons are shown on "

[@m4tt72]

Using pages lazy loading is better/faster. AND you don't have to import the pages in app.module

[@hitrends3427]

FYI, to use images in .scss file:
background: url('../../assets/img/whitebg.svg') no-repeat;

[@jacksonsanga2668]

can we use this on ionic react

[@The5starSTUNNNA]

nice bro keeep it coming homeboy

[@arnauddumas1417]

Please how can I use Material design library with my ionic3/angular4 ? Need help

[@tylerwittman8138]

Works great in the simulator, not on the actual iOS device.

[@BradHellyar]

As of today your project no longer animates... something with angular 4 transitions not working in ionic 3...any insight on this would be great...but test I will also search the webs for answers....

[@DesignCourse]

I'll look into it.

[@BradHellyar]

got the transitions to work by adding the 'transition' property to the element in the .scss ...not sure if it is now just doing simple css transitions but it still adheres to trigger properties set by angular...

[@izzul1231]

The only problem with this tutorial is when u set the size in the home.scss its best if u follow and edit abit of his to get a perfect fit if now the icon will be shown at the bottom .

[@eddyecko94]

Nice video, considering doing some of your courses also. Great job

[@AnderFontana]

6:40 try this path in your .scss '../assets/img/whitebg.svg'

[@yovanyrestrepo9961]

Great...How can I hide the scroll?

[@MsSplashIt]

great tutorial !!! keep it coming :-)

[@susanacervantes7238]

Nice I really like it but where did you get the "triangle", I mean can I change it? how?

[@shaqeeba5648]

Cannot find module '@angular/animations/browser'. how it can resolve

[@hirenpatelcr]

Use ionic 3. It works for me. and make sure you have imported ' import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; ' in ts file of page.

[@songlee8456]

Hey Design course, check programming studio on RUclips, they have a list of playlist full of pirated course. One of your premium course are there. I'm on my cell phone I can't send you the link. They have a bunch of udemy and other courses in their playlist. Yours, it's about building ionic 2 with material design... It has a call of duty on it

[@DesignCourse]

Thanks! I just reported them, along with submitting claims on both of those videos. I appreciate that!

[@songlee8456]

DesignCourse ...No problem. It's just a shame to see how some people have lost their moral code

[@lucassrt007]

How can I show the slide(intro page)
only once? I'm creating a webapp

[@YasirAli91]

stackoverflow.com/questions/50973103/show-tutorial-only-when-application-is-running-for-the-first-time-ionic-3

[@0xBurp]

What editor is that... i currently use atom.io but that looks nicer and slimmer

[@trippy.omr666]

Visual Studio Code

[@SiliceIO]

Very nice! thank you :)

[@sArangHaeOpPa00001]

thanks for this! very helpful! :)

[@younessesoft]

Great job man !!!!!!!!!!!!!!!!!!!!!!!!!

[@skimran22]

How can we achieve menu with sub menus in ionic 3

[@subayansengupta9437]

👏👏👏👏

[@md.fazlulkarim904]

keep it coming...

[@kayrajab5695]

really awesome tutorial :)

[@chandshantanu]

Great tut man

[@kamalsahmoud9909]

i guess it's better to use vh/vw than %

[@rssbasdf]

really awesome tutorial :)

[@kaushikmishra9384]

After couple of swiping I get this error
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'leftSwipe'. Current value: 'x'.

[@muzibrahman9053]

i got same problem, help please

[@stian.s]

Same here

[@MrOnlineEarn]

Same for me

[@huy_sophanna]

Same problem. To fix this, you have to import "ChangeDetectorRef" from @angular/core, then reference that with a variable in your constructor and then use that referenced variable to call detectChanges() method inside animationDone() method. It'll surely get fixed. This probably happens when we swipe way too fast. 😅 Amazing tutorial by the way 👍🏻

[@SandyUndefinedVlogs]

i have the same problem can u plzz elaborate it...

[@Chandasouk]

Do you and Vivz still collaborate?

[@DesignCourse]

Chandasouk no. He stopped developing for Android and is no longer a part of coursetro. He became focused on chatbots and other stuff.

[@0rlandissim0]

How do we convert it to apk and run it on the phone? :D

[@rudyhermawan9858]

with brain...

[@SanjunathS]

ionic cordova build android --prod --release
Use this command for make your app's apk file

[@kwanchaful]

ionicframework.com/docs/v1/guide/publishing.html

[@roycechua]

you actually need android studio for android along with the sdk tools and xcode for mac then read this run the commands ionicframework.com/docs/intro/installation/. Note: You may need to install cordova if you haven't done so.

[@adriannajera8013]

i have an error co.skip is not a function

[@adriannajera8013]

ah nevermind i fixed it

[@dounsdounzi9126]

hi bro, how did you fixed it i have the same error.
Thank you