Angular 17 Features With Examples - You Must Know That

  Рет қаралды 37,080

Monsterlessons Academy

Monsterlessons Academy

Күн бұрын

Learn Angular 17 features with examples that I created. These are the most important features which changes Angular development enormously. It is often that you get a question about latest changes in your framework or language on the interview and this is when your Angular 17 knowledge can shine.
TIMESTAMPS
0:00 Introduction
0:14 Angular dev website
3:28 Setting up Angular 17
6:43 Angular 17 control flow
9:27 Angular 17 conditions
10:55 Angular 17 defer and deferred views
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

Пікірлер: 79
@sakarsr
@sakarsr 8 ай бұрын
Really wonderful video on Angular 17 features. Thank you and have a nice day and good health.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
Thanks!
@yt.mhasan
@yt.mhasan 8 ай бұрын
great tutorial. I am wating for using ng17 in my new project soon.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
Best of luck!
@MG-wx8yx
@MG-wx8yx 3 ай бұрын
I'm a huge fan of your channel and can't believe I haven't subscribed all these years. Sorry for than. I'm subscribing right now.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 3 ай бұрын
Welcome aboard!
@karthikeyansundaramoorthi247
@karthikeyansundaramoorthi247 7 ай бұрын
Angular proved its awesomeness once again.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
Yeap
@abdelhaibouaicha3293
@abdelhaibouaicha3293 7 ай бұрын
📝 Summary of Key Points: Angular 17 introduces a new logo and website that are more structured and beginner-friendly. The website includes documentation, tutorials, a playground, and a reference section. Angular 17 includes two features from Angular 16 by default: signals for managing state and spied for faster application building. The video explains how to set up a new Angular 17 application using the Angular CLI. Angular 17 introduces a new feature called control flow, which changes how code is written in HTML templates. Another new feature in Angular 17 is defer, which allows for delayed rendering and the display of placeholders while content is being loaded. Different triggers for defer include on idle and viewport, with on idle being the default trigger. 💡 Additional Insights and Observations: The new website and documentation in Angular 17 are praised for being more beginner-friendly and easier to understand. The control flow feature in Angular 17 simplifies the creation of loops and conditional statements in HTML templates. Defer in Angular 17 provides flexibility in rendering content and displaying loading indicators. 📣 Concluding Remarks: Angular 17 brings exciting new features, an improved website, and enhanced documentation to make Angular development more accessible and efficient. The control flow and defer features offer more flexibility and convenience in building Angular applications. Made with Talkbud
@PizzaPlanetGamingOfficial
@PizzaPlanetGamingOfficial 3 ай бұрын
Gracias, me cuesta entender el inglés todavía, saludos desde Latam
@fadil2671
@fadil2671 8 ай бұрын
nice and usefull video as usual, thanks for sharing
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
You are welcome!
@titoriano1
@titoriano1 7 ай бұрын
I would love improvements for same file templates. I know you can do it. But I want the documentation to push it a bit more
@yuraprotsuk
@yuraprotsuk 7 ай бұрын
Great info, thanks
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
Glad it was helpful!
@yudianantha4549
@yudianantha4549 Ай бұрын
WOW, so we can use "Defer" features the same like "pop up html contents on scroll" right ? and "Loading" and "Placeholder" features for Skeleton Views ? Man this Angular 17 Updates is SO BIG, its like Angular with the best of Laravel and the best of React in it... its a compilation of the best things in Angular + best feature in Laravel + best feature in React As a Freelance fullstack developer, im really jumping like a madman right now, this is life changing, im 100% ONLY using Angular right now (and the new documentation pages is a huge plus too)
@MonsterlessonsAcademy
@MonsterlessonsAcademy Ай бұрын
Yeap, it's great for performance
@daviddonadze221
@daviddonadze221 6 ай бұрын
Love your videos. Thanks
@MonsterlessonsAcademy
@MonsterlessonsAcademy 6 ай бұрын
Thanks for watching!
@chrisb3902
@chrisb3902 4 ай бұрын
Thanks for this video!
@MonsterlessonsAcademy
@MonsterlessonsAcademy 4 ай бұрын
My pleasure!
@alexanderkomanov4151
@alexanderkomanov4151 7 ай бұрын
THANKS A LOT!
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
You're welcome!
@konstantinsurnin855
@konstantinsurnin855 2 ай бұрын
thanks a lot bro!
@MonsterlessonsAcademy
@MonsterlessonsAcademy Ай бұрын
You're welcome!
@mogheshantanu
@mogheshantanu 6 ай бұрын
Hi, nice explanation, please guide on how to use @for in nested loop.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 6 ай бұрын
I will add it in the list of ideas
@omsunkoradji120
@omsunkoradji120 7 ай бұрын
Have an issue with SSR building. Built files looks the same like without SSR... SSR does not work? Plz show examples... thanx in advance
@BrockFredin
@BrockFredin 8 ай бұрын
Nice!
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
Thanks!
@CodingAbroad
@CodingAbroad 7 ай бұрын
If your site already uses Angular universal and you want the new ssr in version 17 would you personally make a brand new version 17 project and copy and paste your files across?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
I would always just generate latest version and copy all code there if it is possible. Normally it is not as you want to save git history for example.
@andang6613
@andang6613 7 ай бұрын
I am running the Angluar v15, Do you think it would be difficult to upgrade to v17 from v15 because of many changes of syntax ?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
Depends on your dependencies. If you have just plain Angular then not that difficult.
@user-uo8jd7ys2x
@user-uo8jd7ys2x 7 ай бұрын
How can I make the logic in my VSCode, starting with @if and similar constructs, highlight in a different color, rather than being plain white? Please advise.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
No idea for now. Probably it will be improved later
@user-uo8jd7ys2x
@user-uo8jd7ys2x 7 ай бұрын
@@MonsterlessonsAcademy thank you)
@user-vh5tf3cf8y
@user-vh5tf3cf8y 8 ай бұрын
thank youuu
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
You're welcome!
7 ай бұрын
Good morning, Do you have a course to create an Angular17 and .net8 application with EF CORE user management?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
No I don't
@msrangular2808
@msrangular2808 7 ай бұрын
hi sir can we use *ngFor in old fashion also? I tested it, and it is working.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
Yes you can. It is not a replacement for ngif
@mohamedkhalilkhedhri9942
@mohamedkhalilkhedhri9942 7 ай бұрын
hi iam using standolone componenets and i want to use scrollrevealjs but i dont know how i didnt find any documentation , they all giving solutions using modules
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
Unfortunately I don't have with custom problems of the students.
@ismailuwair187
@ismailuwair187 3 ай бұрын
maybe you could make a video Angular vs React/Next.js as Angular interdocues so many interactive stuff..
@MonsterlessonsAcademy
@MonsterlessonsAcademy 3 ай бұрын
I will add it to the list of ideas
@inktrl
@inktrl 7 ай бұрын
What font are you using in your nvim config?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
It's monaco
@naiomi5532
@naiomi5532 2 ай бұрын
i started working on angular project v15 can i upgrade to 17 please ?
@MonsterlessonsAcademy
@MonsterlessonsAcademy Ай бұрын
Sure why not?
@rishukumar7586
@rishukumar7586 7 ай бұрын
Angular 17 new control flow stable or in developer preview ?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
Dev preview
@hamm8934
@hamm8934 8 ай бұрын
why not just embrace jsx instead of the control flow syntax? I find templating syntaxes always leave stuff to be desired and wasted time learning framework specific syntax.
@nagendradevara1
@nagendradevara1 8 ай бұрын
Here in the Angular as far as i know the code should be doing all the preprocessing and just give the result for html to render.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
I agree. JSX is fully covered by TS by default but probably there are framework limitations which doesn't allow to embrace JSX.
@LarsRyeJeppesen
@LarsRyeJeppesen 7 ай бұрын
I hate jsx
@LarsRyeJeppesen
@LarsRyeJeppesen 7 ай бұрын
Defer is fantastic, you would not get that with jsx
@hamm8934
@hamm8934 7 ай бұрын
@@LarsRyeJeppesen yes you can. Pretty next even has a built in hook for it.
@axi._.x4043
@axi._.x4043 7 ай бұрын
What is the name of the topic, you stick to your ide ?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
I don't understand your question.
@start662
@start662 7 ай бұрын
Is bro using vim?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
Yes
@kol4an721
@kol4an721 8 ай бұрын
Angular signal is not stable, but it production ready for now
@mgechev
@mgechev 8 ай бұрын
Signal and computed are stable, and we'll make effect stable in v18.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
You are totally right. I didn't see that effect is still in developer preview.
@kol4an721
@kol4an721 8 ай бұрын
@@mgechev in version 18 effect will appear again in public api?
@mgechev
@mgechev 7 ай бұрын
@@kol4an721 that's the plan :)
@JohnDoe-eo9lc
@JohnDoe-eo9lc 7 ай бұрын
This is a very sexy update
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
Yeap!
@OM-bs7of
@OM-bs7of 8 ай бұрын
The control flow thing looks messy tbh. Good thing we aren't forced to use it!
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
It depends. We are not forced on standalone also but if NgModules are optional and new projects don't contain NgModules people are using them less and less.
@spamviking8591
@spamviking8591 7 ай бұрын
“The angular documentation was difficult for beginners” I have been using angular for more than ten years, and I found the old documentation useless.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
They actually improved it in last years. At the beginning it was really useless.
@dmitriyobidin6049
@dmitriyobidin6049 6 ай бұрын
HTMX is on the way, no need to learn angular :)
@MonsterlessonsAcademy
@MonsterlessonsAcademy 6 ай бұрын
They are so different. It is fine to use HTMX for a small amount of Javascript without lots of business logic. As soon as you need that it becomes to complicated to support.
@internettraffic5115
@internettraffic5115 7 ай бұрын
Angular the worse UI framework, something new comes and breaks everything on upgrade...
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
But realistically start from 10 or 12 it's much more stable than before.
Angular 17 Defer - Improve Performance in Your Application
11:27
Monsterlessons Academy
Рет қаралды 8 М.
What's new in Angular 17
9:36
Code with Ahsan
Рет қаралды 14 М.
Неприятная Встреча На Мосту - Полярная звезда #shorts
00:59
Полярная звезда - Kuzey Yıldızı
Рет қаралды 7 МЛН
Вечный ДВИГАТЕЛЬ!⚙️ #shorts
00:27
Гараж 54
Рет қаралды 14 МЛН
ROCK PAPER SCISSOR! (55 MLN SUBS!) feat @PANDAGIRLOFFICIAL #shorts
00:31
Angular 18 is EXACTLY what we needed
9:15
Academind
Рет қаралды 62 М.
NPM vs Yarn in 2024
3:28
Backend Simplified
Рет қаралды 2 М.
Angular Signals Example - Learn Them by Doing
50:50
Monsterlessons Academy
Рет қаралды 11 М.
Angular 16 Features With Examples - You Must Know That
7:04
Monsterlessons Academy
Рет қаралды 8 М.
💥 Angular Signal Inputs (COMING SOON in Angular 17.1) #angular
12:30
Angular University
Рет қаралды 8 М.
What’s new in Angular v18
20:08
Angular
Рет қаралды 102 М.
Angular Interview Questions You Should Know
10:01
Monsterlessons Academy
Рет қаралды 53 М.
Новый быстрый красивый Angular 17
6:23
Миша Ларченко
Рет қаралды 17 М.
SHOCKING New AI DESTROYS GPT-4o (Open-Source Voice AI!)
8:17
AI Revolution
Рет қаралды 2,8 М.
Неприятная Встреча На Мосту - Полярная звезда #shorts
00:59
Полярная звезда - Kuzey Yıldızı
Рет қаралды 7 МЛН