@@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
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
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...
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
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.
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
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.
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?
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 ,
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~
@@jerrytab4276 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
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.
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
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
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!
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
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 took them 5 years for something that should have been in first release. Stand alone was really required in Angular 2.0
2 роки тому
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...
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.
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.
As you and your web application grow up, you realize that Angular is what you needed right from time.
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
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
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...
Angular team again taking care for the painless upgrade to the new version :) Love this framework.
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
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.
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
Nice ! The standalone components will definitely help make Angular less enterprisey. Not quite there yet but in the right direction
Angular is KING for me Angular and Nest JS forever
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.
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?
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 ,
Even now, when angular 16, it’s very good explanation! Thanks!
Thanks for the great explanation. Your VS code theme looks stunning, do you mind sharing which extension its based on?
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?
Thanks much for this video. Very nice to see this and hear your Angular course is - and will be - updated for new Angular features.
really glad they added typed forms, because i got tired of that "any" everywhere
In big enterprise companies Angular in nwrl is very popular, in many German companies also; you can explore this space and make a tutorial
Academind are perhaps the best dev tutors out there
Thanks max for the update. I always look forward to hear from you.
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.
@@jerrytab4276 no.
@@jerrytab4276 Nope : }
@@jerrytab4276 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
Awesome, working on form driven angular application will be a lot more simpler now!
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
My Guru (Teacher). Thanks a lot for teaching. 🙏🙏. I follow you in Udemy. Good to see you on UA-cam Sir.
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.
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
when are you updating your Udemy Course "Angular - The Complete Guide" to 14. Thanks for your courses, always great! 👍
Standalone components seems pretty useless, but we definitely need those typed forms
Woah, great video mate!
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
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!
So excited about typed forms!
Thanks for the standalone code explanation
I am a little sad that, Academind and UA-cam don't allow more than double the speed. Even in double the speed, my good lad Maximilian talks too slow.
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 😊
Can you do a Angular 15 changes video?
Thanks for the explanation
Jamaa unaelezea vizuri sana
Great 2 main features explained very well. Thank you.
Typed forms is amazing
Cool features. But excited to see how we add providedIn in the root when appModule is not there.
Will the typed form also work with nested form groups/arrays?
Thanks a lot for the video, I highly recommend your course.
Super Max!
Thank you for your wonderful explanation video.
Thanks for this update bro.
Which theme and font you used , its pretty nice in Visual Studio
It’s called Night Owl
Thanks Max for the video!
typedForm is definately great. However, I don't really think standalone component worth a lot....
how can I define formcontrol type ?. if I'm using formbuilder service to generating form.
next step is MRO system like in python when you can extend from multi Components
keep doing what you're doing! you're the best!
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 🔥🔥🔥
thanks, Max
Thanks a lot for the video!
Please we want updated mongodb course
Why don't you use formbuilder?
Great, thanks! What theme is used in this video?
It's "Night Owl" => marketplace.visualstudio.com/items?itemName=sdras.night-owl
Max do you still use Angular for your work?
For some projects, yes
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
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
Master Maximilian Schwarzmüller 💯
Best explanation
Try to make Frontend Development pro course this is huge hype from academind...
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
Oh, angular is slowly becoming vue. Nice!
can't wait for this
Can you make a Nest.js course please?
hey, did you update your angular course un udemy according to those?
Hey Max please update The Node.js Course
Wondering how this will deal with lazy loading...
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.
Did you update your course with new features?
Can the imports for stand alone components be lazy loaded?
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
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.
if there is no module then how are we gonna implement lazy loading
thank you so much..
Can they please make the releases a bit slower. I just started an app a while back and im still on 12.
can you attach the node full guide code
How do you add standalone components to other components that aren't standalone? 🤔
Do you have any course in which contain a audio app contents
Either on UA-cam or udemy
Off point, but your English is very impressive for a non-native English speaker, anyways, keep up the good work. ;)
I feel Angular is complex react js is simple 😁
that's because you don't understand the difference. React is not a framework. It doesn't have a lot of features, so of course it's simpler.
Please make a youtube video about solidjs framework it's really great you won't regret checking it
What is the name of your VS code theme?
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.
does somebody know the extension that shows error lines in HTML?
Angular Language Service
what is that vs code theme ??
NgModules made me look for something else, I tried Vue and never looked back.
Oh this framework still alive?
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.
Soooooo.... the real benefits to use those standalone components?
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
Wow !