Angular Crash Course
Learn the fundamentals of Angular in this project-based crash course
Video Sponsor:
– Use the code TRAVERSYMEDIA for 10% off!
Code:
Latest Udemy Courses:
? Support The Channel!
Timestamps:
0:00 – Hostinger Sponsor
0:35 – Intro & Slides
7:41 – Angular CLI & Setup
10:39 – Files & Folders
14:49 – Component structure
16:42 – Properties & Interpolation
18:40 – Global Styles
19:20 – Header Component
23:15 – Button Component
24:36 – Component Input Data
22:19 – Creating an event & event emitter output
30:51 – Mock Tasks & Task Interface
34:10 – Tasks Component
36:03 – Looping with ngFor
37:16 – Task Item Component
40:13 – Angular Font Awesome Setup
44:39 – Create a Task Service
49:06 – Creating and Subscribe to Observable
50:04 – JSON-Server Setup
57:29 – Angular HTTP Client
59:48 – Fetching Tasks
1:02:59 – Deleting Tasks
1:12:54 – Toggle Reminder
1:20:29 – Add Task Component
1:26:26 – Forms Module & ngModel
1:29:00 – Submit & Create Task
1:37:02 – Toggle Button & UI Service
1:51:38 – Angular Router
1:57:34 – Limit Component to Route
Today i got my first job due to your courses. Love and respect for you from pakistan
Well done sir
@Slim Yelow Any luck yet ?!?
@Traversy Media there’s a monorepo tool that’s often paired with angular called NX would be cool if you did a tutorial on that. Also try the angular material ui library, basically takes 1 command to setup with cli.
Same here bro! I got my first job watching these videos ?
Woooow congratulation brother, I wish you good luck in your career ))))
I was fighting my way through Udemy course I bought for several days, and after watching 30 minutes of this crash course I already understand more Angular than ever! I am so happy this course appeared today! Thank you so much Brad! If I land a job first thing I’ll do I will buy some of your courses.
Extremely helpful for Angular newbie like me, it is fun to do the programming along with the tutorial and get to know all the concepts while doing it!
In case you getting this compilation error- Property ‘…’ has no initializer and is not definitely assigned in the constructor, add this in tsconfig.json – “strictPropertyInitialization”: false
Or just give the text: string a “” value, and it will work. @Input() text:string = “”;
just note that: if you do this, TS won’t yell at you every time you don’t initialize your properties, which is sometimes useful when you forgot to do so. It would save you more time in the future to just be mindful in initializing them in the constructor.
also the other solution:
@Input text!: string;
mean that you should ALWAYS input a “text” every time you use the component because it expects it. Otherwise, the component doesn’t initialize with text.
another solution is to expect string or “undefined” in the @Input:
@Input text: string|undefined;
which will result in the same thing.
best way, I think is to just initialize default values at the contructor:
@Input() text: string;
@Input() color: string;
constructor() {
this.text = “button text”;
this.color= “green”;
}
so they always have values when you use them in the HTML template.
or add to component constructor for button text. this.text=””
i almost quit this tutorial because of this issue, now it works thank you !!
@A sarraj If your in programming,, This is how everything goes Hence the call us programmers the Problem solvers, there is always a solution to any error
Awesome tutorial! I’d love to see a great in-depth Udemy course. I see you already have one, but it hasn’t been updated yet.
Thank you for being a wonderful teacher!
Hey Bharti! Are you a fresher and open to opportunities in web development currently? Have you created any projects in JavaScript frameworks?
Amazing crash course! Great for anyone to refresh the architecture.
Probably the best Angular tutorial I’ve ever seen…
You really helped me to understand the framework and it’s function!
Especially the combination of Frontend and Backend…
Thank you very much!!
A really very helpful, awesome tutorial! Thank you!
This is a magnificent tutorial. A month ago I watched it, having had a background which included AngularJS several years ago, and now I’m flying with the Angular 13. It’s such a fun framework to develop with once you’re over the learning curve, and getting over it was 100% thanks to you. Great stuff!
56:22 Brad, you can double click a word to select it, type ” and VSCode will wrap the word in quotes instead of what you would normally think it would do, which is to replace the word with a “.
One of the best angular tutorial for beginners. Thank you so much!
Brad, we love your work and amazing tutorials. Big fan!!
This tutorial was awesome, normally I would just lurk but I felt a need to say how much I appreciate you making this video. As you led on, my background is with React so I agree Angular can be a little more tricky but I’m tempted to watch your React video as well just because I like your style so much and see if I pick up anything
I think this is by far the most complete Angular tutorial done in two hours.. although it is not meant for a total beginner. Well done.. tq.
Just recently started learning Angular since the company I work for requires you to learn it and I want to teach myself Ionic at some point. I use to not like Angular, but I am starting to really enjoy it. Mainly because of how simple it is to build components and services to integrate existing third party APIs. Hope it will be here to stay for a long time?
Same here. I was a vue dev before and after learning angular, I’m enjoying it more
Excellent introduction to Angular; very helpful; concise but still complete. Thanks a million.
For minor corrections which actually mislead begginers most of the time is when you used a function call directly into the *ngIf condition for add task button. It does effect an application of this size but it does affect larger applications as a function can always have a different output.
Even though it’s more complex than react and vue but I like the way it structured,
Thanks Brad for making our life easier
If you are using the latest version of ts then make sure to declare your variables in the constructor otherwise it will throw an error.
You can also use an ! sign after the variables. For example, @Input task!: Task;
@Terria You can do that but I wouldn’t recommend it. If you’re using TS it’s because you want your code to be a bit safer and more predictable, unless you want all your variables to be possibly undefined without explicitly typing them that way. It’s safer to explicitly annotate the types as possibly undefined as you need them to be rather than making everything more loosely typed.
you can also add “strictPropertyInitialization”: false in the tsconfig.json compilerOptions.
thank you!
@Mico Dioquino Many Many Thanks, Its nice for me, Help after 2 hour, I can’t solve the error before your example, @Input() text: string; its Error in latest versions !!!!
@Chris Ockenden No problem, having cut my teeth on real statically typed languages I really miss strong type checking when I don’t have it! It’s so useful to be able to look at a type definition and know exactly what it’s composed of.
I was getting this error while declaring “onDelete(task)” (1:04:50): Parameter ‘task’ implicitly has an ‘any’ type.ts(7006) angular. I fixed declaring as “onDelete(task: any)”.
It’s also possible to change “noImplicitAny”: false, at “tsconfig.json” file, but I didn’t tried this way.
As @Febo Bebo said, to be precise you should declare “onDelete(task: Task)”
Thank you very much, your comment helped me right away.
I think it’s better that I get used to declaring variable type, as that is a great feature of TypeScript.
By the way, to be more precise set variable type to Task.
Thanks!!!