![Angular University](/img/default-banner.jpg)
- 386
- 3 936 886
Angular University
Belgium
Приєднався 11 тра 2016
High quality Angular courses - angular-university.io Learn and keep up with the fast moving Angular ecosystem.
- Learn the Angular framework from beginner to intermediate or advanced.
- Stay up-to-date with the latest developments and features via small bite-sized videos of around 5 minutes.
Follow us:
Twitter - AngularUniv
Facebook - angular.university
- Learn the Angular framework from beginner to intermediate or advanced.
- Stay up-to-date with the latest developments and features via small bite-sized videos of around 5 minutes.
Follow us:
Twitter - AngularUniv
Facebook - angular.university
Webstorm IDE Guided Tour
Related articles on the Angular University blog:
Free content at the Angular University:
- 20% of our lessons are free, you don't have to login to watch the lessons. The free lessons are the ones with the P (Pro) - angular-university.io
- Watch the free Angular For Beginners Course - angular-university.io/course/getting-started-with-angular2
Follow me:
Twitter - AngularUniv
Facebook - angular.university
UA-cam - ua-cam.com/channels/3cEGKhg3OERn-ihVsJcb7A.html
Instagram - angular.university
LinkedIn - www.linkedin.com/company/angular-university
TikTok - www.tiktok.com/@angularuniversity
Threads - www.threads.net/@angular.university
Free content at the Angular University:
- 20% of our lessons are free, you don't have to login to watch the lessons. The free lessons are the ones with the P (Pro) - angular-university.io
- Watch the free Angular For Beginners Course - angular-university.io/course/getting-started-with-angular2
Follow me:
Twitter - AngularUniv
Facebook - angular.university
UA-cam - ua-cam.com/channels/3cEGKhg3OERn-ihVsJcb7A.html
Instagram - angular.university
LinkedIn - www.linkedin.com/company/angular-university
TikTok - www.tiktok.com/@angularuniversity
Threads - www.threads.net/@angular.university
Переглядів: 1 909
Відео
Javascript return vs return await (Crucial Difference)
Переглядів 2,6 тис.2 місяці тому
Javascript question: When using async / await, what's the difference between return vs return await? A quick recap on what the async await syntax is and how it works, followed by a detailed answer to the question. Related articles on the Angular University blog: Free content at the Angular University: - 20% of our lessons are free, you don't have to login to watch the lessons. The free lessons ...
Angular Signals RxJs Interoperability: toObservable() (Guess the Behavior)
Переглядів 2,3 тис.2 місяці тому
New course launched - angular-university.io/course/angular-signals-course Here is a small quiz that will explain how toObservable() works internally. Try to guess the behavior of toObservable(), full explanation inside the video. Free content at the Angular University: - 20% of our lessons are free, you don't have to login to watch the lessons. The free lessons are the ones with the P (Pro) - a...
🚨 Angular 18 Is Out: Zoneless Upgrade (Step-By-Step)
Переглядів 14 тис.2 місяці тому
Modern Angular With Signals Course - angular-university.io/course/angular-signals-course This video is a quick summary of all the major features of Angular 18, with a focus on Zoneless. Timestamps: 0:00 Video Summary 00:40 Migrating to Zoneless 09:25 ng-content fallback content 11:30 new form events observable 12:45 route redirects as functions Helpful links: - Angular 18 release post - blog.an...
RxJs Becoming Optional In Angular: Why and What's Next?
Переглядів 5 тис.4 місяці тому
Modern Angular With Signals Course (minimal RxJs) - angular-university.io/course/angular-signals-course This video is a summary of everything that we know so far about Angular making RxJs optional in the long term. Sources: - Angular Signals RFC - github.com/angular/angular/discussions/49684 - JsParty podcast angular Team Interview - changelog.com/jsparty/310 - Interview transcript - github.com...
Why Angular Signals? Write Your First Signal
Переглядів 9 тис.4 місяці тому
Check out the brand new Modern Angular With Signals Course - angular-university.io/course/angular-signals-course This video is an introduction to signals. we will write our first signal, and talk about the main benefits of signals. Timestamps: 0:00 Intro 01:16 Writing Your First Angular Signal 04:55 Why Angular Signals? Main Benefits Related articles on the Angular University blog: Free content...
Angular AI Integration (Experimental): NgConf 2024 Recap
Переглядів 4,8 тис.5 місяців тому
Watch the NgConf Keynote for more details - ua-cam.com/video/nIBseTi6RVk/v-deo.html A quick rapid fire summary of all the major announcements in NgConf 2024/ Free content at the Angular University: - 20% of our lessons are free, you don't have to login to watch the lessons. The free lessons are the ones with the P (Pro) - angular-university.io - Watch the free Angular For Beginners Course - ang...
🚀 Angular async / await: Can You Use It? (OFFICIAL Confirmation)
Переглядів 7 тис.5 місяців тому
Is async/await officially supported in Angular? Find an official reply inside. Twitter thread mentioned in the video - AngularUniv/status/1770042003872419874 Pull request mentioned in the video: github.com/stackblitz/starters/pull/24 Timestamps: 0:00 Intro 2:10 Official Confirmation that async/await is supported 04:14 How the Angular CLI currently supports async/await 07:10 How will...
Angular Mistakes #6: 🛑 STOP Overusing Centralized Stores
Переглядів 5 тис.5 місяців тому
Angular Mistakes #6: 🛑 STOP Overusing Centralized Stores
🚦NEW Angular 17 model() feature ... You MUST Know This!
Переглядів 4,9 тис.5 місяців тому
🚦NEW Angular 17 model() feature ... You MUST Know This!
🚦Angular Signals Game Changer: NgRx Signal State
Переглядів 7 тис.5 місяців тому
🚦Angular Signals Game Changer: NgRx Signal State
💥 NEW In Angular 17.3 🚀 output() and New RxJs Interoperability
Переглядів 11 тис.5 місяців тому
💥 NEW In Angular 17.3 🚀 output() and New RxJs Interoperability
🚦Angular NgRx Signal Store: WHAT are Deep Signals??
Переглядів 7 тис.5 місяців тому
🚦Angular NgRx Signal Store: WHAT are Deep Signals??
🚦 Angular NgRx Signal Store Crash Course (For NgRx Beginners)
Переглядів 17 тис.5 місяців тому
🚦 Angular NgRx Signal Store Crash Course (For NgRx Beginners)
💥 Angular Time Machine #1:🚦The SIGNALS REVOLUTION Is Coming #angular
Переглядів 7 тис.6 місяців тому
💥 Angular Time Machine #1:🚦The SIGNALS REVOLUTION Is Coming #angular
💥 Angular Mistake #5: 🛑 STOP Overusing OnPush Change Detection
Переглядів 3,8 тис.6 місяців тому
💥 Angular Mistake #5: 🛑 STOP Overusing OnPush Change Detection
💥 Angular University YouTube Channel Intro
Переглядів 3,6 тис.6 місяців тому
💥 Angular University UA-cam Channel Intro
🚨COMING SOON in Angular 17.2: SIGNAL COMPONENTS One Step Closer
Переглядів 8 тис.6 місяців тому
🚨COMING SOON in Angular 17.2: SIGNAL COMPONENTS One Step Closer
💥 Angular Mistake #4: 🛑 STOP Avoiding Using Promises #angular
Переглядів 3,8 тис.6 місяців тому
💥 Angular Mistake #4: 🛑 STOP Avoiding Using Promises #angular
💥 Angular Mistakes #3: 🛑 STOP Fixing RxJs Memory Leaks This Way #angular
Переглядів 5 тис.6 місяців тому
💥 Angular Mistakes #3: 🛑 STOP Fixing RxJs Memory Leaks This Way #angular
🚨Angular URGENT Update #1: Angular 17 CLI EsBuild: OFF By Default #angular
Переглядів 4,9 тис.6 місяців тому
🚨Angular URGENT Update #1: Angular 17 CLI EsBuild: OFF By Default #angular
💥 Angular Mistakes #2: DON'T Overuse RxJs For Doing Simple HTTP #angular
Переглядів 7 тис.6 місяців тому
💥 Angular Mistakes #2: DON'T Overuse RxJs For Doing Simple HTTP #angular
💥Angular Mistakes #1: ✋ DON'T Overuse the Async Pipe #angular
Переглядів 6 тис.6 місяців тому
💥Angular Mistakes #1: ✋ DON'T Overuse the Async Pipe #angular
💥 Courses UPDATED To Angular 17.1 (Angular University)
Переглядів 8216 місяців тому
💥 Courses UPDATED To Angular 17.1 (Angular University)
💥 Did You Try The LATEST Angular Developer Tools? #angular
Переглядів 3,3 тис.6 місяців тому
💥 Did You Try The LATEST Angular Developer Tools? #angular
💥 Angular 17.1 IS OUT - What's New? (Top 8 New Features)
Переглядів 6 тис.6 місяців тому
💥 Angular 17.1 IS OUT - What's New? (Top 8 New Features)
💥 Angular SSR Deep Dive (With Client HYDRATION) #angular
Переглядів 16 тис.7 місяців тому
💥 Angular SSR Deep Dive (With Client HYDRATION) #angular
💥 Angular Signal Inputs (COMING SOON in Angular 17.1) #angular
Переглядів 8 тис.7 місяців тому
💥 Angular Signal Inputs (COMING SOON in Angular 17.1) #angular
💥 Angular Performance Tuning CRASH COURSE #angular
Переглядів 4,4 тис.7 місяців тому
💥 Angular Performance Tuning CRASH COURSE #angular
💥 Angular TYPED Forms: Are You Using Them Correctly? #angular
Переглядів 3,5 тис.7 місяців тому
💥 Angular TYPED Forms: Are You Using Them Correctly? #angular
Did you generate a repository?
Thank you for great introduction to Angular sections. You could shorten your explanations in avoiding repeating the same all over the time. For example telling the benefits of Signals by the end of the second part of your video.
I have a question: In Angular v18.1.0 if we set viewChild.required(MatButtonToggleGroup) and then try to access it in the effect that is inside the constructor and we get an error: 'Child query result is required but no value is available'. It is clear that the value is not yet there, in that point in time, but how did you not get that error? And how would we then write required viewChild values and use them in effects?
Beautifully explained. Probably the best Angular SSR explanation. Loved how the hydration is explained.
Im watching from mobile, can you move this link to your description, it is not clickable here
Great explanation
Thank you!
How about subscriptions?
Do you have repository to look add the code?
Can anyone explain how the secured api will be accessed using SSR?
This was just what I was looking for. I was concerned that ssr didn’t use the router. From some previous reading the hydration is a bit more manual but I’m sure that’s in your course.
Signals pretty shit if you can't mutate the properties of an object because they might be bound to UI
you can use NgRx signalstate, or create a shallow copy and change only what you need
@@AngularUniversity a shallow copy of a complex object everytime you want change a value 😐. What if the value is several levels deep?
@@edwinquaihoi8503 In that case, you need to shallow copy every level separately, in practice it's rare that the nesting goes more than one level or two.
Halo Vasco, thank you for all the great contents. I bought some of your udemy courses. I'm just starting to learn Angular. Due to the fast "6 month" update cycle, it becomes unclear for me which feature/technology is still relevant and which one os not. For example signalStore(), does this makes the old way, such as createStore, createSelector, createXxxx become obsolete?
it does not, its a different way and mentality of implementing a store. A lot of projects still and will still use the old way of implementing NgRx
Thanks a lot for this video. You really nailed the explanation.
Thank you. Stay tuned for more videos!
The deployment process is not clear. How the two different servers will communicate with each other to fetch the browser folder content?
you can deploy everything to one single server and have the express server serve the files statically, or upload the bundles to something like AWS3 and separate frontend and backend completely
@@AngularUniversity Can you upload a video to deploy an Angular ssr build file in any node server, AWS3 or Firebase. A AWS3 server example will be helpful. Actually I want setup a pipeline for this. My file is on Bitbucket.
What if the non-primitive signals are used in a template-driven form? For example, how would you correctly do `<input [(ngModel)]="course().title" type="text" />`?
I would suggest you remove the background music. I think it takes away from the quality of the video and lesson.
thanks for the Explanation .. but do we need to make http request on every single change . May be it would better if a user saves the form on click of save button which might avoid unnecessary calls to server.
I am using rxMethod and now I need to use it in component. and after getting success api response I need to perform some action based on data.. how to do that ? Not able to understand
Very helpfull! Thanks 👍
Thanks a lot!
How do you access route parameters from such a service ?
Would have been nice to know which version you are using here and which version this implementation supports. A lot more angular devs are in v16 and cannot move to 18 yet...
08:57 Why Angular Signals?
great rundown as always
Great video! Thank you for sharing. How would you suggest to set up environment variables. Esbuild doesn't seem to have anything out of the box. Been struggling with it. On build esbuild can't find my environment variables. Using Anguar 17.3.11
you can try ng add environments
Amazing video, Vasco!
Thank you. Stay tuned for more videos and Shorts!
Thanks a lot for the great explanation and effort.
Thank you!
very helpful. thank you so much.
You are welcome. Stay tuned for more!
Hi you have great English but wanted to respectfully critique that you say "here" as an empty word very often to quite a distracting amount. The test is if you remove the word does it communicate the same thing and I did not hear any case where the word here was needed.
Hello, very good video! Starting with angular 16, in the chrome debug, the "this" context inside an async function always turns out to be undefined. What is the reason?
Why do we need the effect type in constructor (filtering part) and what would happen if i didn´t wrap that code into effect function ? Thanks.
Effects can be put in other parts other than the constructor, like on ngOnInit, but you need to pass it an injector explicitly. The recommended pattern is to put it in the constructor, to keep things simple. 👍
signalStore + service is quite appealing approach. How do you think of it?
very sensible
for me this approach is much cleaner compared to old school way
It's much less verbose, isn't it? 😊
Excellent video! Can you please explain why is it needed the injector?
Thank you, it's because in that particular situation there is no injector to perform the dependency injection, so we need another mechanism. 👍
This is why I have switched to vue. Signals are just vue refs and vue comes with state management from pinia.
Thanks a lot for the video! One quick question: Is there a browser extension to see the actual state? For the NGRX store I always used Redux extension to see in the browser the store (and it's very helpful to debug), is there something like that for this signal store?
Thank you, there is so far no extension but there will be one soon I bet 👍
Really nice. Good job
Thank you! Cheers!
angular team lacks of vision
I think they are being extra cautious, and don't want to lead the community down a certain path that might not be the best for everyone. 👍
After watching your guide I decided to give it a try and I have to say I'm impressed! The most obvious benefit to myself is that the Webstorm project explorer is much easier to navigate with your eye than VS Code. I'm still learning things but I think I'm going to switch!
Happy to hear you enjoyed it, I've been using it for about 10 years it works awesome. 😊
Me too
Thank you!
My main issue with Webstorm is Angular Language Service. They are not using the extension that Angular team provides, their own version is baked into the app. This caused my IDE to complain on new features from v17+ like signal inputs, and JetBrains took a long time releasing a new version. This forced me to use VS Code and I haven't looked back since. It's more lightweight and I'm pretty sure Webstorm uses double the ram compared to VS Code (Take this with the grain of salt).
I usually just wait a couple of weeks and update, they support new features really fast. 😊
can you make a good series on ssr more . How to fix the LCP and FCP with google fonts and images and improve the performance more than 90 + . it would be more useful
My fav and day to day is Sublime Text (with plugins) but I do use IntelliJ for Java. I like how IntelliJ and WebStorm does its file pane management (having multiple files open in different panes with the ability to move them around easily). I don’t think you showed that in this video.
The music is too loud to talk over. Hard to follow.
I'm sorry for that, the next video will only have music at the beginning intro, like I usually do. This is just an old video that I never got the chance to publish, that's why it follows the old format. 👍
Great video as usual. I would appreciate it if the background music is not added, it makes it hard to follow what you are saying.
Thank you for the suggestion, actually this is an old video that I hadn't released yet, that is why it still uses the old format with the music. 👍
I'm using 35 shortcuts everyday. You're at the very start of mastering the JetBrains products my friend :)
New course available, Modern Angular With Signals - angular-university.io/course/angular-signals-course
Thanks for the info! It is great! Regarding the await, if you have two awaits (one in onRequestTriggered and another one in getCourses), does it mean that you are executing two promises? could it be a performance issue if there were so many functions like that?
Not at all, Promises don't cause performance issues. You can have as many awaits as you need, remember that the code after the await is only executed if the Promise gets resolved first. 👍
@@AngularUniversity great! thanks for your response and for your amazing work!
Hi, i got a question when testing on Angular SSR. in normal SSR application, when user choose some filters on page 1, showing list of data, then navigate to page 2, when navigate back using the browser back button, the filters will remain and as well as the list of data however using Angular SSR, the user filters are gone, is there any way to configure to achieve this behaviour?