@@eyeofthetiger7 You can use inline if you want, then files are the same as other frameworks (sfc). Boilerplate I can agree on though, but for typescript support angular is #1 so most of it is at least useful.
@@eyeofthetiger7 Boilerplate can be a pain, but IMO is needed to help standardize how things are done. Thus why new devs added to a team can more easily know how things are built and get up to speed faster. Compared to other frameworks (I know they're not really frameworks) where things can be done vastly different from project to project.
@@Clangsoul #1 compared to all other frameworks. I can't think of any with "better" TS support. It is surprising though that typings for forms is new, but I guess better late than never!
@@eyeofthetiger7 The Angular team has tried to reduce the “boilerplate” code and bundle size by a lot, since IVY. There is always the pros and cons of boilerplate, strict or not. If you just making a simple application, sure Angular may have some boilerplate code that you have to follow, which is strict. However, there is a reason that I like about it, and it is why Angular fits more in the Enterprise world. For example a big banking platform, it is complex, where each part of the platform is an Angular application. Those applications communicate to each other, have the same standard of coding, data communication, state management, look and feels, etc. To keep the same standard across all in the micro-frontend architect, there should be rules and framework with strict way to do things like Angular is perfect.
First feature looks great, second well I think most people will agree that for very small applications it is great but modules are actually something not that "stupid" and in larger applications it helps organizing and managing the application much easier of cource when you know how to divide well. At the end if every option is a blessing when you know how to use it.
This feature is not about organizing big modules in your app. This is about organizing modules with a single component. It becomes really useful especially when you use a SCAM approach.
It definitely needs to be refined. For example importet components, pipes etc should not be needed to be explicitly added to the component again. It's double work and is a bad developer experience. The compiler should automatically add the imported entities to the component.
@@preciousdamisa4662 You can use both. I prefer using standalone component as presentational component. and for pages and routing I would prefer earlier implementation
I ready finished, I will retake, the way you explain its really easy to understand, I also was able to make a dashboard connected to an API y write my self in node
With standalone, I hope "load what is needed" functionality could also come out of the box, thereby solving one of the biggest issues with Angular bundles right now
Instead of just adding imports in the Module file we'll have to add imports in all of our components using some extra flags. Doesn't that sound more cumbersome? The present approach looks just fine to me. On the positive side, it might affect the way we import components to other components, which could help in a lot of ways.
One nice thing about standalone components is it's easier to share components between projects if not using nx. Since you can just copy paste it and it will work, no need to wire up a module when moving it into another project.
In case when you need only one component, you can make it standalone with all features which module has. Of course if some feature needs more than one component it is better to use regular module. I think this standalone feature is most needed with directives & pipes, so you don't have to create module for each one of them
can't wait , export modules and import in each other . even for Route and Form .. etc some time is so confusing I enrolled in course since 2017 , and i still following the new section I hope to see angular material section, or a new course for it thanks Maximilian ,
I think that I still prefer the modules pattern. It makes so much more sense since you can organise your app by groups which for me, is what makes angular shine.
I agree, I really like modules too. But the Standalone components can be good for things like Alert dialogs and stuff like that; Meaning we might be getting rid of the "SharedModule" pattern where we re-export components used in various other modules...
TypedForms - great step towards binding html and code. i hope it will help reduce number of possible errors during writings code-behind. Standalone components - looks interesting, but has a lot of questions... lazy loading support? routing?
Just wondering if the new standalone components architecture would lead to more cyclic dependencies in a larger application 🧐 modules really helped identifying these issues tbh!
No, because it’s basically moving what you use to specify in the module into the component. So anything you would catch in the module would be caught in the “root” component.
thanks Max for all these explanations. Reactiv forms should be a really appreciated new features but standalone components, as an Angular developer I do not really see how it simplifies the code. I really like to used modules to classify properly all the different parts. When you used to work with Module, I think this new feature will bring more confusions than advantages in fact.
at 4:54 instead of writing a if condition we can use ? at the end right this.form.value.email?.length . Why are you not suggesting that? Is it a badway of coding
@@magnifico689 having worked with react... Fuck no. It's an exercise in self-deception, making you believe you did a lot of work, while you create a monster that consists of infinite reducers, pop-drilling and disgusting pseudo-HTML syntax and hundreds of poorly maintained libraries created exclusively for react with no further use of the Javascript ecosystem. I'll take ember.js over react anytime of the day
If in the future versions of Angular we completely get rid of Modules, I wonder how will we import some similar components in a Shared Module and importing the Shared Module into where we need them!
Yeay, Stand-Alone Components are very helpful for single components like pages, but old '*.module.ts' files are useful for creating a small component with the same or shared imported module and provider (reduce copy pasta code .. lol) .. mixing them is the best .. xD 😄 Can't wait for it~
Hi Max, thanks for the update. Unless the majority of people in the comments, I'm more interested in the typed forms. I wonder what happens now when we access the FormControls themselves instead of the values within. What happens to the form.get('email') approach, for example in the scenario of accessing valueChanges? Is this typed feature available only on the form value (form.value.email) or can we benefit from it elsewhere? Another related question is what happens if we use the FormBuilder. Can we still have a typed form in that case? And how, considering we don't manually create the individual FormControls? Thanks again
Thank you Max for the video , i have a question for the sec feature : - if we use the routing for our components & lazing loading how we can implement that with the standalone feature ? Thanks ^^ (y)
You can create a separate route file and use it in the providers like below. For example: create a file routes.ts export const routes: Routes = [ { path: 'home', title: 'Home', loadComponent: () => import('./home/home.component').then( (c) => HomeComponent), }, ]; ----------------------------------------------------------- In main.ts bootstrapApplication(HomeComponent, { providers: [importProvidersFrom(RouterModule.forRoot(routes))], }); Now you can add as many routes of standalone components in the routes.ts file and it will work because the routes is already injected in bootstrapApplication
Most people are really not getting Standalone Components - They are needed for designing smaller components which was really frustrating up until now in Angular where we had to maintain another module file. Furthermore - Atomic components are also just small components which doesn't really need another module file. When you are making a small component - maintaining a module was a small hurdle for experienced Ang developers but big hurdle for people coming from React/Vue world.
standalone components looks good for smaller projects with few components, but I feel a little bit repetitive work to define imports in every single component 50-100 times instead of 4-5 times in modules... in this case what is the benefit of standalone components vs. modules? And the other question: we use modules to organize components into logical groups. I feel we'll lost this benefit with standalone components...
Greate, at least somebody understands the point =). Angular developers mainly were inspired by the usage of the SCAM pattern in the real Angular apps and the benefits that it brings with Ivy and tree shaking.
It's still boilerplatey and super slow, which is why after 3 years of Angular I switched to Svelte + SvelteKit. I just can't imagine going back to Angular now.
These are of course very different tools. Svelte is super lean - I 100% agree. Angular on the other hand comes with built-in solutions for basically all problems you might face (forms, http, etc). It depends on preferences and what you’re building. I definitely like that we have choices between different „tools“ with different strengths.
I like how lean svelte is, but I worked on a huge svelte project recently and it feels like it's not ready for huge projects, and not a lot of large library officially support it, sapper got deprecated while svelte-kit isn't even version 1. Not even angularjs to angular did that. I think Angular feels boilerplately because it makes you deal with a lot of things upfront that you dont know you will have to deal with in the future.
As you and your web application grow up, you realize that Angular is what you needed right from time.
Since the release of IVY, Angular really stand its ground when compares to React, Vue, especially in the Enterprise world.
Only problem is the huge amount of boilerplate and number of files needed to do things.
@@eyeofthetiger7 You can use inline if you want, then files are the same as other frameworks (sfc). Boilerplate I can agree on though, but for typescript support angular is #1 so most of it is at least useful.
@@eyeofthetiger7 Boilerplate can be a pain, but IMO is needed to help standardize how things are done. Thus why new devs added to a team can more easily know how things are built and get up to speed faster. Compared to other frameworks (I know they're not really frameworks) where things can be done vastly different from project to project.
@@Clangsoul #1 compared to all other frameworks. I can't think of any with "better" TS support. It is surprising though that typings for forms is new, but I guess better late than never!
@@eyeofthetiger7 The Angular team has tried to reduce the “boilerplate” code and bundle size by a lot, since IVY. There is always the pros and cons of boilerplate, strict or not.
If you just making a simple application, sure Angular may have some boilerplate code that you have to follow, which is strict. However, there is a reason that I like about it, and it is why Angular fits more in the Enterprise world. For example a big banking platform, it is complex, where each part of the platform is an Angular application. Those applications communicate to each other, have the same standard of coding, data communication, state management, look and feels, etc. To keep the same standard across all in the micro-frontend architect, there should be rules and framework with strict way to do things like Angular is perfect.
I'm so excited for the stable update 😻
First feature looks great, second well I think most people will agree that for very small applications it is great but modules are actually something not that "stupid" and in larger applications it helps organizing and managing the application much easier of cource when you know how to divide well. At the end if every option is a blessing when you know how to use it.
Agree even thou I never use Angular and hate it I also organize react app to domain, module structure
This feature is not about organizing big modules in your app. This is about organizing modules with a single component. It becomes really useful especially when you use a SCAM approach.
Standalone components is the way to go. Super excited!
Yeah. But it shouldn't end up being the only way. The mix of modules and standalone components would be awesome!
Exactly, not everything in an Angular project should be standalone
Agreed, mixed is best
It definitely needs to be refined. For example importet components, pipes etc should not be needed to be explicitly added to the component again. It's double work and is a bad developer experience. The compiler should automatically add the imported entities to the component.
@@preciousdamisa4662 You can use both. I prefer using standalone component as presentational component. and for pages and routing I would prefer earlier implementation
I ready finished, I will retake, the way you explain its really easy to understand, I also was able to make a dashboard connected to an API y write my self in node
With standalone, I hope "load what is needed" functionality could also come out of the box, thereby solving one of the biggest issues with Angular bundles right now
My only concern is lazy loading as well
Even now, when angular 16, it’s very good explanation! Thanks!
Thanks much for this video. Very nice to see this and hear your Angular course is - and will be - updated for new Angular features.
Angular team again taking care for the painless upgrade to the new version :) Love this framework.
Instead of just adding imports in the Module file we'll have to add imports in all of our components using some extra flags. Doesn't that sound more cumbersome? The present approach looks just fine to me. On the positive side, it might affect the way we import components to other components, which could help in a lot of ways.
you have import at the top, now you have import in the @Component too :)
Auto-importing dependencies would be neat indeed. Maybe we get that in the future, who knows.
But definitely a big step in the right direction imo.
@@academind Agree!!
One nice thing about standalone components is it's easier to share components between projects if not using nx. Since you can just copy paste it and it will work, no need to wire up a module when moving it into another project.
In case when you need only one component, you can make it standalone with all features which module has. Of course if some feature needs more than one component it is better to use regular module. I think this standalone feature is most needed with directives & pipes, so you don't have to create module for each one of them
can't wait ,
export modules and import in each other .
even for Route and Form .. etc
some time is so confusing
I enrolled in course since 2017 , and i still following the new section
I hope to see angular material section, or a new course for it
thanks Maximilian ,
I think that I still prefer the modules pattern. It makes so much more sense since you can organise your app by groups which for me, is what makes angular shine.
I agree, I really like modules too. But the Standalone components can be good for things like Alert dialogs and stuff like that; Meaning we might be getting rid of the "SharedModule" pattern where we re-export components used in various other modules...
TypedForms - great step towards binding html and code. i hope it will help reduce number of possible errors during writings code-behind.
Standalone components - looks interesting, but has a lot of questions... lazy loading support? routing?
Just wondering if the new standalone components architecture would lead to more cyclic dependencies in a larger application 🧐 modules really helped identifying these issues tbh!
No, because it’s basically moving what you use to specify in the module into the component. So anything you would catch in the module would be caught in the “root” component.
Academind are perhaps the best dev tutors out there
thanks Max for all these explanations. Reactiv forms should be a really appreciated new features but standalone components, as an Angular developer I do not really see how it simplifies the code.
I really like to used modules to classify properly all the different parts. When you used to work with Module, I think this new feature will bring more confusions than advantages in fact.
I think standalone components are good as presentational component.
Nice ! The standalone components will definitely help make Angular less enterprisey. Not quite there yet but in the right direction
Thanks max for the update. I always look forward to hear from you.
at 4:54 instead of writing a if condition we can use ? at the end right this.form.value.email?.length . Why are you not suggesting that? Is it a badway of coding
My Guru (Teacher). Thanks a lot for teaching. 🙏🙏. I follow you in Udemy. Good to see you on TH-cam Sir.
Thanks for the great explanation. Your VS code theme looks stunning, do you mind sharing which extension its based on?
Without module in standalone components, how do we do lazy loading as we did before to load the child modules which includes components?
just use react lol...
lazyloading supports for components too.
@@magnifico689 no.
@@magnifico689 Nope : }
@@magnifico689 having worked with react... Fuck no. It's an exercise in self-deception, making you believe you did a lot of work, while you create a monster that consists of infinite reducers, pop-drilling and disgusting pseudo-HTML syntax and hundreds of poorly maintained libraries created exclusively for react with no further use of the Javascript ecosystem. I'll take ember.js over react anytime of the day
Woah, great video mate!
Thanks for the standalone code explanation
Awesome, working on form driven angular application will be a lot more simpler now!
Thanks a lot for the video, I highly recommend your course.
Great 2 main features explained very well. Thank you.
In big enterprise companies Angular in nwrl is very popular, in many German companies also; you can explore this space and make a tutorial
So excited about typed forms!
If in the future versions of Angular we completely get rid of Modules, I wonder how will we import some similar components in a Shared Module and importing the Shared Module into where we need them!
keep doing what you're doing! you're the best!
Thanks Max for the video!
Yeay, Stand-Alone Components are very helpful for single components like pages, but old '*.module.ts' files are useful for creating a small component with the same or shared imported module and provider (reduce copy pasta code .. lol) .. mixing them is the best .. xD 😄 Can't wait for it~
Isn't mix standalone and using module kinda pain to maintain?
how can I define formcontrol type ?. if I'm using formbuilder service to generating form.
really glad they added typed forms, because i got tired of that "any" everywhere
Will the typed form also work with nested form groups/arrays?
Can you do a Angular 15 changes video?
Hi Max, thanks for the update. Unless the majority of people in the comments, I'm more interested in the typed forms. I wonder what happens now when we access the FormControls themselves instead of the values within.
What happens to the form.get('email') approach, for example in the scenario of accessing valueChanges? Is this typed feature available only on the form value (form.value.email) or can we benefit from it elsewhere?
Another related question is what happens if we use the FormBuilder. Can we still have a typed form in that case? And how, considering we don't manually create the individual FormControls?
Thanks again
Thank you for your wonderful explanation video.
Thank you Max for the video , i have a question for the sec feature :
- if we use the routing for our components & lazing loading how we can implement that with the standalone feature ?
Thanks ^^ (y)
You can create a separate route file and use it in the providers like below.
For example:
create a file routes.ts
export const routes: Routes = [
{
path: 'home',
title: 'Home',
loadComponent: () => import('./home/home.component').then( (c) => HomeComponent),
},
];
-----------------------------------------------------------
In main.ts
bootstrapApplication(HomeComponent, {
providers: [importProvidersFrom(RouterModule.forRoot(routes))],
});
Now you can add as many routes of standalone components in the routes.ts file and it will work because the routes is already injected in bootstrapApplication
Thanks for the explanation
Most people are really not getting Standalone Components - They are needed for designing smaller components which was really frustrating up until now in Angular where we had to maintain another module file. Furthermore - Atomic components are also just small components which doesn't really need another module file.
When you are making a small component - maintaining a module was a small hurdle for experienced Ang developers but big hurdle for people coming from React/Vue world.
Jamaa unaelezea vizuri sana
Did you update your course with new features?
when are you updating your Udemy Course "Angular - The Complete Guide" to 14. Thanks for your courses, always great! 👍
Thanks for this update bro.
Which theme and font you used , its pretty nice in Visual Studio
It’s called Night Owl
can you attach the node full guide code
Why don't you use formbuilder?
Max, how often do you think a business should keep their angular (and packages) up-to-date?
What I usually do in my company is to wait until the version x.1.x is released to be sure we don't get a lot of bugs and it worked for us 😊
Typed forms is amazing
can you update the nuxt.js course from 2 to 3 please :')? and we would like you to take a look on bun js the new framework and thanks 🔥🔥🔥
hey, did you update your angular course un udemy according to those?
if there is no module then how are we gonna implement lazy loading
Wondering how this will deal with lazy loading...
What is the name of your VS code theme?
Can the imports for stand alone components be lazy loaded?
How do you add standalone components to other components that aren't standalone? 🤔
Best explanation
Hey Max please update The Node.js Course
Thanks a lot for the video!
Great, thanks! What theme is used in this video?
It's "Night Owl" => marketplace.visualstudio.com/items?itemName=sdras.night-owl
what is that vs code theme ??
Cool features. But excited to see how we add providedIn in the root when appModule is not there.
Hey Max! Thank you so much. Could you please tell me your VS Code theme name?
It's "Night Owl" => marketplace.visualstudio.com/items?itemName=sdras.night-owl
Standalone components seems pretty useless, but we definitely need those typed forms
Can you make a Nest.js course please?
Thank god! I though Angular was switching to functional component nonsense
Nah, some people might use inject in their library's, I dont think it will become mainstream, just on a case by case basis.
I have to quit if it goes to functional component. Such a nonsense thing.
@@chinjanpatel seems like it didn't catch on
standalone components looks good for smaller projects with few components, but I feel a little bit repetitive work to define imports in every single component 50-100 times instead of 4-5 times in modules... in this case what is the benefit of standalone components vs. modules? And the other question: we use modules to organize components into logical groups. I feel we'll lost this benefit with standalone components...
The main benefit is for SCAM (One Module per Component) pattern. Having big Modules is not the best idea.
Do you have any course in which contain a audio app contents
Either on TH-cam or udemy
next step is MRO system like in python when you can extend from multi Components
Please we want updated mongodb course
Max do you still use Angular for your work?
For some projects, yes
Super Max!
I am a little sad that, Academind and TH-cam don't allow more than double the speed. Even in double the speed, my good lad Maximilian talks too slow.
Can they please make the releases a bit slower. I just started an app a while back and im still on 12.
does somebody know the extension that shows error lines in HTML?
Angular Language Service
Six month and we got just these? Oh, the progress is slow. I’ve lost a hope to get a usable SSR in Angular, the CLI lacks many features Nx has.
thanks, Max
can't wait for this
I think standalone components it will be easier to shared components and you wont need a big shared module for using one shared component in a module
Soooooo.... the real benefits to use those standalone components?
typedForm is definately great. However, I don't really think standalone component worth a lot....
It's an absurd the time we waited for typed forms become a thing in Angular framework
It took them 5 years for something that should have been in first release. Stand alone was really required in Angular 2.0
Master Maximilian Schwarzmüller 💯
Try to make Frontend Development pro course this is huge hype from academind...
thank you so much..
This means no more SCAM (single component angular module) approach, am I right? Seems good, by the way :)
Thought the same after I saw this feature for the first time. A big step forward definitely
Greate, at least somebody understands the point =). Angular developers mainly were inspired by the usage of the SCAM pattern in the real Angular apps and the benefits that it brings with Ivy and tree shaking.
Oh this framework still alive?
Oh, angular is slowly becoming vue. Nice!
i thought angular has been discontinued..
I thought your Mom had been discontinued
@@LarsRyeJeppesen not everyone's mom has a fate like the one your mom had .... Sad for her she left a shit unflushed.
It was AngularJs (version 1.x) that was discontinued.
I personally am not discontinued. That is all
It's still boilerplatey and super slow, which is why after 3 years of Angular I switched to Svelte + SvelteKit. I just can't imagine going back to Angular now.
These are of course very different tools. Svelte is super lean - I 100% agree. Angular on the other hand comes with built-in solutions for basically all problems you might face (forms, http, etc). It depends on preferences and what you’re building.
I definitely like that we have choices between different „tools“ with different strengths.
I like how lean svelte is, but I worked on a huge svelte project recently and it feels like it's not ready for huge projects, and not a lot of large library officially support it, sapper got deprecated while svelte-kit isn't even version 1. Not even angularjs to angular did that.
I think Angular feels boilerplately because it makes you deal with a lot of things upfront that you dont know you will have to deal with in the future.
Please make a youtube video about solidjs framework it's really great you won't regret checking it
#React is the best #JavaScript framework ❤️.
That’s subjective
NgModules made me look for something else, I tried Vue and never looked back.
Off point, but your English is very impressive for a non-native English speaker, anyways, keep up the good work. ;)
bro can u share udemy course?
I want to buy ur MERN STACK course for learning
is he updating angular course because it's outdated as hell