Compleated an ionic project for a client just by watching this video. You have saved my job and most of all you taught me a valuable skill. Thank you 🙏🙏
Thank you! I am not native English speaker, but you one of that rare people who I can listen on x2 speed. Very clear speech! And understandable detailed material of the course
I'd like to point out that in 3:20:40 If you notice that your data table isn't being updated, it is because ngOnInit doesn't trigger if it was previously viewed. I suggest you use "ionViewDidEnter" lifecycle hook when using real API calls after data manipulation from another component.
I was playing the video several times over and was just going nuts about it cause i got everything the same as in the course but it wouldn't update the list after deleting an item from it. So here comes a question - if Max isn't using "ionViewDidEnter" how come his list gets updated????
I appreciate that you made so much of this excellent course free on RUclips, 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!
I was getting an error with the routing using the syntax provided in the video, here's how I fixed it. const routes: Routes = [ { path: '', redirectTo: 'recipes', pathMatch: 'full' }, { path: 'recipes', loadChildren: () => import('./recipes/recipes.module').then( m => m.RecipesPageModule), }, { path: 'recipes/:recipeId', loadChildren: () => import('./recipes/recipe-detail/recipe-detail.module').then( m => m.RecipeDetailPageModule) } ]; Thanks for yet another great tutorial!
1:40 who am i?!!! ... oww really!! c'mon we all know that.. you are king of the kings in the realm of web development. A master, a high level guru, a super expert of mobile apps development (be that hybrid, native), data science and many other things. Words can't express the gratitude the community has for you. You put a huge contribution for us. The more i watch your video the more i realize that knowing you is also like swimming in the endless study of programming field
I have no words for such kind words, seriously. Reading this honestly means a lot to me and I'm really thankful for the support from you and the others here on the channel and on Udemy :)
Today I completed after starting this course 5 days back and just now bought the course. Three tips for someone starting today: 1. use ionViewWillEnter lifecycle event to load filtered recipes when you are deleting a recipe 2. With ionic 5, starter template is changed a bit in the modules part. So, configure these new route modules instead of the app routing module and everything will still work same. 3. If you are unable to see edit configurations, in the android studio after launching it, then remove Android and www folders and remove the ionic.config.json and capacitor.config.json. Then restart these steps again (ng build, capacitor copy, capacitor run).
Thank you so much, I have just learned Ionic and some Angular basics from you just as I have advanced my Flutter skills by your course! ❤❤ Great content as always, please keep it up 🙏🏻❤
I am half way through and it's really awesome. Weird to get taught by a German guy in English while I am german too :). I actually may end up buying the course but 35hours is a bit daunting. Btw: Really needed the 1.5 speed up so far. How can I see which courses are already covered by this preview on the actual acad site? Some courses are indicated with preview but it seems this video offers more material.
Hi in 3:17:20 I guess I have a problem. The deletion of Recipe Item is functional in Recipe-Detail but the the Recipe Item that I deleted is still exists in Recipe.ts (The List of Recipes).
In case someone's alert validation is not running as per our instructor, there is a change in documentation and/or version issues, and the following worked for me const alert = document.createElement('ion-alert'); alert.header = 'Invalid inputs'; alert.message = 'Please enter a valid reason and amount.'; alert.buttons = ['Okay']; document.body.appendChild(alert); alert.present(); //i.e I didn't use IonAlertController
For those who, like me were working with the dark color When you added an item to the list it appeared in white (1:45:37) To solve this just write newItem.setAttribute( "color", "dark");
For anyone who is using the latest version of ionic and alert doesn't work, the latest version doesn't have ion-alert-controller any longer. So according to the official docs, paste this in app.js, at the top: function presentAlert() { const alert = document.createElement('ion-alert'); alert.cssClass = 'my-custom-class'; alert.header = 'Invalid Input'; alert.message = 'Please enter valid reason and amount.'; alert.buttons = ['OK']; document.body.appendChild(alert); return alert.present(); } add presentAlert(); in the if statement in app.js, just above return; then remove in index.html
1:33:45 wasn't able to get the text to be aligned using this method, but I used class="ionic-text-end" and class="ionic-margin-vertical" and it worked. There's no more ion-alert-controller in the docs.
Thank you so much, sir I don't have any knowledge of Ionic and I don't have any idea about it But you explain it very clearly and I understood and all your steps are very clear
Very detailed video! Thank you very much! Will animations run at smooth 60 fps after building the app with capacitor? How would you compare the performance with a native app and a native app created by the capacitor?
In 3:39:40 you will see a bug in the app. As a beginner, I found that "ngOnInit ()" is only run once on the recipes.page.ts site. I added "ionViewWillEnter ()" to the site and copied the contents of ngOnInt and it worked. ionViewWillEnter is executed each time the site is called.
holy balls , this is an awesome tutorial ! i know everything i need to know now... coming from firefox addon devellopement this was exactly what i needed edit: this is basically a failsave tutorial explaining the complete ionic structure and dev environment + giving a crashcourse in javascript and angular developement in that environment , for new people : the alert functionality has changed slightly , look it up on the ionic website, you can use it to create rich popup uis with lots of input fields n stuff , for me that was what i needed in my app
Excellent course! I've been coding along all the way through it. I found an issue with the recipes app example 3:20:28 . When I delete a recipe it doesn't refresh the list when it navigates back. I captured the navigation event on recipes page and forced it to refresh. Is that a good practice or there is something better to do?
Hello, Max. Thanks for your effort in making this course. I have a doubt around the 3 hour mark of the course when it comes to deleting a recipe. I've followed your code to the letter as far as I'm concerned. And while the click event handler does as it's supposed to and deletes the recipe when you click the trash icon, and the router navigates back, to the recipes page, my list still shows the deleted recipe on the recipe list. I can click on it, and of course it brings me to a blank recipe since it WAS deleted, but the page before is not aware of it somehow. Did I mess something up? Should I be communicating to the Recipes component?
@@asahikitase5398 Heya. After doing some research I found out that the problem is that lifecycle hooks such as ngOnInit() are not called if you navigate with the Router that Max uses. Therefore you must utilize ionic's ionViewWillEnter() in order to fetch data (the same initializacion that happens in recipes' ngOnInit(). That was what worked for me.
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.
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.
Thanks Max, you did it again! After building my first business application in angular (watching your angular course) you once again have the right followup course to help me get to know yet another world. Grüße aus dem Süd-Westen!
you can click on the more button in chrome developer tools on the mobile toggled screen and select show device frame, it will also give you a full iPhone look with its body frame. It seriously looks dope, you should try it
In my opinion, it would be best to focus most of your effort on learning angular first. After you learn most of its core concepts, ionic + cordova will easily let you interact with device apis through simple dependency injections. Additionally, ionic is almost literally angular components built ahead for you to use.
Hi, When I delete a recipe, it goes back to the recipes page but I still have my list of recipes. If I click on the recipe that I deleted, it goes to the url "recipes/r1" but this is empty. Can you please tell me what am i doing wrong ? Why do I still see the deleted recipe on the recipes list ? Thank you
In your home page, replace ngOnInit() {this.recipes = ....} by ngAfterContentChecked() {this.recipes = ....} He even had the same problem at the end of the video but completely ignored it. As ngOnInit will only be called once, and will not be re-executed when pressing the back button, however while not being sure that ngAfterContentChecked() is the best solution, it works.
Not sure, but it looks likes ngOnInit() doesn't fire anymore when we return to the page. Use ionViewWillEnter() to make sure it triggers each time you need the component. In recipes.page.ts : ionViewWillEnter() { this.recipes = this.recipeService.getAllRecipes(); }
Hi Max. I got enrolled to Ionic Angular course on your website and now I’m designing a mobile for managing car dealership inventory. I am displaying the vehicles from dealer inventory using ionic grid. Now I need to implement filter logic to enable dealer to filter vehicles based on model year, make that they have selected so could you please help me understand on which ion element should I have to use in achieving this. If you post a video that will be of great help. Awaiting for your response,
Great video! Just not enough list with timelines like a "5:18 - Ionic Platform" in the description. It will be very convenient for people who are only interested in the theme of ionic application styling. I hope the author listens to advice.
I tried it, but when I delete recipe and redirect to all recipe page it's does not delete recipe from list. actually it's delete from actual json list but not affect to list page.
Well i took two of your courses on udemy and they were seriously amazing....keep up these kind of work...may God give you better health and peaceful life :)
Hello, I am having a problem when deleting a recipe on the program. Once I route back after deleting a recipe, the image and title of the recipe still appear on the recipes.page. It should not appear since I already deleted that recipe with the service. Thanks in advance.
This is my first time using ionic platform so i will have some questions as am using this awesome platform.Please stay in touch if should case of any question.
Hi max, I have not words to express my feelings, IF I were closer to you, I would definitely hug you a lot. and Please tell us how you learn all of these stuff. What drives you more and more? Please tell us how you learn, it will be very helpful for us.
First I want to thank you for this fantastic feedback, this honestly means a lot to me! I actually get this question from time to time, therefore I tried to answer it in this video => ruclips.net/video/Z4cAy1be_LA/видео.html
Time line of 3:05:00 , id / r2 routing not working . I also shared in you tube comment section. Time line of 1:57:14 (Uncaught TypeError: alertCtrl.create is not a function) not working . Time line of 2:11:36 (Uncaught TypeError: alertCtrl.create is not a function) not working.
Maximilian, your videos may be the best tutorial videos on youtube. Thanks. What do you recommend me to learn? Ionic or Flutter? Im a .NET developer and I need to learn mobile FAST to keep my job. I watched your 3 hours Flutter video and to be honest, you explain it great but the language itself is like chinesse for me :( Thanks again for your videos Maximilian. Cheers from Argentina.
Hi Max, just by watching few minutes of the video I got the feeling this is going to be a great learning experiences. Thank you! I need to know what I need as a prerequisites before taking this course, like what languages etc I should be first familiar with? and can I just dive in even without any knowledge of html, css, java etc?
- Angular fundamentals are required, though a brief refresher is also provided in the course - Basic HTML, JS and CSS knowledge is required - NO advanced Angular knowledge is required
Thanks for the tutorial :). I have a problem when after delete recipe list is not refreshing still shows in the UI but it is removed from service json. when i click again it shows empty page in recipe detail. route navigate is not refreshing or is that subscribe is not working ??. please help
very excited to take this course, Angular will make his Remontada , thanks to Angular Ivy expected next quarter Angular apps will be faster and smaller
Hello, thanks for the superb and clear explanation tutorial...! I did created like you, In the implementation, at create function(1:55:25), Am getting the following error: TypeError: alertCtrl.create is not a function
Best Course Sir thank you for this course. Sir i am facing error after run my app . ([ERROR] ng has unexpectedly closed (exit code 127). The Ionic CLI will exit. Please check any output above for error details.) What should i do?
Thank you so much for your awesome feedback and for your support! Happy to have you on board of the full course now, I hope that you will also like it :)
Hey! I'm trying to get to a point where I can make my own apps and your channel was recommended by several other to learn about Ionic. But first I need to know Angular and before THAT I need to learn javascript. Where does it end? So many dependencies and frameworks etc etc (same with flutter) Never thought I'd see the day when making a simple app with a few buttons and text fields is way harder than making games for pc/mobile! Any suggestions? :)
"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
I've ran into a few issues. #1 material icon is not working for me. #2 [routerlink] = "['/', recipe.id]" is not taking me to spaghetti or any other recipe id page. any thoughts? Everything looks the same as your code. Stackoverflow replies did not help either.
Answer from @Darrell Cunningham that helped me here: "Add an ? after every loadedRecipe statement in your template file. Example => loadedRecipe?.imageUrl"
@@sdfawe-qo8eq Inside of the "recipe-detail.page.html" you just add a ? behind every "loadedRecipe". At 3:03:54 for the h1-Tag in line 12 this would e.g. be: {{ loadedRecipe?.title }} You also do the same for the imageUrl, the title of the toolbar and everything else you want to show on your recipe-details page where you use "loadedRecipe".
I am getting issue with delete, the list still contains all recipes after deleting from recipe detail page... anyone has a solution? Or am I missing something
Go to recipes.page.ts. Replace ngOnInit() { this.recipes = this.recipesService.getAllRecipes(); } with ngOnInit() { } ionViewWillEnter() { this.recipes = this.recipesService.getAllRecipes(); } From what I can gather, the 'lifecycle' of pages has changed in Ionic since this came out. It isn't fetching the new list of recipes when you return to the recipe page list.
An excellent course by a brilliant teacher! I also bought the Udemy course. Keep up the good work Max! May I ask if it would be possible to create a shorter/more compact course for Ionic 4 and Vue.js?
Thanks for your awesome feedback and support Panos, happy to have you on board of the course. Unfortunately I don't plan to create an Ionic + Vue course at the moment, sorry :/
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
The real G
só agradece.
Thanks for this. You are awesome!
OK merci merci oo
file=index.html,pages%2Ftabs%2Ftabs.html,app%2Fapp.html,app%2Fapp.module.ts,pages%2Ftabs%2Ftabs.ts,app%2Fapp.component.ts,pages%2Fhome%2Fhome.ts,pages%2Fhome%2Fhome.html
Compleated an ionic project for a client just by watching this video. You have saved my job and most of all you taught me a valuable skill. Thank you 🙏🙏
Thank you! I am not native English speaker, but you one of that rare people who I can listen on x2 speed. Very clear speech! And understandable detailed material of the course
hahahah wth thats fast
I'd like to point out that in 3:20:40
If you notice that your data table isn't being updated, it is because ngOnInit doesn't trigger if it was previously viewed.
I suggest you use "ionViewDidEnter" lifecycle hook when using real API calls after data manipulation from another component.
I was playing the video several times over and was just going nuts about it cause i got everything the same as in the course but it wouldn't update the list after deleting an item from it. So here comes a question - if Max isn't using "ionViewDidEnter" how come his list gets updated????
@mkultr730 recipes.page.ts: add :
ionViewWillEnter() {
this.recipes = this.recipesService.getAllRecipes();
}
@@mxc8469 Nope, this does not work.
@@mxc8469 Thanks for you answer, this worked for me
@@mxc8469 Thank you so much!
I appreciate that you made so much of this excellent course free on RUclips, 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!
can you share with me his udemy course🙂🙂
file=index.html,pages%2Ftabs%2Ftabs.html,app%2Fapp.html,app%2Fapp.module.ts,pages%2Ftabs%2Ftabs.ts,app%2Fapp.component.ts,pages%2Fhome%2Fhome.ts,pages%2Fhome%2Fhome.html
I was getting an error with the routing using the syntax provided in the video, here's how I fixed it.
const routes: Routes = [
{
path: '',
redirectTo: 'recipes',
pathMatch: 'full'
},
{
path: 'recipes',
loadChildren: () => import('./recipes/recipes.module').then( m => m.RecipesPageModule),
},
{
path: 'recipes/:recipeId',
loadChildren: () => import('./recipes/recipe-detail/recipe-detail.module').then( m => m.RecipeDetailPageModule)
}
];
Thanks for yet another great tutorial!
I landed my 1st job by having your name indicated as my trainor in resume 😁
Wow, congratulations Junell, that's awesome!
That's awesome!!!!
That is a good point, more than 4 years wasted at the university... =(
@@hazlotumismo1419 hahaahh yes i can understand .....
congrats dude!
You are nothing but a blessing to this world...Thanks
I don't know what to say but THANK YOU for such a wonderful comment Adeyemo!
I agree.
no need to study masters when youtube is the best university ,thanks for this tutorial
1:40 who am i?!!! ... oww really!! c'mon we all know that.. you are king of the kings in the realm of web development. A master, a high level guru, a super expert of mobile apps development (be that hybrid, native), data science and many other things. Words can't express the gratitude the community has for you. You put a huge contribution for us. The more i watch your video the more i realize that knowing you is also like swimming in the endless study of programming field
I have no words for such kind words, seriously. Reading this honestly means a lot to me and I'm really thankful for the support from you and the others here on the channel and on Udemy :)
6
T
7þ7
Þþ7
Today I completed after starting this course 5 days back and just now bought the course. Three tips for someone starting today:
1. use ionViewWillEnter lifecycle event to load filtered recipes when you are deleting a recipe
2. With ionic 5, starter template is changed a bit in the modules part. So, configure these new route modules instead of the app routing module and everything will still work same.
3. If you are unable to see edit configurations, in the android studio after launching it, then remove Android and www folders and remove the ionic.config.json and capacitor.config.json. Then restart these steps again (ng build, capacitor copy, capacitor run).
I purchased your angular, reactjs, nodejs
You are my one of the favorite tutor in my whole life,
Thanks Max from 🇮🇳
I really want to thank you for your amazing support here and on Udemy, greetings from Germany :)
A time stamp for the course outline would be great. Thanks for this, cheers!
Thank you so much, I have just learned Ionic and some Angular basics from you just as I have advanced my Flutter skills by your course! ❤❤
Great content as always, please keep it up 🙏🏻❤
1:16:05 Useful tip for getting auto-completion back ( in this case turning link in self-closing tag)
some options changed in ionic in 2020 but soooooo easy way to learn, thank you soooo much
I am half way through and it's really awesome. Weird to get taught by a German guy in English while I am german too :). I actually may end up buying the course but 35hours is a bit daunting. Btw: Really needed the 1.5 speed up so far.
How can I see which courses are already covered by this preview on the actual acad site? Some courses are indicated with preview but it seems this video offers more material.
Are you some kind of divinity or god?
4h Ionic MASTER course, lol, you've killed it!
Hi in 3:17:20 I guess I have a problem. The deletion of Recipe Item is functional in Recipe-Detail but the the Recipe Item that I deleted is still exists in Recipe.ts (The List of Recipes).
Really really thanks for this that's what i needed for my 1st job now while im on "practice contract" love ya
Thank you Manuel, happy to read that the video was helpful!
sir i don't understand why your have less subscribers, you deserve more. Thank you so much for such a great video
More would always be better Nipun but we are so happy with the support we get from you and many others already, thank you :)
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 😊.
A man with god heart teaching such a nice course free of cost. Huge respect sir !!!!!
"I do expect this basic knowledge at this point" --- LOVE IT!!!
But React is better
@@stopPlannedObsolescence who asked?
In case someone's alert validation is not running as per our instructor, there is a change in documentation and/or version issues, and the following worked for me
const alert = document.createElement('ion-alert');
alert.header = 'Invalid inputs';
alert.message = 'Please enter a valid reason and amount.';
alert.buttons = ['Okay'];
document.body.appendChild(alert);
alert.present();
//i.e I didn't use IonAlertController
absolute legend, ty!!!
Best course ever and for free! congrats thanks for this man!
Your course was wonderful for me. I learnt a lot and have many new ideas. Thank you very much for your time and to put this free!
Glad it was helpful!
For those who, like me were working with the dark color
When you added an item to the list it appeared in white
(1:45:37)
To solve this just write
newItem.setAttribute( "color", "dark");
I have no idea of angular and with this tutorial I have learned a lot of it (also of Ionic of course)
For anyone who is using the latest version of ionic and alert doesn't work, the latest version doesn't have ion-alert-controller any longer. So according to the official docs, paste this in app.js, at the top:
function presentAlert() {
const alert = document.createElement('ion-alert');
alert.cssClass = 'my-custom-class';
alert.header = 'Invalid Input';
alert.message = 'Please enter valid reason and amount.';
alert.buttons = ['OK'];
document.body.appendChild(alert);
return alert.present();
}
add presentAlert(); in the if statement in app.js, just above return;
then remove in index.html
this helped. thanks!
It really boosted understanding to see Ionic without using Angular, great approach!
Great to hear!
1:33:45 wasn't able to get the text to be aligned using this method, but I used class="ionic-text-end" and class="ionic-margin-vertical" and it worked.
There's no more ion-alert-controller in the docs.
I had to add class='ion-text-end ion-margin-vertical' NOT ionic-text-end etc.
Thank you so much, sir
I don't have any knowledge of Ionic and I don't have any idea about it
But you explain it very clearly and I understood and all your steps are very clear
Very detailed video! Thank you very much! Will animations run at smooth 60 fps after building the app with capacitor? How would you compare the performance with a native app and a native app created by the capacitor?
I followed everything step by step, however, when i run the app on XCode my app shows a blank white screen. How do i debug/resolve this ?
Many thanks, dear, this beginner course is very amazing!
Made my first Ionic app watching this video. Thanks 😁
My last lecture was like adding methods on the alert function in class but you explained it much more nicely keep it up
In 3:39:40 you will see a bug in the app. As a beginner, I found that "ngOnInit ()" is only run once on the recipes.page.ts site. I added "ionViewWillEnter ()" to the site and copied the contents of ngOnInt and it worked. ionViewWillEnter is executed each time the site is called.
holy balls , this is an awesome tutorial ! i know everything i need to know now... coming from firefox addon devellopement this was exactly what i needed
edit: this is basically a failsave tutorial explaining the complete ionic structure and dev environment + giving a crashcourse in javascript and angular developement in that environment ,
for new people : the alert functionality has changed slightly , look it up on the ionic website, you can use it to create rich popup uis with lots of input fields n stuff , for me that was what i needed in my app
Glad you liked it!
thanks for updating for the alert
Excellent course! I've been coding along all the way through it. I found an issue with the recipes app example 3:20:28 . When I delete a recipe it doesn't refresh the list when it navigates back. I captured the navigation event on recipes page and forced it to refresh. Is that a good practice or there is something better to do?
i have the same issue, and i think Mar experienced the same.
and after adding the alert, the deleted recipe got removed from the recipes page... interesting...
stackoverflow.com/questions/41678356/router-navigate-does-not-call-ngoninit-when-same-page
but don't understand why it's working in the demo.
@@asahikitase5398 Thanks sir, it helped me too :)
Simply Awesome.. You are really so good in knowledge and the way you teach is unparallel
Hello, Max. Thanks for your effort in making this course. I have a doubt around the 3 hour mark of the course when it comes to deleting a recipe. I've followed your code to the letter as far as I'm concerned. And while the click event handler does as it's supposed to and deletes the recipe when you click the trash icon, and the router navigates back, to the recipes page, my list still shows the deleted recipe on the recipe list. I can click on it, and of course it brings me to a blank recipe since it WAS deleted, but the page before is not aware of it somehow.
Did I mess something up? Should I be communicating to the Recipes component?
i have the same issue, and i think Rômulo experienced the same.
@@asahikitase5398 Heya. After doing some research I found out that the problem is that lifecycle hooks such as ngOnInit() are not called if you navigate with the Router that Max uses. Therefore you must utilize ionic's ionViewWillEnter() in order to fetch data (the same initializacion that happens in recipes' ngOnInit().
That was what worked for me.
and after adding the alert, the deleted recipe got removed from the recipes page... interesting...
stackoverflow.com/questions/41678356/router-navigate-does-not-call-ngoninit-when-same-page
but don't understand why it's working in the demo.
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.
You are the BEST instructor on this Earth....
Wow, thanks a million for your wonderful feedback, this honestly means a lot to me!
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 really love the way you explain and split things into a simple and understandable pieces.
Thank you so much.
Angular is uninspiring, but the tutor is awesome. Will take a look in React components
In recipe detail, i think it is better to use *ngIf loadedRecipe at the begining of the template,
Thank's i was stuck on this part, i had some resolving promise issues, work great now!
I had to do the same as per the documentation I found on Angular...
Thanks Max, you did it again! After building my first business application in angular (watching your angular course) you once again have the right followup course to help me get to know yet another world. Grüße aus dem Süd-Westen!
you can click on the more button in chrome developer tools on the mobile toggled screen and select show device frame, it will also give you a full iPhone look with its body frame. It seriously looks dope, you should try it
Which of your courses do you recomend most to who want to make mobile apps?
Angular 8 or Ionic 4 with angular?
In my opinion, it would be best to focus most of your effort on learning angular first. After you learn most of its core concepts, ionic + cordova will easily let you interact with device apis through simple dependency injections. Additionally, ionic is almost literally angular components built ahead for you to use.
Hi,
When I delete a recipe, it goes back to the recipes page but I still have my list of recipes.
If I click on the recipe that I deleted, it goes to the url "recipes/r1" but this is empty.
Can you please tell me what am i doing wrong ?
Why do I still see the deleted recipe on the recipes list ?
Thank you
In your home page, replace ngOnInit() {this.recipes = ....} by ngAfterContentChecked() {this.recipes = ....}
He even had the same problem at the end of the video but completely ignored it.
As ngOnInit will only be called once, and will not be re-executed when pressing the back button, however while not being sure that ngAfterContentChecked() is the best solution, it works.
Not sure, but it looks likes ngOnInit() doesn't fire anymore when we return to the page.
Use ionViewWillEnter() to make sure it triggers each time you need the component.
In recipes.page.ts :
ionViewWillEnter() {
this.recipes = this.recipeService.getAllRecipes();
}
Excellent crash course 👌👌 Max is a great instructor, he is my personal favorite for technical courses, his Angular course on Udemy is awesome..
Thank you so much for your effort! I've already bought your course and it's great!
Awesome, thank you!
alexandra maxi is looking for a bride!!
If it's JavaScript related thing I know whose course to consider my all time favourite tutor max
You and Mosh are real gem!!
Ty for this crash course.
Thank YOU for your awesome feedback!
Hi Max. I got enrolled to Ionic Angular course on your website and now I’m designing a mobile for managing car dealership inventory. I am displaying the vehicles from dealer inventory using ionic grid. Now I need to implement filter logic to enable dealer to filter vehicles based on model year, make that they have selected so could you please help me understand on which ion element should I have to use in achieving this. If you post a video that will be of great help. Awaiting for your response,
Maximilian is a very positive man.
All the questions in my mind has been answered. Thanks a lot.
Please make a full course on GraphQL. The introductory part of the NodeJS course was a good one. Waiting for a full course.
Omg dude the recipe, recipe, recipe, recipes goes over head.
thank you , very good tutorials.
Did you prefer flutter or ionic for a native android / ios developer?
Great video! Just not enough list with timelines like a "5:18 - Ionic Platform" in the description. It will be very convenient for people who are only interested in the theme of ionic application styling. I hope the author listens to advice.
I tried it, but when I delete recipe and redirect to all recipe page it's does not delete recipe from list. actually it's delete from actual json list but not affect to list page.
did you ever fix this?
Same
Put ionViewWillEnter in Recipe
Well i took two of your courses on udemy and they were seriously amazing....keep up these kind of work...may God give you better health and peaceful life :)
Wow, thank you very very much for this wonderful feedback Abidul!
webview is not a browser, its just view that renders html but browser does a lot of other things apart from rendering html
This is Gold. Keep doing awesome work.👍👍
Thank you so much 😀
I got doubt at 3:39:30 you deleted it but the avatar and its title still there on the home screen. But in web app 3:20:30 it has been deleted.
Great tutorial. Is it possible to make multiple page routing in vanilla Ionic? Could you point me to a working example?
May god give you very very long life
Hello, I am having a problem when deleting a recipe on the program. Once I route back after deleting a recipe, the image and title of the recipe still appear on the recipes.page. It should not appear since I already deleted that recipe with the service. Thanks in advance.
This is my first time using ionic platform so i will have some questions as am using this awesome platform.Please stay in touch if should case of any question.
Maximilian, one question for you. NativeScript or Ionic?
Thanks for this best tutorial.....can we expect fingerprint authentication using ionic angular?
Hi max, I have not words to express my feelings, IF I were closer to you, I would definitely hug you a lot. and Please tell us how you learn all of these stuff. What drives you more and more?
Please tell us how you learn, it will be very helpful for us.
First I want to thank you for this fantastic feedback, this honestly means a lot to me!
I actually get this question from time to time, therefore I tried to answer it in this video => ruclips.net/video/Z4cAy1be_LA/видео.html
He is the best teacher of the World .
He really has an Academind :-)
Haha, thanks! I have the best viewers, too :-)
Time line of 3:05:00 , id / r2 routing not working . I also shared in you tube comment section. Time line of 1:57:14 (Uncaught TypeError: alertCtrl.create is not a function) not working . Time line of 2:11:36 (Uncaught TypeError: alertCtrl.create is not a function) not working.
Maximilian, your videos may be the best tutorial videos on youtube. Thanks. What do you recommend me to learn? Ionic or Flutter? Im a .NET developer and I need to learn mobile FAST to keep my job. I watched your 3 hours Flutter video and to be honest, you explain it great but the language itself is like chinesse for me :( Thanks again for your videos Maximilian. Cheers from Argentina.
Please have a look at this video => academind.com/learn/flutter/react-native-vs-flutter-vs-ionic-vs-nativescript-vs-pwa/
Hi Max, just by watching few minutes of the video I got the feeling this is going to be a great learning experiences. Thank you!
I need to know what I need as a prerequisites before taking this course, like what languages etc I should be first familiar with? and can I just dive in even without any knowledge of html, css, java etc?
- Angular fundamentals are required, though a brief refresher is also provided in the course
- Basic HTML, JS and CSS knowledge is required
- NO advanced Angular knowledge is required
@@academind I really appreciate your reply. Thank you so much. I will improve myself in angular more based on ur advice.
Thanks for the tutorial :). I have a problem when after delete recipe list is not refreshing still shows in the UI but it is removed from service json. when i click again it shows empty page in recipe detail. route navigate is not refreshing or is that subscribe is not working ??. please help
did you ever fixed this?
There are extra lifecycles in ionic . Use ionViewWillEnter() instead of ngOnInit and it will fix your bug
@@alexanderleonardo5649 LOL, it worked for me, tanks
very excited to take this course, Angular will make his Remontada , thanks to Angular Ivy expected next quarter Angular apps will be faster and smaller
Hello, thanks for the superb and clear explanation tutorial...!
I did created like you,
In the implementation, at create function(1:55:25), Am getting the following error:
TypeError: alertCtrl.create is not a function
@Juan José Blanco thanks!
Try this...
const alertCtrl = document.createElement('ion-alert');
alertCtrl.message = "Please enter valid reason and amount!";
alertCtrl.header = "Invalid inputs";
alertCtrl.buttons = [ "Ok" ];
document.body.appendChild(alertCtrl);
alertCtrl.present();
@@karlosfernandes7209 thanks man u helped me !!!
@@karlosfernandes7209 Good shit!
20:50 ionic set up
1:09:38
Thanks for video Max. FYI, 6:25 "suite [of web components]" is pronounced "sweet", not "suit".
Including a timeline table of contents on ur vid would be splendid buddy
Best Course Sir thank you for this course. Sir i am facing error after run my app . ([ERROR] ng has unexpectedly closed (exit code 127).
The Ionic CLI will exit. Please check any output above for error details.) What should i do?
Hi Max
Thanks for the crash course, after watching 2 hrs of video I bought the entire course on Udemy.
Thanks again for your efforts (Y)
Thank you so much for your awesome feedback and for your support! Happy to have you on board of the full course now, I hope that you will also like it :)
great video, after 1,5 hour of watching I bought full course on udemy.
Thanks for both your awesome feedback and your support Marcin! I hope that you will also like the full course :)
what is a difference between this tutorial and course on udemy? Looks like they have the same parts. Is udemy version is better?
Everyone wondering why " margin " doesnt work: it has changed to : class="ion-margin" . Kind of like in Bootstrap
You are the hero of this comment chain. Cheers!
Hey! I'm trying to get to a point where I can make my own apps and your channel was recommended by several other to learn about Ionic. But first I need to know Angular and before THAT I need to learn javascript. Where does it end? So many dependencies and frameworks etc etc (same with flutter) Never thought I'd see the day when making a simple app with a few buttons and text fields is way harder than making games for pc/mobile! Any suggestions? :)
"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
I've ran into a few issues.
#1 material icon is not working for me.
#2 [routerlink] = "['/', recipe.id]" is not taking me to spaghetti or any other recipe id page.
any thoughts? Everything looks the same as your code. Stackoverflow replies did not help either.
3:00:00 and after I could not move forward because localhost:8100/recipes/r1 is not loading. It just goes blank
I have the same problem... Error says "ERROR TypeError: Cannot read property 'title' of undefined"
Answer from @Darrell Cunningham that helped me here:
"Add an ? after every loadedRecipe statement in your template file.
Example => loadedRecipe?.imageUrl"
@@patrickdrucks can you be a little more specific? under what page? "recipe-detail.page.ts" page? or EVERY 'loadedRecipe'?
@@sdfawe-qo8eq Inside of the "recipe-detail.page.html" you just add a ? behind every "loadedRecipe".
At 3:03:54 for the h1-Tag in line 12 this would e.g. be:
{{ loadedRecipe?.title }}
You also do the same for the imageUrl, the title of the toolbar and everything else you want to show on your recipe-details page where you use "loadedRecipe".
I am getting issue with delete, the list still contains all recipes after deleting from recipe detail page... anyone has a solution? Or am I missing something
Go to recipes.page.ts. Replace
ngOnInit() {
this.recipes = this.recipesService.getAllRecipes();
}
with
ngOnInit() {
}
ionViewWillEnter() {
this.recipes = this.recipesService.getAllRecipes();
}
From what I can gather, the 'lifecycle' of pages has changed in Ionic since this came out. It isn't fetching the new list of recipes when you return to the recipe page list.
@@mxc8469 thank you very much sir
Great course, thank you Maximilian!
keep this up !! you will shine. Thank you
An excellent course by a brilliant teacher! I also bought the Udemy course.
Keep up the good work Max!
May I ask if it would be possible to create a shorter/more compact course for Ionic 4 and Vue.js?
Thanks for your awesome feedback and support Panos, happy to have you on board of the course. Unfortunately I don't plan to create an Ionic + Vue course at the moment, sorry :/
The delete functionality did not work in the IOS demo. May I know why? You did not talk about that mate
Hi, you forgot to cover Stage Management 😢 . But this is a great course anyways. Thank you very much. I've learned a lot.
State Management? If so, he refers to services as the method for state management.