Thanks, I completed the whole video, and I was coding along side you, To anyone who is thinking of watching this , you should definitely watch it, although a few things have changed but the remaining 85% of the things is still the same
@@bhawnasingh9566 Have you tried reading their docs? I know I can give you the straight answer. But I really want to encourage you doing it the right way, and that is reading through their docs.
Thank you Jeremy, for this absolutely fantastic video. I just started work in Angular as a junior dev and it feels very overwhelming as I only learned React. I'm just half way through your video and it's helping me so much already! I watched few other tutorials, but this is by far the simplest explanation what you can get while building. And it's actually the newest what you can get as well. Plus it's in native english and your voice is a pleasure to listen to! Thanks again, great work.
In order to run this project in angular 17+, just initialize your project without standalone using ng new wishlist --no-standalone instead of ng new wishlist
I must say, even though Angular 18 came out, this has been one of the fundamental lesson that I had in mind! I always loved NestJS module system, but I never knew that we had that in frontend and that's in Angular! That's amazing!
Hard agree. Bi-directional binding of properties between parent and child is going to be a nightmare to debug 😱 Having to deal with html "template" files rather than JSX/TSX is just gross. I also don't like being forced into writing components in an OOP way with classes. React moving to functional components and hooks was the best thing that could have happened to it. I imagine this new job is going to be HOC hell, like React originally was.
Excellent course about AngularJs. I have worked with reactjs, but for separation of concern and build-in feature provide by angularJs. I have decided to choose angularJs to build a web application for a customer.
I just worked through the entire video and didn't have a single issue where my code didn't work outside of my mistakes. Just make sure you're using angular 16 and not whatever is latest (17 right now).
At 3:00:43 when i export the WishService module like you do in the video my app crashes and ı get 'WishService does not appear to be an ngModule error. However if I don't export it everything works fine. Why is that the case? I am confused.
Great tutorial. Angular 19 has changed some of the ways a typical app is structured but overall this material is still relevant today. One thing I'd like to notice that maybe it's just me but every once in a while the application has to be restarted via ng serve to actually get rid of the compiler's error messages and warnings
Hi! Thanks for the feedback! Angular updates can definitely cause some changes, but it’s great to hear the material is still helpful. Restarting the app via ng serve can often clear up those issues. Cheers!
..it might be helpful to mention SOMEWHERE the angular version you're using - so that I could setup the right project number - cause as of this writing - 10 minutes into the video and Angular 17 doesnt have the app.module file. so now im stuck. Also the CLI asked me about server side rendering and I didnt know whether to choose yes or no.
I had the same issues, also I had to remake the folder of the project to be able to add a module file 1 hour into the tutorial and now there's new problems
I love the way you teach us, not just to create the "perfect" solution but actually to progressively strive to that state, so we can see the way you are thinking of something. Also it is structured very well. Don't know what to say except this is a perfect tutorial, thanks a lot :) PS can you maybe name to me what other tutorials do you have because as I can see this is something like group channel, so which specific tutorials are made by you?
Hi! Thank you so much for your wonderful feedback! We're glad to hear that you're enjoying the way Jeremy McPeak teaches. His approach really helps to illuminate the creative process. While he doesn't have a personal channel, you can find all his available videos by searching for his name on UA-cam, which will also include content from our channel. As for tutorials, our channel covers a variety of topics in graphic design and other creative skills, so you can explore different areas to enhance your learning. We appreciate your support and hope you continue to find value in our content! Cheers!
Great tutorial but badly needs to be updated to the a latest versions of node and angular as they have some pretty big changes that break this tutorial.
some issues with not finding the module due to not having a baseUrl set, after setting this to ./src and removing src from the import location this worked. Probably also coul have used .src/etc in the import
For someone, who is starting this when the @angular/cli is 17 or more, downgrade the @angular/cli version to 16. You can do this by the following command: npm i @angular/cli@16.1.0 @Envato Tuts+ - could you help what could be the issue with version 17. The components.module.ts is not available when we create a new angular project. Thanks :)
this video made me realize , how bad angular is ... ain't no way you have to write all that boilerplate and overcomplicate everything ; react and frameworks associated with it do everything done here so much easier and you gain insane amount of time ty for the tutorial , i wanted to understand how angular works and i got a good idea but no way i'm using this on my small projects ; think using angular is only worth it if ur being paid to work on a huge project
thanks for this tutorial!! I have one question however. for some reason i didn't have some of the base files you had. Did follow your tutorial step by step though. is this because of different angular versions?
Hi! It’s possible that differences in Angular versions might affect the files and structure you see. Ensure that you’re using the same version of Angular (Angular 15) as in the tutorial. You might also want to check the tutorial’s description or linked resources for any additional files or updates. Hope this helps, cheers!
@@envatotuts thanks! I was indeed using a different version. I found a roundabout in Importing CommonModule and FormsModule in the app.components.ts file itself for now. not sure how it will affect the project overall but for now it seems to work fine.
Excellent course but its a shame it only covers the very basics and barley any RxJs and no NgRx, State Change, Change Detection etc. Anyone has any advice on where should I learn these concepts fast?
To get the CDN line for Bootstrap to appear in your code automatically, you don’t necessarily need a specific Visual Studio (VS) extension. However, you can use the "Emmet" feature in VS Code, which is built-in, to quickly add the Bootstrap CDN. Just type link:css and press Tab, then replace the URL with the Bootstrap CDN link. If you want a more automated way, you can install the "Bootstrap 4 & Font awesome snippets" extension, which includes shortcuts for adding Bootstrap links. Hope this helps, cheers!
Hello sir, thank you very much for this tutorial. I have question. For implementation of ouput directive, why you used parentheses for (addWish) and (filter) but you used brackets for [wishes] ??? Excuses my english, I'm french speaker. Thank you.
Hi, I understood almost all of course till now but I did not understand the purpose of Lecture 3.3 Setting Up Two Way Binding, can anyone explain to me? I understood how to set up custom two way binding but did it understand why it was done there at all as it made things more complicated and confusing. this.filter = filters[val]; this.filterChange.emit(this.filter); Also what is the point of line 2 (emitting) after this.filter has already been correctly set?
Hi! Great question. The purpose of this.filterChange.emit(this.filter) is to notify the parent component about the updated filter value, which is essential in custom two-way data binding. The parent component needs to know about this change to update its state and reflect the changes properly in the UI. Hope this helps! Cheers!
Hi! While the core tools in After Effects have stayed similar from versions 13 to 16, newer features and performance enhancements were added in later releases. Learning with this course should still set you up well, but check the differences in specific tools you need to see if there’s any adaptation required. Enjoy exploring AE! Cheers!
You'll have to create a new app if you absolutely have to have a project structure similar to the one handled in this course. Just use an additional flag when generating the app. So instead of just typing in ng new wishlist enter the following: ng new wishlist --standalone false
Hi! If the app.module.ts file isn’t created, it could be due to an incomplete Angular setup. Make sure you’ve run ng new project-name correctly, and that the Angular CLI is installed globally. If the issue persists, reinstall the CLI and try again. Cheers!
@@MirageDreamer550 Thanks, reinstalled node.js with chocolately and now not only ng is not recognized but npm is also an unknown command i di have a working environment some years ago with a basic pagewith angular in the browser
@@MirageDreamer550 Thanks again, found it after several reinstall attempts, linking etc. You HAVE to install with admin privs (elevated) as well and ng will work. Looks like i had a %PATH% issue. Also ran ino the problem that the node version has to be an even number, fnm didnt help but i was able to install using chocolatey
I am stuck at 1:57:15 . I get this error when trying to use the ngClass directive : NG8002: Can't bind to 'ngClass' since it isn't a known property of 'label'. SOLUTION: In Angular 17 it seems like using ngClass directive in a label causes this unexpected behavior. Anyway , the solution I found requires you to use the class binding directly in labels If you only need to apply a single CSS class conditionally: Anyway, I still push on, Angular looks interesting!
Thanks, I completed the whole video, and I was coding along side you, To anyone who is thinking of watching this , you should definitely watch it, although a few things have changed but the remaining 85% of the things is still the same
can you please tell how did you install angular
@@bhawnasingh9566 Have you tried reading their docs? I know I can give you the straight answer. But I really want to encourage you doing it the right way, and that is reading through their docs.
Thank you Jeremy, for this absolutely fantastic video. I just started work in Angular as a junior dev and it feels very overwhelming as I only learned React. I'm just half way through your video and it's helping me so much already! I watched few other tutorials, but this is by far the simplest explanation what you can get while building. And it's actually the newest what you can get as well. Plus it's in native english and your voice is a pleasure to listen to! Thanks again, great work.
One of the best Angular tutorials, I really like how you simplify everything
this is by far the best youtube tutorial for angular
Thank you for watching! Cheers! 💚
Give this man 100,000,000,000!!!
Monster of a tutorial I think it's gonna help me a lot for my internship :)
In order to run this project in angular 17+, just initialize your project without standalone using
ng new wishlist --no-standalone
instead of ng new wishlist
Just strated to watch it, one of the reasons is the perfect voice to listen for 4 hours!
Hi! Thanks so much for the awesome feedback! We're glad you're enjoying the tutorial and the voiceover. Hope you have a great time watching!
Cheers!
I must say, even though Angular 18 came out, this has been one of the fundamental lesson that I had in mind! I always loved NestJS module system, but I never knew that we had that in frontend and that's in Angular! That's amazing!
Job requires angular but the more i watch this the more i love react 🤣
Hard agree. Bi-directional binding of properties between parent and child is going to be a nightmare to debug 😱
Having to deal with html "template" files rather than JSX/TSX is just gross.
I also don't like being forced into writing components in an OOP way with classes. React moving to functional components and hooks was the best thing that could have happened to it. I imagine this new job is going to be HOC hell, like React originally was.
same boat
Agree 👍👍👍💯
Excellent course about AngularJs. I have worked with reactjs, but for separation of concern and build-in feature provide by angularJs. I have decided to choose angularJs to build a web application for a customer.
Wouldn't it be nice if we all liked this great Tutorial 😊
The best thing about this tutorial is that your voice is perfect for listening for hours 😭
Great tutorial....One of the best Angular tutorials I've seen
Angular 17 changed a few things (no modules by default), so this tutorial needs some minor updates I guess.
"ng new appname --no-standalone" use this command for setting up the environment. now you'll have the setup environment with module.ts file
I just worked through the entire video and didn't have a single issue where my code didn't work outside of my mistakes. Just make sure you're using angular 16 and not whatever is latest (17 right now).
Thanks mate
Thank you sir for this great tutorial.
Do you have or do you plan to create the next level Angular course?
I agree. The next level of Angular course will be awesome.
Thanks for a really great work!
Can you share the settings and extensions you use for VS Code?
same question ... if you know then pls reply
Great tutorial... What are the chances of getting one (or an update to this one) for Angular 17 and Signals when it comes out? :)
At 3:00:43 when i export the WishService module like you do in the video my app crashes and ı get 'WishService does not appear to be an ngModule error. However if I don't export it everything works fine. Why is that the case? I am confused.
In WishModule, WishService needs to be listed in the 'providers' array:
@NgModule({
declarations: [
WishListComponent,
AddWishFormComponent,
WishFilterComponent,
WishListItemComponent
],
imports: [
CommonModule,
FormsModule,
HttpClientModule,
],
exports: [
WishListComponent,
AddWishFormComponent,
WishFilterComponent,
WishListItemComponent,
],
providers: [
WishService
]
})
export class WishModule { }
Thank you for this course! Just watched it all and coded along and I feel that I'm ready to jump into some Angular projects.
Thanks for the tutorial! Your way of teaching is amazing.
Great tutorial. Angular 19 has changed some of the ways a typical app is structured but overall this material is still relevant today. One thing I'd like to notice that maybe it's just me but every once in a while the application has to be restarted via ng serve to actually get rid of the compiler's error messages and warnings
Hi! Thanks for the feedback! Angular updates can definitely cause some changes, but it’s great to hear the material is still helpful. Restarting the app via ng serve can often clear up those issues. Cheers!
Amazing tutorial, after finishing it , angular doesnt look that annoying anymore
Can't believe that I learned Angular in just a week thanks to this video.
hats off, you have a gift for explaining things
Thank you, excellent tutorial, clear and well paced. Enjoyed figuring out how to do things that have changed since first released.
You're very welcome!
Very professional it helps me a lot
THANKS Envato TUTS!
..it might be helpful to mention SOMEWHERE the angular version you're using - so that I could setup the right project number - cause as of this writing - 10 minutes into the video and Angular 17 doesnt have the app.module file. so now im stuck. Also the CLI asked me about server side rendering and I didnt know whether to choose yes or no.
This is 16.2, reinstall Angular for this tutorial
Type the command for installing angular the add @16.0.0 at end then you will good to go.
So the version 17 has really changed a lot, hasn’t it?
I had the same issues, also I had to remake the folder of the project to be able to add a module file 1 hour into the tutorial and now there's new problems
@Aeris-Xu it has and I cant find ant tutorials for it. This is frustrating.
The best tutorial online.. plz let us know if you have a channel, dont mind even paying for any subscription.
Thank you for this great tutorial. I have question, why you use "let" to define all the variables? I think use const will be better in some cases.
Is there a full-blown course by Jeremy that goes beyond these initial four hours? I'd happily pay to get access to that, in case it exists.
I love the way you teach us, not just to create the "perfect" solution but actually to progressively strive to that state, so we can see the way you are thinking of something. Also it is structured very well. Don't know what to say except this is a perfect tutorial, thanks a lot :)
PS can you maybe name to me what other tutorials do you have because as I can see this is something like group channel, so which specific tutorials are made by you?
Hi! Thank you so much for your wonderful feedback! We're glad to hear that you're enjoying the way Jeremy McPeak teaches. His approach really helps to illuminate the creative process. While he doesn't have a personal channel, you can find all his available videos by searching for his name on UA-cam, which will also include content from our channel.
As for tutorials, our channel covers a variety of topics in graphic design and other creative skills, so you can explore different areas to enhance your learning. We appreciate your support and hope you continue to find value in our content! Cheers!
Great tutorial but badly needs to be updated to the a latest versions of node and angular as they have some pretty big changes that break this tutorial.
25:40
In the latest version of Angular v17, built-in for loop is updated. Below is the syntax ,
@for (item of items; track $index) {
{{item.wishText}}
}
thanks
This is the best Angular tutorial! Thank you so much
Thank you Envato!
Thanks for this very detailed tutorial
some issues with not finding the module due to not having a baseUrl set, after setting this to ./src and removing src from the import location this worked. Probably also coul have used .src/etc in the import
Thanks! This saved me a lot of headache!
thank you, you made it very easy.
worth every second!!!!!
For someone, who is starting this when the @angular/cli is 17 or more, downgrade the @angular/cli version to 16. You can do this by the following command:
npm i @angular/cli@16.1.0
@Envato Tuts+ - could you help what could be the issue with version 17. The components.module.ts is not available when we create a new angular project. Thanks :)
You truly deserve the $100,000,000. Thank you.
Sorry, I meant - $100, 000, 000,000.
absolute best bro
You sound really nice, reminded me a bit of narrator from Stanley Parable :)
this video made me realize , how bad angular is ... ain't no way you have to write all that boilerplate and overcomplicate everything ; react and frameworks associated with it do everything done here so much easier and you gain insane amount of time
ty for the tutorial , i wanted to understand how angular works and i got a good idea but no way i'm using this on my small projects ; think using angular is only worth it if ur being paid to work on a huge project
I love the animation in the beginning how do y'all did this?!? straight up dragging stuff and setting their time and position? animator where r u
thanks for this tutorial!!
I have one question however. for some reason i didn't have some of the base files you had. Did follow your tutorial step by step though.
is this because of different angular versions?
Hi!
It’s possible that differences in Angular versions might affect the files and structure you see. Ensure that you’re using the same version of Angular (Angular 15) as in the tutorial. You might also want to check the tutorial’s description or linked resources for any additional files or updates.
Hope this helps, cheers!
@@envatotuts thanks!
I was indeed using a different version.
I found a roundabout in Importing CommonModule and FormsModule in the app.components.ts file itself for now.
not sure how it will affect the project overall but for now it seems to work fine.
Excellent course but its a shame it only covers the very basics and barley any RxJs and no NgRx, State Change, Change Detection etc. Anyone has any advice on where should I learn these concepts fast?
Hi! Thanks for the feedback 😊 The official Angular docs and RxJS website offer great resources for learning fast.
Cheers!
Thank you for this valuable tutorial!!!
thank u, really great work, best tutorial
is there a reason to not use ng generate component to add your components?
28:12 how did you do that paste with all of the stuffs?
What version of angular is being used in this tutorial?
16
i'm having some trouble to generate app.module.ts file, what supose to be? help please
whats the version of angular youre using?
let's go first time learning angular
Thank you for an amazing material ♥️
PS: This feeling when JetBrains pops up the whole code on the first character.
Hi! We're glad you enjoyed the material! 😊 And yes, JetBrains can be a lifesaver with its autocomplete-definitely a game-changer!
Cheers! ✨
Thanks for a really great work!
Before I start with this video is there any pre-requisite that I need to complete?
Nice, good explanation! 👍
thank you so much,good video
how do you get the CDN line for bootstrap to appear in your code? which vs extension?
To get the CDN line for Bootstrap to appear in your code automatically, you don’t necessarily need a specific Visual Studio (VS) extension. However, you can use the "Emmet" feature in VS Code, which is built-in, to quickly add the Bootstrap CDN. Just type link:css and press Tab, then replace the URL with the Bootstrap CDN link. If you want a more automated way, you can install the "Bootstrap 4 & Font awesome snippets" extension, which includes shortcuts for adding Bootstrap links.
Hope this helps, cheers!
Hello sir, thank you very much for this tutorial. I have question. For implementation of ouput directive, why you used parentheses for (addWish) and (filter) but you used brackets for [wishes] ??? Excuses my english, I'm french speaker. Thank you.
One type of parentheses is for output and the other one for input
Hi, I understood almost all of course till now but I did not understand the purpose of Lecture 3.3 Setting Up Two Way Binding, can anyone explain to me? I understood how to set up custom two way binding but did it understand why it was done there at all as it made things more complicated and confusing.
this.filter = filters[val];
this.filterChange.emit(this.filter);
Also what is the point of line 2 (emitting) after this.filter has already been correctly set?
Hi! Great question. The purpose of this.filterChange.emit(this.filter) is to notify the parent component about the updated filter value, which is essential in custom two-way data binding. The parent component needs to know about this change to update its state and reflect the changes properly in the UI.
Hope this helps! Cheers!
@@envatotuts Tysm!! I actually understood this after 1 hour of wondering, looking at the code and asking to ChatGPT. Btw so far its a great tutorial!
I'm at 6:55 it asked me if I want to enable server-side rendering and static site generation, should I have said yes? I said no
Hello,
Can you please explain how to got bootstrap link in index.html at 23:55 in the vedio.
First comment. Worth a trophy
bro needs oscar
Are there any major changes from 13 to 16 ? my companys code base is in 13 so can i adapt to that if i learn this
Hi! While the core tools in After Effects have stayed similar from versions 13 to 16, newer features and performance enhancements were added in later releases. Learning with this course should still set you up well, but check the differences in specific tools you need to see if there’s any adaptation required. Enjoy exploring AE!
Cheers!
Does the tutorial cover State management ngrx?
I encountered NG0100: ExpressionChangedAfterItHasBeenChecked in 4.1 Using Observables. How to fix this?
Subscribed from india...
28:09 how did you paste that markup???
Thank youuuu 😊😊
how can i make my classes implements OnInit by default when i generate a components ?
What is the Angular version used in this tutorial???
3:56:58
route table
router link
is there practice project with this video tutorial
?
What color theme is this? anyone knows maybe ? i mean the same effect in *ngIf =" ......."
I like your theme can you tell me which one of is it ?
I dont see app.module.ts file being created when I did the setup. Any idea how to fix it?
You'll have to create a new app if you absolutely have to have a project structure similar to the one handled in this course. Just use an additional flag when generating the app. So instead of just typing in ng new wishlist enter the following: ng new wishlist --standalone false
Hi! If the app.module.ts file isn’t created, it could be due to an incomplete Angular setup. Make sure you’ve run ng new project-name correctly, and that the Angular CLI is installed globally. If the issue persists, reinstall the CLI and try again.
Cheers!
@@envatotuts I believe Angular 17+ simply doesn't generate this file by default unless you set a special option when creating your app via CLI
thank you so much
what version is this 16 ?
Some one pls tell me, how he is doing this: 28:12?
What's the vscode theme?
cool video)
01:53:43
thanks
is this Angular 16?
no ng command (not recognized) reinstalled node js but still no ng
you probably installed currently newest version of node that doesnt support angular. Try installing the version he did.
@@MirageDreamer550 Thanks, reinstalled node.js with chocolately and now not only ng is not recognized but npm is also an unknown command
i di have a working environment some years ago with a basic pagewith angular in the browser
@@MirageDreamer550 Thanks again, found it after several reinstall attempts, linking etc. You HAVE to install with admin privs (elevated) as well and ng will work. Looks like i had a %PATH% issue. Also ran ino the problem that the node version has to be an even number, fnm didnt help but i was able to install using chocolatey
Awesome tutorial! Thank you
3:07:12 the what now
best
- - no-standalon
It's just a holiday!
I am stuck at 1:57:15 . I get this error when trying to use the ngClass directive : NG8002: Can't bind to 'ngClass' since it isn't a known property of 'label'.
SOLUTION:
In Angular 17 it seems like using ngClass directive in a label causes this unexpected behavior. Anyway , the solution I found requires you to use the class binding directly in labels If you only need to apply a single CSS class conditionally:
Anyway, I still push on, Angular looks interesting!
28:35
Is it just me or is there something about the way he says $100,000,000,000?