Simplify with Angular Standalone Components

[@rStudius]

Your lessons make me a better programmer. Thank you and never stop doing what you're doing :D

[@deborah_kurata]

Wow, that is so wonderful to hear! Thank you so much!

[@austinZen8800]

Per usual Deborah is the go to person for the best coding tutorials! Looking forward to a $Thanks button with future videos so that I can forward a little $ your way.

[@deborah_kurata]

Thank you Austin! So great to hear they are useful! 😊

[@АннаЖиронкина-ю4б]

That was the best explanation for using standalone that I have ever seen. Thank you for your great job!

[@deborah_kurata]

Glad it was helpful! Thank you!

[@jj-big-slay-yo]

This is exactly what I wanted to write as well. So a big thank you for Deborah. The most important thing for me was the imports in the standalone components. This was not highlighted in any other video / tutorial as promonently as it should be.

[@sidneyshuman6738]

So glad to have found your KZbin! Your pluralsight videos were great.

[@deborah_kurata]

Glad to have you here! Thank you! 🙏

[@joelcipriano1985]

This was the simplest and most straight to the point material on Stand Alone Components that I have ever seen. It demystified a migration that I need to do in an old project. Thank you very much, Deborah!

[@deborah_kurata]

That is great to hear. Glad it was helpful! 😊

[@Nesbiteme]

You have to keep this up! Now serious Angular programmers can truly understand signals, standalone components, (most significantly) RXJS! Thank you!

[@deborah_kurata]

It's so great to hear that it's useful. Thank you!

[@LinkingTheWorlds]

I discovered you on Pluralsight, and i love it all about your learning style ! You're just one of the best (easily top 5 or less, maybe 1 !) Angular/RxJs teacher ever i found out there since these 7 last years! So easy to learn or revise, with you, i thank you so much ! (And english is not my native language).💜💜💜

[@deborah_kurata]

Welcome! Thank you so much for the kind words!

[@kalebdalla7316]

Passing by just to mention that I love your videos!! Thanks for all the content about Angular. It's making me a better developer ;)

[@deborah_kurata]

Great to hear! Thank you! Happy Holidays!

[@fernandoroldan4576]

Thank you! The way you explain the core subject involves first asking, 'What information is needed to understand the subject?' I am really tired of technical videos where the author first asks, 'What information is needed to show how smart I am? Thank you for having such a novel approach in teaching!

[@deborah_kurata]

Thank you so much!

[@edgaruriel9565]

hello Deborah, I want to tank you because I have been following almost all your Angular courses in Pluralsight and they have helped me a lot in my professional career. Greetings from MX! 🙂

[@deborah_kurata]

That is wonderful to hear. Thank you!

[@julienwickramatunga7338]

Thank you, very clear explaination. Well done with the "let's debug" end section, very instructive!

[@deborah_kurata]

Great to hear it was useful. Thank you! 🙏

[@warrayn10]

Thank you so much for your lessons! They are so interesting and I never get bored. I enjoy learning from you :) Thank you ☺️

[@deborah_kurata]

Glad you like them! Thank you!

[@sreeparnadas2748]

Than you so much. Finally I have understood the standalone concept in angular... 🤗

[@deborah_kurata]

So great to hear it was helpful. Thanks for watching!

[@andreafrnc2524]

Deborah, thank you

[@shahrukhkhan3967]

You deserve millions of subscribers ❤

[@deborah_kurata]

Thank you! 😊

[@Emmodi10]

Wonderful video, straight to the point

[@deborah_kurata]

Thank you! 🙏

[@ainoodaud]

Thank you, really appreciate your help and support

[@deborah_kurata]

Glad it was useful. Thanks! 🙏

[@elyoaprogrammer]

Hello thanks for all your Angular content contribution.

[@deborah_kurata]

Thank you! 🙏

[@elyoaprogrammer]

@@deborah_kurata I would love to watch again your Pluralsight courses updated to the lastest Angular version. It would be interesting!

[@deborah_kurata]

@@elyoaprogrammer That is kind of you to say. Thank you! Sadly, Pluralsight is retiring my "Getting Started" course. They thought it was confusing for learners to have the "Getting Started" and "Fundamentals", so they are dropping the "Getting Started" later this summer. 😞 The "Angular Router" course is being updated to Angular v16 now, by a different author. It should be out sometime later this summer. Pluralsight has asked me to do a new RxJS course (which will probably include signals as well). I haven't started it yet, so that may not be available until Fall.

[@elyoaprogrammer]

@@deborah_kurata Ohh..I can't believe🤯 Pluralsight retire your amazing coure "Getting Started", this was my favorite course when I was starting with it. Recently I watched it again!, because this year I have been working without Angular and I wolud like refresh my Angular knowledge from scratch. Anyway thanks for keep me update about the future courses, I will pending to your new RxJS course-with signals 🙏 because I love and enjoy all your courses. Thanks

[@elyoaprogrammer]

I forgot any update to your Angular Reactive Forms? ...rigth now I'm watching it again!

[@sravant]

As usual, Crip and clear video. Thanks.

[@deborah_kurata]

Thank you! 🙏

[@hamza201183]

Thank you very much Mr Kurata!

[@deborah_kurata]

I saw your prior message ... sorry that I didn't enounce that more clearly. It was *and* and not *in*. Thanks for watching!

[@hamza201183]

@@deborah_kurata Yes, I understood it later! Then I deleted my message, sorry for the inconvenience! Again thank you very much. I learnt a lot from you since 2018 (Pluralsight).

Hi Deborah, where can I find your courses updated to version 17 of angular? We have a lot of nice features to learn and you are the best to explain all this new features, thanks for sharing your knowledge with us.

[@deborah_kurata]

Thank you so much for the kind words. Are you asking about my Pluralsight courses? You can find my latest RxJS (and signals) course here: www.pluralsight.com/library/courses/rxjs-angular-signals-fundamentals It is published using v16, but all of the content is relevant for v17. It uses standalone components, inject(), and signals. Regarding the "Angular Getting Started", Pluralsight won't allow me to update it. ☹ They thought there was too much confusion with the "Angular Fundamentals" course so, very sadly, they are phasing out the "Getting Started".

@@deborah_kurata Thanks Deborah I will check RxJs course for the new signals content, and please, create your own site with new courses and update ones, you are the best, thank you so much.

[@Cris-pr1wl]

Thx! Very good! Will try it later

[@rs4267]

Thanks, I was waiting for this video 😊

[@deborah_kurata]

Glad you found it! Thanks for watching!

[@matteofeliciani7336]

Very good Deborah. How about making a video where you show a service just for a standalone component (I'm talking about provideIn) and the impact in js dimensions?

[@deborah_kurata]

Thanks! Great suggestion! I'll add it to the list.

[@barny1174]

Thank you for the detailed explanation. ❤

[@deborah_kurata]

Thank you for watching! 🙏

[@ScottPressey]

fantastic explanation!

[@deborah_kurata]

Thank you for the kind words! 😊

[@thusithkathaluwage5470]

Do you have the same application showing detailed development video using angular 17?

[@deborah_kurata]

Are you looking for something more on standalone components? Or more broad?

🎉thank you so much!

[@ashishnamdeo6879]

Awesome explanation.

[@deborah_kurata]

Thanks!

[@sergiim5601]

Great content as always!

[@deborah_kurata]

Thank you! 🙏

[@MinhTran-ts1df]

Thank you Deborah, your videos are always best of the best. I'd like to know if using Standalone Components is recommended for new applications or for big project we still need to use NgModule to organize the project in modular structure? Thanks

[@deborah_kurata]

Thank you! I have been using Standalone components for all of my new projects. There is some discussion of this question here that is interesting: stackoverflow.com/questions/74558393/when-to-use-standalone-components-or-modules-in-angular-14

[@sravant]

Is it possible to create Angular library with standalone components?

[@deborah_kurata]

Check this out: angular.io/guide/standalone-components#standalone-components-for-library-authors

[@jackiecooper9439]

Hi @deborah_kurata Your teaching method is truly amazing, I wanted to learn angular 17 from scratch as I am totally new and I saw your courses on plural sight but I am not able to get a starting point, like in what sequence I should start your courses , can you guide me on that?

[@deborah_kurata]

Thank you for the kind words! Regrettably, most of my content on Pluralsight is outdated. You could start with my "Angular: Getting Started" course, but it was developed with Angular v14 (and we are currently on v17). Pluralsight won't allow me to update it. So the current recommended place to start is with the "Angular Fundamentals" course, which I believe was updated to Angular v16. I am considering doing a KZbin "Getting Started" course, but have not yet started.

[@jackiecooper9439]

@@deborah_kurata Thanks for your reply, I bought a pluralsight subscription just for your courses and I think Angular Fundamentals is by other authors so I will try to stick with your youtube content also please make a series on the updated Angular 17 as google is changing the dynamics by pushing standalone components and signals so if we get everything in a single course like something from scratch to advance level on youtube or pluralsight or udemy , it will be really helpful for the Angular community.(also my suggestion is I think udemy gives unlimited updates and a lot of other features better then pluralsight and has a huge community of angular so you can try it for your new courses) Thanks and love from India!

[@shmuellevy2332]

Nice explanation. I wanted to know if there is an alternative way for "2 way data binding" since the attribute [(ngModel)] dose not work in the standalone component, hope you will know it and thank's.

[@deborah_kurata]

Yes, 2-way binding works in standalone components using the [(ngModel)] syntax. Do you have an example where it is not working? You can use [ngModel] and (ngModelChange) instead of [(ngModel)], but you shouldn't need to (unless you are using signals).

[@shmuellevy2332]

Thank you so much for the answere,but it dose not work for me,i get an eror that say "can't bind to ngModel since it isn't a known property of 'select'. " it also say that error occurs in the tamplate of component HomeComponent",thank's for your help.

[@deborah_kurata]

As I showed in the video, for standalone components you need to add all features that the template uses to the imports array in the Component decorator. Something like this one: @Component({ selector: 'sw-cart-item', standalone: true, imports: [DecimalPipe, FormsModule, NgFor, NgIf], templateUrl: './cart-item.component.html' }) export class CartItemComponent { ... } Notice the "FormsModule" listed in the imports array. Is that what could be missing?

[@shmuellevy2332]

Thank u for answer me again , i tried that but i get an eror that say cannot find name 'FormsModule', and if i try to import it it say '(not statically analyzable)', any way i fix that with an alternative way with , that works for me but if you can know why [(ngModel)] can't work it will be very helpfull since its shorter, thank you anyway for your help🙌.

[@deborah_kurata]

Do you have the import statement for FormsModule in place? You need the import statement and the imports array. Here is more complete code: import { Component, Input, computed, inject, signal } from '@angular/core'; import { DecimalPipe, NgFor, NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { CartItem } from '../cart'; import { CartService } from '../cart.service'; @Component({ selector: 'sw-cart-item', standalone: true, imports: [DecimalPipe, FormsModule, NgFor, NgIf], templateUrl: './cart-item.component.html' }) export class CartItemComponent { ... } And if you'd like a complete set of code where this works, you can find it here: github.com/DeborahK/Angular-Signals/tree/main/swVehicles-with-signals

[@adrianherzberger41]

I mean is it really a benefit to use standalone component beside from having lazy routes by default? Isn´t it annoying to import any features from new in your components (standalone)? I prefer sticking to having a separate module for my components and having my imports and providers in there. Because also when I want to have route guards or Can Active functions to trigger components functions its a better approach to also have separate routing modules.

[@deborah_kurata]

A few things: - Angular is moving forward with StandAlone. They are expecting to deprecate HttpClientModule in Angular v18 (next month). github.com/angular/angular/pull/54020 - You won't need too many features to import now with the new control flow syntax. (No need for CommonModule in most cases.) - Routing is moving toward StandAlone: kzbin.info/www/bejne/jKu8g3mCo9Otoac Also, does this cover your routing scenario? (See the selected answer): stackoverflow.com/questions/77698022/how-to-implement-nested-routing-in-angular-16-using-stand-alone-components It's a challenge when we know how to do something well and then that process changes. I still haven't gotten used to the new routing. It takes a bit of time to reorganize our thoughts around using the newer techniques, especially around best practices and good code structure. 🙂

[@ahmedrashad494]

Thank you What about loadComponent() function with standalone component in router i need explanation please

[@deborah_kurata]

Thanks for your suggestion! I just posted this video this morning: kzbin.info/www/bejne/lWjOk5qDqp2LmKs And I have one specifically about standalone components and routing coming up soon.

[@ahmedrashad494]

@@deborah_kurata Thank you so much for your reply i am using standalone component and created component like this then at the route i have been used loadComponent with then my question is this way is correct in angular v16 .. import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-products', standalone: true, imports: [CommonModule], templateUrl: './products.component.html', styleUrls: ['./products.component.css'] }) export class ProductsComponent { }...... this is teh route >>> { path: 'products', loadComponent: () => import('./Components/products/products.component').then( (m) => m.ProductsComponent ), },

[@deborah_kurata]

It depends on whether it is a single component that you want to load, or if you want to load a feature. I did my "feature" with standalone components like this: export const routes: Routes = [ { path: 'welcome', component: WelcomeComponent }, { path: '', redirectTo: 'welcome', pathMatch: 'full' }, { path: 'products', loadChildren: () => import('./products/product.routes').then(r => r.PRODUCT_ROUTES) }, { path: '**', redirectTo: 'welcome', pathMatch: 'full' }, ]; Then this: export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(), provideRouter(routes) ] }; And then main like this: bootstrapApplication(AppComponent, appConfig) .catch((err) => console.error(err)); You can find the full project here: github.com/DeborahK/Angular-GettingStarted/tree/master/APM-Final-v16

[@ahmedrashad494]

@@deborah_kurata Thank you very much for helping me and I apologize if I caused you any inconvenience. I have benefited a lot from you

[@deborah_kurata]

@@ahmedrashad494 No inconvenience at all. Hope it was helpful. I'm working on a new video that dives deeper into routing with standalone components which should drop some time this month.

[@folabi41]

Thanks Deborah. Do this means we should always use standalone components ?

[@deborah_kurata]

Starting in Angular v17 (which came out last week), the Angular CLI creates standalone components by default. So yes, in most cases it now makes sense to use standalone components. Also, I just heard from the Angular team that standalone components work better with the new @defer syntax that provides for deferred loading of component for better performance.

[@sepidehmasoomi7044]

Great! Thanks.

[@deborah_kurata]

Thank you! 🙏

[@VinitNeogi]

How can we use standalone components for component libraries, apps may or may not choose to use our components as standalone. Do we need to keep modules in that case

[@deborah_kurata]

Does something here answer your question: angular.io/guide/standalone-components#standalone-components-for-library-authors

[@VinitNeogi]

@@deborah_kurata That is exactly what I was looking for, thanks

[@afshin7104]

Hi Deborah how the naming works in standalone components what I mean is in modules we can have components with the same name like product-list

[@deborah_kurata]

This doesn't seem like a good idea. Do you have a specific scenario where you want to have the same named components?

[@afshin7104]

@@deborah_kurata what would be your approach if you have to show a product-list in the different part of the application but each one must have different fields and actions like for example in admin i want to show the unpublished products too

[@deborah_kurata]

There are several options, depending on how different each view was. You can use one view with flags to turn on/off fields based on appropriate criteria. Or you can use different views and route based on the type of user (admin or not admin). In this case, you should name them different things, like product-list and product-list-admin. Would something like that work?

[@LarsRyeJeppesen]

Thank you

[@deborah_kurata]

Thank you for watching!

[@nikolas4749]

Hi Debora Thanks for this great video You modify a star wars sale application here to add standalone components. Do you do a video where you made this application ? Is it from one of your course ?

[@deborah_kurata]

Thank you for watching! No, I don't have a video that demonstrates how to make this application from scratch. Would that be useful?

[@nikolas4749]

@@deborah_kurata It would be very useful for beginner like me to see how to make an application from scratch

[@visionaries-q8z]

am totally naive and just start learn angular. when i search find that angular 17 is components based (no modules). also i learn set the environment, create project, create components, show footer and header in app (as shared components). now i try convert old multi pages websites to SPA. the problem is every page contain 4 or 6 different part (text, table, image, side by side text and image, etc), so put the content of every page in one component is not good "a lot data in same component, bad maintenance). 1- so what is the best practice to deal with this case (what the term that i should search for it)? 2- your course "Angular: Getting Started" on "pluralsight" still contain "angular modules" even after update it in Feb 23, 2024. did we still need use modules in angular 17?

[@deborah_kurata]

You can build child components and compose them into the full page. For example, you could build a header component and then insert that component into any page that needs it. I covered this in the "Angular: Getting Started" course when we created the "stars" component. Also, there is nothing wrong with having multiple parts or elements on one component page. Just ensure the shared code is in services, not in the component (so no "bad maintenance" issues.) The "Angular: Getting Started" course hasn't been updated since July 2022 and is based on Angular v14. The sample code in GitHub was updated to Angular v16. Both of these were before standalone components. Sadly, Pluralsight will not allow me to update the course again. They didn't think there was a need to have both an "Angular Fundamentals" and an "Angular Getting Started". 😥 If you want to see a more "full featured" application example, you can check out this one: github.com/DeborahK/Angular-Signals/tree/main/swVehicles-with-signals Hope this helps!

[@visionaries-q8z]

@@deborah_kurata many thanks. i already watch first three modules from "Angular: Getting Started", I liked your way of explaining and how you begin by clarifying the general framework. you amazing instructor, best wishes for you.

[@deborah_kurata]

Thank you so much!

[@ShawnLucchetti]

I have started a new Angular 17 project and I have noticed that every new component I add, gets added to the import array in the app.component.ts. Should this be the case in a standalone project? I attempted to migrate these import statements into their respective components and I could not get it to work the way you demo here in this (great) video. Any suggestions? Thank you for the video!

[@yoshiinatuki]

The issue that i see with standalone components is duplication of code which leads to larger bundle size. e.g I have 3 components: login signup reset-password Every time that i import ReactiveFormsModule and some Material Elements, since i need to import it in each component my bundle size is ending up with 3 x in size Make no sense to me coming from sever side + vanilla js I've also tested for e.g scss file where i created one file related to those 3 auth components (auth.style.scss) and then imported that same auth.style.scss into each component it also results in that style x 3 when looking at the final build.

[@jalilirfan]

but I moved my imports from mgModule Declaration to imports in app component only then it works

[@deborah_kurata]

Could you elaborate on your question? You should not need to have a standalone component in the imports array in the ngModule nor in the app.component, unless the app.component includes the standalone component in its template.

[@SachalChandio]

you are awesome

[@deborah_kurata]

Thank you so much!

[@MohamedsamiKhiari]

I like you :D thank you ♥

[@deborah_kurata]

Thank you for watching!

[@giakhanh2824]

Thank you madam, please give me source code

[@deborah_kurata]

You can find all of my source code here: github.com/DeborahK

[@drax432]

I wish in angular 17, there is no need to specify standalone: true. It should be by default.

[@deborah_kurata]

It is set by default, but the property is still there. At this point, it would most likely be a breaking change to remove it. I assume that there is too much code out there that uses NgModules to have the flag gone yet at this point.

[@drax432]

@@deborah_kurata I see. But i believe it should not be difficult for angular team to come out with a migration tool, that can automatically add standalone:false to all those components without the standalone attribute..and that would solved the problem