Ionic 4 & Angular Tutorial For Beginners – Crash Course

hello thanks for the video but i think you jumped a lot of important parts.. e.g how do u convert the plain Budget planner Html page into a real working ionic app.. you just barely showed us how to use ionic components. but not converting our own html pages into a working a IONIC app..

none of above links are working in your description

Hi,
I have a query for you
Please help.

How to make a new ionic app with old versions of angular

For example current angular version is 14

But I wants to create an new ionic angular aap but I wants angular 13
(Because I wants to use some dependencies which currently are available for Angular 13 only)

How to create a new ionic angular app with mentioning angular version??

Thank you.

Hi great video, but I am getting error as" WebSocket connection to 'ws://localhost:8100/' failed: " what to do for this? Please help

Hi Guys, For those of you who couldn't get the delete(trash) button working for the Recipes app, the code below can be written in the "recipes.page.ts" to get it working:

ionViewWillEnter() {

this.recipes = this.recipesService.getAllRecipes();

}

Credits go to commenter @Mar, I read the comments and couldn't figure out how to do the ionViewWillEnter() or where to write the code, so when I figured it out, thought I should share it for any other people like me who are stuck on that part.

can u share the source code please

[object HTMLElement] : $ [object HTMLElement] im getting this value when returning that list-item how to solve it

Is the code in GitHub?

DELETION PROBLEM ?
it deletes the recipe-detail, but when you go back to recipe list, the item is still there? you go back to recipe-detail and still gone?
Solve this problem by not initiating the recipes array in recipe.page.ts inside the onInit() method, instad do it in ionViewWillEnte() like this:

ionViewWillEnter() {

this.recipes = this.recipeService.getAllRecipes();

}

Best tutorial!!!

🌏👍🇲🇨🍀🌏👍🇲🇨

all the ionic components have red squiggly lines in vscode…it shows "its not a known element". Anyone knows how to fix this?

I appreciate that you made so much of this excellent course free on YouTube, and that you didn't stop short on the actual deployment instructions.
As a thank you, I purchased the full course on Udemy 🙂

Keep it up!

Where can we find the source code for these projects?
PS: I loved your full dart course

size of the column means size of the content

hi tryihg to buy you Ionic 4 & angular from udemy but cant complete the payment. Is this course still available?

Thank you so much!!!

@3:15:57

The list is not updating on my end after delete.

But when i place “this.router.navigate” inside a setTimeout, this list gets updated in the view.

But how come this video was able to get updated list by just using “this.router.navigate” without setTimeout?

Simply Awesome.. You are really so good in knowledge and the way you teach is unparallel

this video helped me in installing the ionic framework and a basic web app. I watched it more than 3 times. It was quite helpful but he skipped the angular intro section and linked it with his Udemy paid course that was strange. If you are recording a video of almost 4 hours. You should give basic knowledge of Angular too. Not everyone knows angular. And not everyone can buy your course. If you are making a long long video please try to cover more content rather than just increasing your watch time. You should benefit your audience too if you are getting benefit from youtube with our watch time. There should be benefits on both sides.
And if you can't do that. Just change the title of the video. Make it an Ionic Tutorial for those who already know Angular. So, not everyone can waste their 4 hours like me if I was supposed to hear at the end of the video that this is for those who already know Angular.

what's up with the vs code i made no changes to the files, but it's showing red error but compiling successfully. Btw using ionic5

Thank a lot
Max!

If I wanted my app that I built with ionic to be able to access images from the phones images gallery and then upload them to the app so they can be sent to the server, would I need Cordova or capacitor for this?

Hi Max, thanks for your great lessons. I have a question, i have ejecuted "ionic capacitor run android -l" to see updates on android simulator in run time, and not work error = "error Running Gradle build – failed! [capacitor] ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH." please help me!!

May i know why i delete the other file in the ionic folder, it cant compile ? but yoou can ? and u apply the css class without put class="" , and its function ?

Absolutely awesome tutor!You are amazing,so clear and concise..I love your videos and never miss out!God bless you for sharing the excellent course 😊.
Sir

Omg dude the recipe, recipe, recipe, recipes goes over head.

00:00 Section 1 – Getting Started
02:29 Introduction to Ionic
04:09 Progressive Web Apps (PWAs)
05:20 Ionic Platform
10:14 Understanding the Ionic Ecosystem
11:22 An Ionic Project
14:41 Angular – Brief Introduction
18:40 Ionic Installation
20:48 npm install -g ionic : Global Installation of Ionic
21:50 ionic start : Start a simple ionic project
24:49 VSCode: IDE of choice
27:58 ion-button addition to simple ionic project
31:40 Ionic History
35:39 Ionic 3 vs Ionic 4+
38:47 Compiled or Web View?
41:00 What's a "WebView"?
42:30 Course Outline
49:00 How to get most out of the course?
51:56 Section 2 – Angular refresher [Skipped]
52:08 Section 3 – Working with Ionic Components
53:25 Core Building Blocks
57:52 Using the Ionic Components
1:00:15 How do Ionic 4 Web Components Work?
1:04:45 Simple Ionic app build with Ionic CDN
1:10:15 Basic Layout: Budget Planner
1:15:35 ion-content: Budget Planner
1:18:51 Core component types
1:21:20 ion-grid: Budget Planner
1:28:40 ion-icon: Budget Planner
1:34:33 app.js: Logic of Budget Planner using Vanilla JS
1:41:30 app.js: Rendering a dynamic List
1:46:35 app.js: Clear input
1:48:05 app.js: Total expenses
1:52:30 ion-alert: Why Angular over Vanilla JS?
1:58:11 Assignment: Course Rating
1:59:55 Assignment Solution: Course Rating
2:14:01 Why Angular?
2:17:48 Section 4 – Adding Angular (or any Framework)
2:27:57 Project Layout Walkthrough
2:33:57 @ionic/angular Wrapper
2:37:51 Simple ionic dummy app
2:39:27 recipes: Page generation
2:44:20 recipe: Model
2:49:20 recipes/recipe-detail: Page generation
2:52:30 recipes/recipes: Service
2:57:10 recipesService Injection into RecipesPage
2:58:50 recipesService Injection into RecipeDetailPage
3:03:12 recipe-detail.page.html Designing
3:07:24 Routing from recipe.page.html to recipe-detail.page.html
3:14:08 recipe: Deletion
3:17:26 ion-alert-controller: To alert before deletion
3:21:40 recipe-item: angular component
3:25:13 Angular Components & Ionic Components
3:27:27 Section 5 – Running the App on Mobile Devices
3:29:53 Android Development
3:35:55 Android Running with Capacitor
3:40:17 Android Live reload
3:42:28 iOS Development
3:49:49 iOS Live reload
3:52:43 Closing remarks

3:27:37

20:50 ionic set up
1:09:38

what is a difference between this tutorial and course on udemy? Looks like they have the same parts. Is udemy version is better?

I owe my career to this guy

in 1:55:35, it returned an error due to "create" method. The error said "Uncaught TypeError: alertCtrl.create is not a function". What should I do? Is it due to ionic latest version?

is the source code available by any chance?

This content is so good!

Hello from 2021

Useful course, but way too much water

thank you for creating such a great course

Please make a full course on GraphQL. The introductory part of the NodeJS course was a good one. Waiting for a full course.

12:32

Hi Max, I got struck at 2:56:26 getting an error over there,
Type 'Recipe' must have a '[Symbol.iterator]()' method that returns a iterator.
I searched on Google, everywhere it says spread operator is no longer supported and asked to use assign but I couldn't understand how should I use it.
Please help me

Excellent crash course 👌👌 Max is a great instructor, he is my personal favorite for technical courses, his Angular course on Udemy is awesome..

Lurnened

Thanks for this best tutorial…..can we expect fingerprint authentication using ionic angular?

From where the capacitor.config.json file come from??????

Max, I enrolled in your full-blown Ionic-Angular course and got a lot out of it. I'm thinking of converting one of our AngularJS apps to Ionic, but I had a few questions I'm hoping you could answer before I take the plunge.

1) Are you able to develop Ionic/Angular apps in Visual Studio 2019? My shop already uses this platform and I'd prefer to not introduce the VS Code platform unless it is required/really highly suggested. Assuming VS2019 is possible, what niceties from VSC would I be giving up?

2) Our back-end is written in C#.NET using SQL Server 2016 and I have to continue using these. Therefore, I'd like to keep the back-end code changes to a minimum while still being able to implement the Ionic/Angular/TS changes on the front-end. What are your recommendations here?

Again, really loved your course (I also went through your TypeScript course, as well) and really enjoyed your teaching style.

I havent learned Angular, Does it mean I won't understand ionic?

Damn you and all other programmers and programming languages. Fucking Nerds.

Is the code written in the video available somewhre like github ? Great tutorial btw 🙂

"Cannot determine which native SDK version your project uses because the module `expo` is not installed. Please install it with `yarn add expo` and try again." error