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.
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!
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!
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! 🙂
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.
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 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.
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".
7 หลายเดือนก่อน
@@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.
@@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.
@@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
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
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
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.
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.
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?
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 TH-cam "Getting Started" course, but have not yet started.
@@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!
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.
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: th-cam.com/video/VzYRFLnnzkE/w-d-xo.html 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. 🙂
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 ?
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.
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).
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.
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?
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🙌.
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
Thanks for your suggestion! I just posted this video this morning: th-cam.com/video/_7kbgMu8XbI/w-d-xo.html And I have one specifically about standalone components and routing coming up soon.
@@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 ), },
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 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.
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.
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?
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!
@@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.
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!
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 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
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?
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.
@@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
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.
Thank you Austin! So great to hear they are useful! 😊
Your lessons make me a better programmer. Thank you and never stop doing what you're doing :D
Wow, that is so wonderful to hear! Thank you so much!
Than you so much. Finally I have understood the standalone concept in angular... 🤗
So great to hear it was helpful. Thanks for watching!
You have to keep this up! Now serious Angular programmers can truly understand signals, standalone components, (most significantly) RXJS! Thank you!
It's so great to hear that it's useful. Thank you!
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!
Thank you so much!
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!
That is great to hear. Glad it was helpful! 😊
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! 🙂
That is wonderful to hear. Thank you!
So glad to have found your TH-cam! Your pluralsight videos were great.
Glad to have you here! Thank you! 🙏
That was the best explanation for using standalone that I have ever seen. Thank you for your great job!
Glad it was helpful! Thank you!
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.
Passing by just to mention that I love your videos!! Thanks for all the content about Angular. It's making me a better developer ;)
Great to hear! Thank you! Happy Holidays!
Thank you, very clear explaination.
Well done with the "let's debug" end section, very instructive!
Great to hear it was useful. Thank you! 🙏
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?
Thanks! Great suggestion! I'll add it to the list.
Thank you so much for your lessons!
They are so interesting and I never get bored. I enjoy learning from you :) Thank you ☺️
Glad you like them! Thank you!
Thank you, really appreciate your help and support
Glad it was useful. Thanks! 🙏
fantastic explanation!
Thank you for the kind words! 😊
Thank you very much Mr Kurata!
I saw your prior message ... sorry that I didn't enounce that more clearly. It was *and* and not *in*.
Thanks for watching!
@@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).
As usual, Crip and clear video. Thanks.
Thank you! 🙏
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.
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.
You deserve millions of subscribers ❤
Thank you! 😊
Thanks, I was waiting for this video 😊
Glad you found it! Thanks for watching!
Hello thanks for all your Angular content contribution.
Thank you! 🙏
@@deborah_kurata I would love to watch again your Pluralsight courses updated to the lastest Angular version. It would be interesting!
@@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.
@@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
I forgot any update to your Angular Reactive Forms? ...rigth now I'm watching it again!
Wonderful video, straight to the point
Thank you! 🙏
Thank you for the detailed explanation. ❤
Thank you for watching! 🙏
Thx! Very good! Will try it later
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
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
Thanks Deborah. Do this means we should always use standalone components ?
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.
Thank you
Thank you for watching!
Is it possible to create Angular library with standalone components?
Check this out: angular.io/guide/standalone-components#standalone-components-for-library-authors
Great content as always!
Thank you! 🙏
🎉thank you so much!
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.
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?
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 TH-cam "Getting Started" course, but have not yet started.
@@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!
Awesome explanation.
Thanks!
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.
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: th-cam.com/video/VzYRFLnnzkE/w-d-xo.html
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. 🙂
Do you have the same application showing detailed development video using angular 17?
Are you looking for something more on standalone components? Or more broad?
Great! Thanks.
Thank you! 🙏
you are awesome
Thank you so much!
I like you :D thank you ♥
Thank you for watching!
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 ?
Thank you for watching!
No, I don't have a video that demonstrates how to make this application from scratch. Would that be useful?
@@deborah_kurata It would be very useful for beginner like me to see how to make an application from scratch
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.
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).
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.
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?
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🙌.
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
Thank you
What about loadComponent() function with standalone component in router i need explanation please
Thanks for your suggestion! I just posted this video this morning: th-cam.com/video/_7kbgMu8XbI/w-d-xo.html
And I have one specifically about standalone components and routing coming up soon.
@@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
),
},
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
@@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
@@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.
but I moved my imports from mgModule Declaration to imports in app component only then it works
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.
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?
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!
@@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.
Thank you so much!
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!
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
Does something here answer your question: angular.io/guide/standalone-components#standalone-components-for-library-authors
@@deborah_kurata That is exactly what I was looking for, thanks
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
This doesn't seem like a good idea. Do you have a specific scenario where you want to have the same named components?
@@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
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?
I wish in angular 17, there is no need to specify standalone: true. It should be by default.
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.
@@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
Thank you madam, please give me source code
You can find all of my source code here: github.com/DeborahK