I followed the tutorial and put the code on Github with timestamps: github.com/PalmTreeBlvd/angular-crash-todolist Go to the commit history to see the codebase at different points throughout the video. Including all of the CSS. I backed up @45:08, @49:00, @56:18, @1:01, @1:04:22, @1:08:11, @1:09:35, @1:17:01, @1:19:34, and at the end of the video. It is also heavily commented so if you don't understand something, you can try reading it from my (still learning) perspective. And I re-named some of the todo variables to make it less confusing.
Would it be possible to do an updated version of the MEAN app? Basically expanding on this concept from this app and add the server connected to MongoDB.
Its lovely to see your acme web design on vs code editor even when other youtubers open the editor...u said its flattering in one of your videos..that video has 1.5 million hits..you are simply awesome..wish u good luck for all ur future endevours and ur son lots f love.. From India
Hi, Thanks for the detailed angular course. Very much appreciated. But facing one prob though in adding a ToDo into UI. I consoled everywhere, ToDo is passing till ToDoservice but post request to server returning undefined. It creates a new Item in UI but with no title.
Hey Brad, in the middle of watching this video - great as always. Just wanted to let you know that I scored a top web developer job in San Francisco last year. I spent three months beforehand watching your videos and filling in a few technology gaps. Even though I have 15 years experience I needed to get up to speed with some of the tech job requirements (node, gulp, es6, etc). Luckily I was able to do that by watching your tutorials. Got the job (after seven interviews) and was able to hit the ground running. Very grateful. I have an Angular project to build at work and this video has got me started. Thanks for your help. Keep up the good work.
Your voice is like drug to me. Actually I can’t explain..I just love to listen and listen .. that’s why I see your videos two times. First time I just listen and second time I code.. u r so polite.. Love and respect.. Some words can’t explain my love and respect for u . I wish I can meet with u someday so that I can explain and want to say that Thank You and how much u helped me..
I followed the tutorial and put the code on Github with timestamps: github.com/PalmTreeBlvd/angular-crash-todolist Go to the commit history to see the codebase at different points throughout the video. Including all of the CSS. I backed up @45:08, @49:00, @56:18, @1:01, @1:04:22, @1:08:11, @1:09:35, @1:17:01, @1:19:34, and at the end of the video. It is also heavily commented so if you don't understand something, you can try reading it from my (still learning) perspective. And I re-named some of the todo variables to make it less confusing.
Thanks man, super useful. By the way when I add multiple todos and click on the delete box, all of them (the newly added ones) just get deleted. Are you having the same problem and if yes, do you know how to fix it?
@@VarisTheHacker yeah it seems like his code is broken. Other people were getting the same problem with their code. Unfortunately I don't know how to fix it
Amazing crash course. It's exactly what I was looking for. Watching a crash course is much more productive, I think. You can get a very good idea of how the platform works, rather then wasting your time splitting hairs about every single thing you could possible do with it.
Once I watched an Angular course, that was doing tests in a project, then make class in another project, and we stopped at every turn. Never finished it. This crash course on the other hand, was amazing. All the sources were available, and everything went smoothly and well explained. I really like how you explain, and in a few times it was funny. Great course! Thanks! =)
thanks for this tutorial. I would recommend explaining how certain things work and why we need certain things like a "service" when you can easily acomplish the same thing without a service. Many people who are watching this dont know what MVC is, they just want to build their tool or app. So we need to understand at least a little bit on the value of MVC and why we need services to promote single responsibility, code-reuse and scalability. I know thats a whole another topic but a mention of it when making certain decisions is important. Also your naming conventions are very confusing and makes it hard to understand the flow of data. But overall this is still one of the most useful tutorials, quick and to the point.
Thanks Brad! Amazing as always! 2 small fixes: 1. Adding new Todos all get generated with an id of '201' which means they all get deleted at once. Solution: Add 1 line to the addTodo function in todos.component.ts addTodo(todo: Todo) { this.todoService.addTodo(todo).subscribe(todo => { // Overwrite ID to be unique todo.id = Date.now(); this.todos.push(todo); }); } 2. The Checkbox on a todo doesn't check to see if a todo is completed on init. Solution: Add 1 line on the checkbox input /
Work put me on a job that is still in AngularJS client side, so it is still around as well. I've been working in node server side but I don't have much experience in Angular. Once again, Brad to the rescue!
Dude...this made Observables and EventEmitters/Output so so SO easy to understand. I feel like I can write a decent app just knowing how to navigate the HttpClientModule the way you demonstrated in this video. I've taken Angular courses and I'm brushing up to make a new website for my singing work. THIS was the jump-start I needed. Thank you so so much!
The most decent tutorial I've faced, thanks a lot! That's just a fantastic feeling when you've never coded in typescript and have no experience in Angular and just typing code in after you and it works! And then, just closer to the end of the video you're realizing that you can actually do your own little things now with Angular! Just the best possible format of teaching, well, at least for me, so just BRILLIANT!
Beautiful thanks! Folks, anything that Brad demos, either here or on Udemy - just works! I've tried Udemy for lots of technologies, Brad's courses included. Always some issue requiring Q&A intervention, except for Brad Traversy's videos - everything looks beautiful, everything just works
I agree with everyone else, your voice is great and you definitely know what you're doing because of the speed that you operate at. There were so many files and folders to go through and that was probably the trickiest part- knowing which file to switch over to. But overall a great video to start learning Angular on!
From my understanding @Injectable is only required in a service if another service will be injected into it. Therefore it is not technically needed in this app but Angular adds it by default because it is best practice. Correct me if I'm wrong anyone, haven't been doing Angular for too long.
What can I say; The Best tutorial I have seen so far; Keep up the good work Brad!! In addition I like Haytham Ghandour 's suggestion regarding getClasses; And also to be consistent; I would also bind the 'checked' property of the checkBox to the completed boolean as follows;
Thank You for this video, Angular is much simpler than I first imagined. What was overwhelming from the start was the amount of files it creates, but it actually makes a lot of sense. Very good tutorial, easy to follow, 10/10 would code up another project with you Brad! :D
This course makes it possible to read Google’s documentation and passionately compose the picture of the Angular in all it’s complexity. Priceless indeed, though still in video, at the end you just must make this promise as you feel like something is going on, bu5 it’s so fast you just can’t grasp the idea. You should honestly warn people that it’s ok, you will open the world of Angular in its integrity - just read the docs. This course is like a glimps into production - demo
Well, yes, being a crash course it’s supposed to construct a structure, conceptual approach of Angular. And though practical part was implemented, it’s lack of theory. Practice is this Todo app building. But would be so great to get also schematic structure in theory. I mean how this paradigm of component building links to classes. Subconsciously you feel the logic behind it, but is really necessary to make it obvious, to define. Or personally I feel it’s constructing itself and it requires a huge amount of questions to be answered. And you don’t know where to start
For those of you who are wondering where he got the css from...if you click the "code" link in the description and go to his github page, click the src folder and go to "styles.css". It's in there like swimwear.
Great tutorial. it took me 5 hours to code along with it, as i had to figure that when you use like: id:number; i had errors and found that i had to write it as id!:number; it happened a few other places around the program but the "!" did the job. I had issues with script policies as well but i made it work. thanks a lot for this awesome tutorial! :)
Actually, React's package.json is 40 lines (With react-router and an extra line at the end). Vue's package.json is 45 lines (With vue-router and an extra line at the end). Angular's package.json is 46 lines (With angular-router and an extra line at the end).
This is a good video. But if I could make a suggestion I'd say that next time try not to use "Todo" as a name for everything you create because it makes it difficult to follow what is what. In these circumstances it's probably better to be a bit more verbose and explicitly say things such as todoItem, deleteTodoEvent, etc. I'm a software engineer with a backend background but - even for me - it was hard sometimes not to get lost because it seems the same name was being used everywhere, for everything. Anyway, it's a good tutorial for beginners! Congrats
I agree. The tutorial is great but the naming conventions are difficult, not just for people learning, but also generally for anyone else who would be working on such a project. Even outside of teaching todoItem and deleteToDoEvent are sensible names and would be preferable than just 'todo' all over the place
I fully agree. It's a very good video, well explained many thanks and congrats to the teacher...but the subject is hard and the naming made it harder sometimes
In his defense he makes a lot of tutorial videos really fast, and yet he does get the point across. If he wanted to make them even better, basic naming conventions for production ready code would boost quality tremendously
Amazing video! Thank you very much. I am a seasoned (to not say old) analyst and developer, this video gave me the overview I needed to decide whether Angular was right for my project. I know how much work goes into making these videos, so Congratulations! Hope so see more. And I will chip in ;-)
Coming from Angular.js (yes the old one), I really enjoyed this crash course. It gave me just enough to start with the basics in about, one well spent hour. Thank you! You've got a new subscriber :-)
This is a very good crash course and my sincere thanks go to Mister B Traversy. I had been thinking I would go full stack (as I'm a BE developer already), because, well, money, but now after seeing this I am thinking that I would probably get bored doing FE work. I will continue to learn FE for the purpose of being able to put a FE on my own BE projects, but there's just not much of a challenge here that I can see.
Such an excellent tutorial! High quality, well explained and no nonsense. I'm gonna have to watch this one again due to the sheer density of the material, but I can already see the power and potential of using this framework.
Yes, please.. Actual MEAN Stack with authentication, email, authorization, stripe projects, as in multiple projects, please. It's one thing to get a taste of something, but to own the material is another matter altogether. Using AJAX in the projects would be excellent, as well. No one seems to put it all together and that is frustrating.
here i am making the best content on angular 9 latest features with cool examples, you can probably check my channel. ua-cam.com/channels/-FyE8pmbzUw7sb293FOdlA.html?view_as=subscriber
Great course! I just wanted to mention that the delete todo method in your place holder service definitely should be done the other way. This way if the delete request fails it will still be removed from the UI on the front end, telling the user the todo was deleted when it was not. The front end should almost always reflect the backend data. You should always wait to update the UI untill you recieve a good status from the backend. Unless you chose to catch a bad response from the backend and then update the UI to inform the user.
Absolutely astonishing, what I wanted to do with it is a diagram represented a 3d image of the built model and some sort of repeating exercises so to perceive it from different points of view. Little tasks concentrated on concepts like Input, Output, Emmiting and especially syntax and also important those functions which are preset like ng in the end. Intuitively you imagine what is there but not sure
needed a good starting point for angular (coming from react).. I knew all I had to do was type in Traversy Media Angular and I would find something awesome right away. 🔥🔥🔥
Brad, thank you so much. Your tutorials have increased my knowledge about web-development by an exponential amount. Hope to see more patreons to support your hard work in the coming future!
the only place you SHOULD put sudo prior to npm is post it online and warning other node.js programmers to avoid running npm with sudo. I don't dare writing that so my keyboard's autocorrect won't learn this mistake. Also, good video, thanks for your time
if u have same problem: Error: src/app/components/todo-item/todo-item.component.ts:10:12 - error TS2564: Property 'todo' has no initializer and is not definitely assigned in the constructor. this 10 @Input() todo: Todo; change on this 10 @Input() todo!: Todo;
Brad, thanks dude. I was just starting out with Angular and I found this course to be very informative. Keep it up, I would love to see something like full angular course on any platform you like, full project based where you go from basic to more advanced stuff.
Thank you for the great courses as always. I love all the different series on your channel. I encourage all your subscribers to review all your content. Excellent work
Thank you for this awesome tutorial! I learned a ton about the language! My only recommendation would be to add breaks in between coding snippets or something. The flipping between files and coding was difficult to keep up with. I tried it at .75 speed, but it was to grainy sounding.
love watching your videos..however i think most beginners into coding would like to know the intricacies behind building a project...like what is really required the structure of the project, database design without using firestore (maybe postgresql,or mysql) and the necessary steps like authentication, tokens, validation, how information will be stored to the database, slugs and the reasons for using slugs and all other intricacies .... ill love for you to do a course that dive into that be it udemy or here...of if there is anybody that can direct me to a video like that......Anyways keep up the good work....love your videos
I love Vue, it's way simpler and i have roughly 2 months experience with it. But there are no Vue jobs in my city, now i'm applying for a job that wants Angular. OMG it's super confusing. Thank you for this crash course. ! It came at the perfect time!
I am using this video as a review from what I learned on udemy, and the first thing that caught my attention is when you mentioned index.html, which I thought was the home page, but you only changed the title there. And then you went to app.component.html and that is where you changed the body.
Thanks a lot for publishing this amazing tutorial. It covers a lot of information on a short time, which was exactly what I was looking for. Keep up the great work!
Thank you Brad, its really an awesome explaination, very much easy to understand, and anyone can follow along, thanks for clean stuff. I was searching such video since couple of days. I loved it, Thank you once again
This really is a great video. For me. I would have left the deleteTodo in the item, and set a prop on the passed in todo called deleted. And hidden the todo based on that prop so as to keep all of the verbs in the same file. Right or wrong it makes my brain hurt less. On next data load it would not have been in the dom any longer. The example of how to essentially use the scope {} directive linking from angular 1 is priceless. I haven't seen this example anywhere.
Faster console.log('') in Intellij do the following: Settings->LiveTemplates->Javascript->Click + type cl instead of add custom description as template text use: console.log('$PARAM$');$END$ click define below (in blue) and select javascript DONE
@41:14, are lines 18-25 considered correct syntax? Because that is really confusing at a glance. why is todo property set to true? why is "is-complete" property in single quotes?
I would actually just create an interface for models that do not have functions, no need for a class if the class doesn’t do any computation. Nice video though, definitely covers some core principles people new to Angular should learn. I started professionally with Angular and learned a bit of React from your crash course, thanks!
Thanks a lot for this crush course. I have React background and now I understand why developers love Angular even though it has so much configurations.
I would add at todo-item.component.html -> "[checked]=todo.completed" inside the so that when a task loads and is already done to load also the checkmark. Great Course TY!
Wow, i think you remind my mind at times, i was thinking of starting and angular and BOOM you drop a crash course on it! Man i love you and your content brad. I also got your bootstrap and angular courses on Udemy today, GREAT CONTENT ! Keep it up !
Thank you so much for this video, it was great for getting acquainted with Angular! I'm new to front end development, and the flow of this video was just right. Not too hard so I couldn't follow, and not too easy. Keep it up man!
thank you for the detailed explanation. the thing is - we can not really learn to write it by ourselves. it's like we see and understand, but this language is not very methodical
If the List is not styled (i.e. the delete buttons are not propperly aligned on the right) but you did Everything Exactly The Same as Traversy did, try adding "get " before setClasses () in the todo-item.component.ts. I don't know why, I barely started to understand Angular, but I've troubleshooted on the internet and that's what it worked for me. The result on my end for the ts bit of code for ngClass is like the following. Hope it helps. // Set Dynamic Classes get setClasses() { let classes = { todo: true, 'is-complete': this.todo.completed } return classes; }
I'm a CS student looking to learn C#, .NET, and Angular, looking for both a handful of other students and a handful of experienced mentors to collaborate. I have a Discord set up, as of this writing there's two of us (both students). We'd like to get about a dozen people into the study group and work together to help each other learn. Either self taught or enrolled in traditional schools is fine. If you're interested respond or direct message me, I'll give you a discord link, my Github username, plus other connection info and we'll get you plugged in to our study group. I'm posting this all over my favorite YT channels and Reddit hoping interested people will see it.
Events = 42:37
Create Service = 45:19
Implement HTTP Module: 48:40
Adding Header: 1:08:10
not all heroes wear capes
I followed the tutorial and put the code on Github with timestamps: github.com/PalmTreeBlvd/angular-crash-todolist
Go to the commit history to see the codebase at different points throughout the video. Including all of the CSS.
I backed up @45:08, @49:00, @56:18, @1:01, @1:04:22, @1:08:11, @1:09:35, @1:17:01, @1:19:34, and at the end of the video.
It is also heavily commented so if you don't understand something, you can try reading it from my (still learning) perspective.
And I re-named some of the todo variables to make it less confusing.
@@tvguideondemand i love you
@@redox2596 🙏
note to self: ng g s services is the command for service, ng g c components is for components
Next updated crash course....Slides end around 11:20..
Would it be possible to do an updated version of the MEAN app? Basically expanding on this concept from this app and add the server connected to MongoDB.
Please do a PostgreSQL crash course! Love to hear from you! ❤️❤️
Its lovely to see your acme web design on vs code editor even when other youtubers open the editor...u said its flattering in one of your videos..that video has 1.5 million hits..you are simply awesome..wish u good luck for all ur future endevours and ur son lots f love..
From India
DO YOU MAKE A VIDEO OF ANGULAR INTEGRATED WITH SPRING BOOT?
Hi, Thanks for the detailed angular course. Very much appreciated. But facing one prob though in adding a ToDo into UI. I consoled everywhere, ToDo is passing till ToDoservice but post request to server returning undefined. It creates a new Item in UI but with no title.
Hey Brad, in the middle of watching this video - great as always. Just wanted to let you know that I scored a top web developer job in San Francisco last year. I spent three months beforehand watching your videos and filling in a few technology gaps. Even though I have 15 years experience I needed to get up to speed with some of the tech job requirements (node, gulp, es6, etc). Luckily I was able to do that by watching your tutorials. Got the job (after seven interviews) and was able to hit the ground running. Very grateful. I have an Angular project to build at work and this video has got me started. Thanks for your help. Keep up the good work.
Your voice is like drug to me. Actually I can’t explain..I just love to listen and listen .. that’s why I see your videos two times. First time I just listen and second time I code.. u r so polite.. Love and respect.. Some words can’t explain my love and respect for u . I wish I can meet with u someday so that I can explain and want to say that Thank You and how much u helped me..
sycophant
Richard Dale Yep but not yours
Thanks friend. Thats very flattering. I appreciate that. Thank you for watching my videos 😊
@@techtipsuk Get out you noob
And I thought I was the only one, Reallly!!!!!!!!!!!!!!!!!!
I followed the tutorial and put the code on Github with timestamps: github.com/PalmTreeBlvd/angular-crash-todolist
Go to the commit history to see the codebase at different points throughout the video. Including all of the CSS.
I backed up @45:08, @49:00, @56:18, @1:01, @1:04:22, @1:08:11, @1:09:35, @1:17:01, @1:19:34, and at the end of the video.
It is also heavily commented so if you don't understand something, you can try reading it from my (still learning) perspective.
And I re-named some of the todo variables to make it less confusing.
Thanks man, super useful. By the way when I add multiple todos and click on the delete box, all of them (the newly added ones) just get deleted. Are you having the same problem and if yes, do you know how to fix it?
@@VarisTheHacker yeah it seems like his code is broken. Other people were getting the same problem with their code. Unfortunately I don't know how to fix it
Alright. Anyway thanks for the variable renames, will study your code tomorrow and hopefully have a better understanding. Cheers :)
At around 34:00 you create a for loop in the ul instead of the li, that means you create a separate ul with one li inside for each iteration.
I am senior backend developer and just started Angular few months ago. I have to say it was great and informative.
Brad, words can't express how grateful we all are for your knowledge, thanks!
put a comma after 'Brad'
Here's the CSS needed in 37:40 :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
}
a {
color: #333;
text-decoration: none;
}
.container {
padding: 0 1rem;
}
.btn {
display: inline-block;
border: none;
background: #555;
color: #fff;
padding: 7px 20px;
cursor: pointer;
}
.btn:hover {
background: #666;
}
Came looking for this, thanks =D
Extremely clear. I really appreciate that you explained where certain things are coming from and didn't just say "This is what you type when..."
Amazing crash course. It's exactly what I was looking for.
Watching a crash course is much more productive, I think. You can get a very good idea of how the platform works, rather then wasting your time splitting hairs about every single thing you could possible do with it.
Once I watched an Angular course, that was doing tests in a project, then make class in another project, and we stopped at every turn. Never finished it. This crash course on the other hand, was amazing. All the sources were available, and everything went smoothly and well explained. I really like how you explain, and in a few times it was funny. Great course! Thanks! =)
I appreciate that you did not cut the error occurring parts. That taught me even more.
thanks for this tutorial. I would recommend explaining how certain things work and why we need certain things like a "service" when you can easily acomplish the same thing without a service. Many people who are watching this dont know what MVC is, they just want to build their tool or app. So we need to understand at least a little bit on the value of MVC and why we need services to promote single responsibility, code-reuse and scalability. I know thats a whole another topic but a mention of it when making certain decisions is important. Also your naming conventions are very confusing and makes it hard to understand the flow of data. But overall this is still one of the most useful tutorials, quick and to the point.
second css code:
.del{
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 50%;
cursor: pointer;
float: right;
}
.todo{
background: #f4f4f4;
padding: 10px;
border-bottom: 1px #ccc dotted;
}
.is-complete{
text-decoration: line-through;
}
Thanks =D
When you put the *ngfor on the element, doesn't that generate a new for every item?
Exactly, like in vue v-for. That was a little mistake from Brad. -Edit: oops I'm a bit late to the party
Thanks Brad! Amazing as always!
2 small fixes:
1. Adding new Todos all get generated with an id of '201' which means they all get deleted at once.
Solution: Add 1 line to the addTodo function in todos.component.ts
addTodo(todo: Todo) {
this.todoService.addTodo(todo).subscribe(todo => {
// Overwrite ID to be unique
todo.id = Date.now();
this.todos.push(todo);
});
}
2. The Checkbox on a todo doesn't check to see if a todo is completed on init.
Solution: Add 1 line on the checkbox input
/
Work put me on a job that is still in AngularJS client side, so it is still around as well. I've been working in node server side but I don't have much experience in Angular. Once again, Brad to the rescue!
Dude...this made Observables and EventEmitters/Output so so SO easy to understand. I feel like I can write a decent app just knowing how to navigate the HttpClientModule the way you demonstrated in this video. I've taken Angular courses and I'm brushing up to make a new website for my singing work. THIS was the jump-start I needed. Thank you so so much!
The most decent tutorial I've faced, thanks a lot! That's just a fantastic feeling when you've never coded in typescript and have no experience in Angular and just typing code in after you and it works! And then, just closer to the end of the video you're realizing that you can actually do your own little things now with Angular! Just the best possible format of teaching, well, at least for me, so just BRILLIANT!
Beautiful thanks!
Folks, anything that Brad demos, either here or on Udemy - just works! I've tried Udemy for lots of technologies, Brad's courses included. Always some issue requiring Q&A intervention, except for Brad Traversy's videos - everything looks beautiful, everything just works
Big Agree
I agree with everyone else, your voice is great and you definitely know what you're doing because of the speed that you operate at. There were so many files and folders to go through and that was probably the trickiest part- knowing which file to switch over to. But overall a great video to start learning Angular on!
From my understanding @Injectable is only required in a service if another service will be injected into it. Therefore it is not technically needed in this app but Angular adds it by default because it is best practice.
Correct me if I'm wrong anyone, haven't been doing Angular for too long.
What can I say; The Best tutorial I have seen so far; Keep up the good work Brad!!
In addition I like Haytham Ghandour
's suggestion regarding getClasses;
And also to be consistent;
I would also bind the 'checked' property of the checkBox to the completed boolean as follows;
{{ todo.title }}
X
something about your voice that just makes learning so much easier.. ahhh.
Thank You for this video, Angular is much simpler than I first imagined.
What was overwhelming from the start was the amount of files it creates, but it actually makes a lot of sense.
Very good tutorial, easy to follow, 10/10 would code up another project with you Brad! :D
This literally gave the idea of flow and implementation of Angular, thanks man thanks a lot....
This course makes it possible to read Google’s documentation and passionately compose the picture of the Angular in all it’s complexity. Priceless indeed, though still in video, at the end you just must make this promise as you feel like something is going on, bu5 it’s so fast you just can’t grasp the idea. You should honestly warn people that it’s ok, you will open the world of Angular in its integrity - just read the docs. This course is like a glimps into production - demo
Hey Brad, just wanted to let you know that your videos have helped me more than my lecturers have in all of the semesters I took. Thanks man. Cheers!
Well, yes, being a crash course it’s supposed to construct a structure, conceptual approach of Angular. And though practical part was implemented, it’s lack of theory. Practice is this Todo app building. But would be so great to get also schematic structure in theory. I mean how this paradigm of component building links to classes. Subconsciously you feel the logic behind it, but is really necessary to make it obvious, to define. Or personally I feel it’s constructing itself and it requires a huge amount of questions to be answered. And you don’t know where to start
hope, this might help you understand angular better. ua-cam.com/channels/-FyE8pmbzUw7sb293FOdlA.html?view_as=subscriber
I've just wanted to recall my knowledge of Angular. And you shot this video several hours ago. This is amazing. Thank you, Brad!
same, this is the best crash course out there.
For those of you who are wondering where he got the css from...if you click the "code" link in the description and go to his github page, click the src folder and go to "styles.css". It's in there like swimwear.
[35:00 seen] Migrating around the "x-hr angular course for beginners" videos- this one is the best I've seen so far. Thanks for this! Subscribed.
*Wants to build ionic social language learning app*
"Brad had a sweet Angular crash course....HE UPDATED IT YESTERDAY?!"
You're the man Brad.
Great tutorial. it took me 5 hours to code along with it, as i had to figure that when you use like: id:number; i had errors and found that i had to write it as id!:number; it happened a few other places around the program but the "!" did the job.
I had issues with script policies as well but i made it work. thanks a lot for this awesome tutorial! :)
This is a very good man, and still holding strong for latest Angular version on nov 2020. Thanks
Hi, I want to learn Angular from this video. Can I still follow this video even if with the latest Angular version? Sorry I'm newbie
@@frncscbñz I did and everything worked
You never cease to amaze! Thank you Brad!!! This has kickstarted me into the world of Angular and I'm loving it!
We can use
insted of
This works well too. I think the point that Brad wanted to drive here is how to bind to multiple classes and not just one. 🤔
It's good to see the errors and that you explain them in real time, this si super valuable as this is exactly where beginners (like me) get stuck!
Actually,
React's package.json is 40 lines (With react-router and an extra line at the end).
Vue's package.json is 45 lines (With vue-router and an extra line at the end).
Angular's package.json is 46 lines (With angular-router and an extra line at the end).
This is a good video. But if I could make a suggestion I'd say that next time try not to use "Todo" as a name for everything you create because it makes it difficult to follow what is what. In these circumstances it's probably better to be a bit more verbose and explicitly say things such as todoItem, deleteTodoEvent, etc. I'm a software engineer with a backend background but - even for me - it was hard sometimes not to get lost because it seems the same name was being used everywhere, for everything. Anyway, it's a good tutorial for beginners! Congrats
I agree. The tutorial is great but the naming conventions are difficult, not just for people learning, but also generally for anyone else who would be working on such a project. Even outside of teaching todoItem and deleteToDoEvent are sensible names and would be preferable than just 'todo' all over the place
Yeah, I had to change the name to something else to figure out which todo is being used. Nonetheless, a masterpiece video.
I fully agree. It's a very good video, well explained many thanks and congrats to the teacher...but the subject is hard and the naming made it harder sometimes
his tutorials are very helpful but he lacks on how to write production ready code this is sloppy,
In his defense he makes a lot of tutorial videos really fast, and yet he does get the point across. If he wanted to make them even better, basic naming conventions for production ready code would boost quality tremendously
Amazing video! Thank you very much.
I am a seasoned (to not say old) analyst and developer, this video gave me the overview I needed to decide whether Angular was right for my project.
I know how much work goes into making these videos, so Congratulations!
Hope so see more. And I will chip in ;-)
Coming from Angular.js (yes the old one), I really enjoyed this crash course. It gave me just enough to start with the basics in about, one well spent hour. Thank you! You've got a new subscriber :-)
Traversy Media to the rescue AGAIN when I need to learn something quickly!
This is a very good crash course and my sincere thanks go to Mister B Traversy. I had been thinking I would go full stack (as I'm a BE developer already), because, well, money, but now after seeing this I am thinking that I would probably get bored doing FE work. I will continue to learn FE for the purpose of being able to put a FE on my own BE projects, but there's just not much of a challenge here that I can see.
Such an excellent tutorial! High quality, well explained and no nonsense. I'm gonna have to watch this one again due to the sheer density of the material, but I can already see the power and potential of using this framework.
Pls upload more angular related videos with making more projects
Thanks for this video
Fully agreed, moar videos, moar angular, moar projects (ie angular with firebase or node.js)
Mean stack project plzz authentication and authorization
Yes, please.. Actual MEAN Stack with authentication, email, authorization, stripe projects, as in multiple projects, please. It's one thing to get a taste of something, but to own the material is another matter altogether. Using AJAX in the projects would be excellent, as well. No one seems to put it all together and that is frustrating.
Click out my videos ua-cam.com/channels/QyNrle3Byw8cs7zoX7jJxQ.htmlplaylists?view_as=subscriber
here i am making the best content on angular 9 latest features with cool examples, you can probably check my channel.
ua-cam.com/channels/-FyE8pmbzUw7sb293FOdlA.html?view_as=subscriber
I keep coming back to this after staring at the angular.io website for hours and getting nowhere.
Super helpful.
Great course! I just wanted to mention that the delete todo method in your place holder service definitely should be done the other way. This way if the delete request fails it will still be removed from the UI on the front end, telling the user the todo was deleted when it was not. The front end should almost always reflect the backend data. You should always wait to update the UI untill you recieve a good status from the backend. Unless you chose to catch a bad response from the backend and then update the UI to inform the user.
This is a very good crash course! I haven’t touched angular in a while, and this helped me remember how this framework works. Thank you! :)
On 59:15, can use Observable as return type if this.http.put is passed of Todo generic parameter. That is, this.http.put(url, todo, httpOptions);
Absolutely astonishing, what I wanted to do with it is a diagram represented a 3d image of the built model and some sort of repeating exercises so to perceive it from different points of view. Little tasks concentrated on concepts like Input, Output, Emmiting and especially syntax and also important those functions which are preset like ng in the end. Intuitively you imagine what is there but not sure
Are you for real? We are using angular for my software engineering class and it started YESTERDAY! What a timing
needed a good starting point for angular (coming from react).. I knew all I had to do was type in Traversy Media Angular and I would find something awesome right away. 🔥🔥🔥
haha love code gobblin
~great name. me too.
Brad, thank you so much. Your tutorials have increased my knowledge about web-development by an exponential amount. Hope to see more patreons to support your hard work in the coming future!
the only place you SHOULD put sudo prior to npm is post it online and warning other node.js programmers to avoid running npm with sudo.
I don't dare writing that so my keyboard's autocorrect won't learn this mistake.
Also, good video, thanks for your time
You just did a CRUD operation without all the hype or noise. Kudos!!
if u have same problem:
Error: src/app/components/todo-item/todo-item.component.ts:10:12 - error TS2564: Property 'todo' has no initializer and is not definitely assigned in the constructor.
this
10 @Input() todo: Todo;
change on this
10 @Input() todo!: Todo;
This Video is so helpful to get brush up my basics after a long break.
everything named todo get me confused, naming is very very important
Hahaha lol
I think you should never just watch, always code along to fit your own mental model and try your naming conventions in this case.
I have an urgent need for knowing how to use Angular for my Project. Your video is awesome! Thank you so much for doing this!
Really enjoyable video covering the fundamentals of Angular in less than 90 minutes. I loved it!
Great Work! Keep it up! Every time i want to learn a new technology the first thing i search is Traversy Media Channel.
Brad, thanks dude. I was just starting out with Angular and I found this course to be very informative. Keep it up, I would love to see something like full angular course on any platform you like, full project based where you go from basic to more advanced stuff.
Thank you for the great courses as always. I love all the different series on your channel. I encourage all your subscribers to review all your content. Excellent work
Thank you for this awesome tutorial! I learned a ton about the language! My only recommendation would be to add breaks in between coding snippets or something. The flipping between files and coding was difficult to keep up with. I tried it at .75 speed, but it was to grainy sounding.
I have no word to express my feeling. Simply, you are awesome. Thank you very much. Long live!!!
love watching your videos..however i think most beginners into coding would like to know the intricacies behind building a project...like what is really required the structure of the project, database design without using firestore (maybe postgresql,or mysql) and the necessary steps like authentication, tokens, validation, how information will be stored to the database, slugs and the reasons for using slugs and all other intricacies .... ill love for you to do a course that dive into that be it udemy or here...of if there is anybody that can direct me to a video like that......Anyways keep up the good work....love your videos
update me pls if u get an answer
I love Vue, it's way simpler and i have roughly 2 months experience with it.
But there are no Vue jobs in my city, now i'm applying for a job that wants Angular. OMG it's super confusing.
Thank you for this crash course. ! It came at the perfect time!
vue is super easy and powerful. why companies still using angular its a mistery
I am using this video as a review from what I learned on udemy, and the first thing that caught my attention is when you mentioned index.html, which I thought was the home page, but you only changed the title there. And then you went to app.component.html and that is where you changed the body.
Thanks a lot for publishing this amazing tutorial. It covers a lot of information on a short time, which was exactly what I was looking for. Keep up the great work!
Best tutorial on Angular I've seen yet. Great job!
Thanks man.. Always had a leaning towards angular, if you get past the learning curve. This crash course makes stuff look easy...
Thank you Brad, its really an awesome explaination, very much easy to understand, and anyone can follow along, thanks for clean stuff.
I was searching such video since couple of days.
I loved it, Thank you once again
Im using and loving Vue.js but the way Angular is handling some things just blew my mind.
This really is a great video. For me. I would have left the deleteTodo in the item, and set a prop on the passed in todo called deleted. And hidden the todo based on that prop so as to keep all of the verbs in the same file. Right or wrong it makes my brain hurt less. On next data load it would not have been in the dom any longer. The example of how to essentially use the scope {} directive linking from angular 1 is priceless. I haven't seen this example anywhere.
That's another GREAT tutorial of you Brad! Thank you so much for your non-stop work!!
Faster console.log('') in Intellij do the following:
Settings->LiveTemplates->Javascript->Click +
type cl instead of
add custom description
as template text use: console.log('$PARAM$');$END$
click define below (in blue) and select javascript
DONE
@41:14, are lines 18-25 considered correct syntax? Because that is really confusing at a glance. why is todo property set to true? why is "is-complete" property in single quotes?
I would actually just create an interface for models that do not have functions, no need for a class if the class doesn’t do any computation. Nice video though, definitely covers some core principles people new to Angular should learn. I started professionally with Angular and learned a bit of React from your crash course, thanks!
Thanks a lot for this crush course. I have React background and now I understand why developers love Angular even though it has so much configurations.
I would add at todo-item.component.html -> "[checked]=todo.completed" inside the so that when a task loads and is already done to load also the checkmark. Great Course TY!
Thank you so much for making this video. I was waiting an Angular video from you.
Wow, i think you remind my mind at times, i was thinking of starting and angular and BOOM you drop a crash course on it! Man i love you and your content brad. I also got your bootstrap and angular courses on Udemy today, GREAT CONTENT ! Keep it up !
Man, I just love your videos. You should do a Laravel + Angular course. Thanks for the good work
The Greatest of All Times TEACHER!!! Salute!
Thank you so much for this video, it was great for getting acquainted with Angular! I'm new to front end development, and the flow of this video was just right.
Not too hard so I couldn't follow, and not too easy. Keep it up man!
thank you for the detailed explanation. the thing is - we can not really learn to write it by ourselves. it's like we see and understand, but this language is not very methodical
Really great tutorial!! Even for a short period there is a lot of information to build the basics on Angular. Thanks for sharing that!!! Keep up!!!
Was a little off practice..great refreshment for angular..perfect time Brad..love your videos and many thanks..
Thanks a lot for this course! It helped me out to understand the Angular and how to run it on a local machine.
Great video. This helps me to learn angular very fast.Keep your good work and thanks for video
Thank you, good explanation for a beginner like me! Angular seems really complicated but you made it easy!
in todo-item.component.html, to set the checked attribute to the todos.completed = true coming back from the service, use:
[checked]=todo.completed
At the 42:11 or the ngClass = [setClasses] there, how is the program knows which classes is belong to, like is-complete is belong to the todos.title.
Excellent course. Really enjoyed the introduction to Angular.
Your crash course series is amazing, thanks for so many useful tutorials. :)
If the List is not styled (i.e. the delete buttons are not propperly aligned on the right) but you did Everything Exactly The Same as Traversy did, try adding "get " before setClasses () in the todo-item.component.ts.
I don't know why, I barely started to understand Angular, but I've troubleshooted on the internet and that's what it worked for me.
The result on my end for the ts bit of code for ngClass is like the following. Hope it helps.
// Set Dynamic Classes
get setClasses() {
let classes = {
todo: true,
'is-complete': this.todo.completed
}
return classes;
}
I'm a CS student looking to learn C#, .NET, and Angular, looking for both a handful of other students and a handful of experienced mentors to collaborate. I have a Discord set up, as of this writing there's two of us (both students). We'd like to get about a dozen people into the study group and work together to help each other learn. Either self taught or enrolled in traditional schools is fine. If you're interested respond or direct message me, I'll give you a discord link, my Github username, plus other connection info and we'll get you plugged in to our study group. I'm posting this all over my favorite YT channels and Reddit hoping interested people will see it.
Thank you for the tutorial, I enjoyed it a lot!
It is indeed easy to follow and covered most of the features of Angular for us beginners.
Very useful video and u managed to cover lot of aspect of angular and also explained very neatly about the usage. Thanks a lot..!