Building Modern Angular 17 Apps with Ionic and Standalone Components
ฝัง
- เผยแพร่เมื่อ 6 ส.ค. 2024
- In this tutorial, I'll show you how to use the latest features of Angular 17 with Ionic - This means new control flow, standalone components, and Signals!
🔥 Learn Ionic FAST: ionicacademy.com
🔗 Tutorial: ionic.io/blog/building-angula...
#############################
❤️ You can also find me on:
Twitter: / schlimmson
Instagram: / simongrimm_
#############################
Chapters:
00:00 Intro
01:20 App Setup and ESBuild
06:33 Inject
09:20 Standalone Ionic Components
20:48 Angular 17 Control Flow
35:29 Signals and Component Inputs
45:45 Angular 17 Defer
51:44 Outro
#angular #ionic #appdevelopment - วิทยาศาสตร์และเทคโนโลยี
![[ไฮไลต์] แบดมินตันชาย วิว กุลวุฒิ (ไทย) vs LEE Zii Jia (มาเลเซีย) รอบรองชนะเลิศ | โอลิมปิก 2024](http://i.ytimg.com/vi/mvBiEAqlssw/mqdefault.jpg)
I rarely leave comments, but this tutorial is actually good :) Hope to see more angular/ionic tutorials, because the quality of tutorials and showing problem-solving during this tutorial are really decent.
YES!!!! Finally, Simon is BACK TO ANGULAR!!! My Christmas dreams have been answered!!!!
this look so much cleaner than react. angular for the win long term
Ionic/Angular is your stack. We love you and your content!
Finally Simon is back to ionic + Angular ! good to see the return after a long time. Simon always saves me at the right time...😄 Thank you for the angular stuff...
Good to see you back on Ionic/Angular
Great Simon! Love to see Ionic + Angular back again!
Great video Simon, I think importing only what you need for the page, with Standalone Components will make Ionic apps really faster with a small bundle. That's what we were missing with Ionic angular
TY for comeback to Ionic Angular users :)
Angular rules! Great Simon! thank you.
Thanks Simon!
Ionic + Angular, Ohhh Yeah!🤠
Yay more IonAngular content. U rock!
Great video Simon. I have been using Angular v17 in a new app and it's really amazing. Will check the new ESbuild you mentioned. Thanks.
Hello did you deploy your app so i can check the perfs or do you know an app done with angular 17 ?
Ionic Angular is back !!! Yay
Great video Simon! Thanks! It would be very interesting to have a video that shows how to combine @angular/ssr in Angular 17 with a blank project build in Ionic 7.5
Awesome tutorial!! Keep it up!
great info ! appreciated
Perfect Sir Grimm!
Great job 👍👏
How interesting is a video with the implementation of a login and registration. Maybe with Laravel sanctum as API on the backend....😁
Simon is back! 🎉🎉🎉
I hope you add this with the code to the Academy. I get errors with the old version currently on the site.
thanks for ionic and angular tutorial
Excelente amigo.
Hey Simon thanks for the video! Where can i view the source files for this app?
Thanks dude👍
No problem 👍
Simon, do you know about Rectangle? It's one of those MacOS window organising tools. Its free, and the one I use, probably others have similar features. I notice you doing a lot of small adjustments to get the screens sized. You can actually set up a keyboard shortcut for many different auto sizes. For you, "first two thirds" and "last third" would be great for you to quickly size the screens to be tutorial friendly once you drag them in from the other monitor.
Thanks, will check it out!
But actually this is only part of my screen, so it's kinda complicated..
What extension is giving you those inline warnings and suggestions?
What is theme vs code? its preety cool
thanks bro 🙂
Welcome 😊
Thanks :) , Where i can find the code ?
Is ionic working on any perfomance improvements to be faster like flutter?
getting an error like in below code
"ci": {
"progress": false
}
Propery progress is not allowed
Hi Simon,
I want to enroll for complete course of Angular 17 and IONIC with capacitor. Please ping the link of your course here.
Thank you. Please can you clone WhatsApp desktop with ionic angular?. The layout and navigation.
Ueee ionic!
Yes. Oppenheimer is a movie. Both of us missed it.
Could you make a tutorial using ionic + vue ?
Hey Simon, thanks for the tutorial. When changing "builder" to ":application" and "main" to "browser", it changes the ww folder structure. The build does not put files directly into www folder, but a browser subfolder. So when you run cap copy android, I get an error: The web assets directory (.\www) must contain an index.html file. Any ideas how to fix this? Thanks!
I am searching for the same thing. Have you resolved it?
My 2 cons. I wish it used async and await and it had a binding syntax similar to react. Angular 17 is more preferable for applications. Can this be published into app stores?
Yes, I have all my Apps published in app stores, and they were created using Ionic.
What are you using to draw those temporary highlights / underlines?
It's an app called SCreenbrush
new to ionic here : how can i make both website and app with ionic if i had to use ionic mobile components , and maybe angular ui for web ,
should i add a condition depending on the plateform on the html to render different layouts web or mobile ?
Ionic components work fine on the web, they are really just UI components so I wouldn't use an additional UI library like Angular Material on top.
my ion-tabs not showing good and not clickable in android device, ion-infinite-scroll is not working too , i'm using ionic 7.8.1 and angular 17.3.1, can you help me please
Nice article! Is there some source anywhere?
Yes, it's here: ionic.io/blog/building-angular-apps-with-ionic-and-standalone-components
Any hopes for fresh angular ionic course using new shiny stuff? 😊
Where is the link to the source code?
What is the advantage of `inject` vs previous constructor injection(because now you need additional import and it's not explicit that it's required)? I like the component approach, but having to import in the file + import in the attribute is cumbersome
I believe angular is working on a solution for this
@@trevormontgomery6795also heard this
you can create react hook like functions and use inject in them where a constructor wont be available
@@bullettime2808 But plain function don't need to be injected, you can only import them, right? We usually inject object because they have a shared/persistent context
the main benefit is the lifecycle of angular, the inject method is to stop using zone.js and it is the new way of inject dependencies, in futures versions of angular this will be the only way of inject services to components, also the inject method allow you to use in reactive programming and declarative way you can combine it with inputs propiesties and much more
❤❤❤❤🎉
46:00 This really illustrates why Ionic should switch to a much clearer «*Ion» postfix instead of the unreadable and obfuscating «Ion*» prefix…!
Greet , what the vs code them name please ?
Ah my beloved ionic.
Does this mean from now on you are moving away from RN back to Ionic?
Been in RN but angular still the best for rapid development
@@viewfavoriteshello in term of performance which one is better ?
@@viewfavoritesReally ? Angular doesn't even have fast refresh everytime you make a change the entire app refreshes, React's incredible fast refresh results in much better productivity, at least for me
@@justsmile7449React Native, since it uses native components instead of rendering a webview like Ionic
I´m required a URL for kreating API
greeat video. how can i import a ion-input? it doesnt work
I would like to help you solve the cube behind you. Let me know when you're available for a short call and we are going to make it together!
I once knew but lost the knowledge 🙈
I don't understand how you came up with interfaces
What extension is giving you those inline warnings and suggestions?
Error Lens