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

[UsmanTheDev]

Today i got my first job due to your courses. Love and respect for you from pakistan

[pleFly]

If you have the error where your variables have not been initialized = that's because typescript requires you to initialize your variables similiar to strongly typed languages. While you should have a default value set and work with this feature to really utilize typescript, for this small 'project' you could just put an exclamation mark before your variables and it will let you leave them uninitialized, for example: subscription!: Subscription; or @Input() task!: Task;

[robertrey]

Hey Brad you have built really an awesome channel over the years. Even though I don't really spend much time with Web Dev anymore, I still like to come back from time to time and watch your content, as well as your insights on life/work/mental health etc... Truly amazing work

[damienquamme]

If you're using Angular 17, you do have to import the component, at least I had to in order to get this to work. Example below:
app.component.html

import { HeaderComponent } from

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, HeaderComponent],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-crash';
}

[hashanhemachandra]

Thanks so much Brad. Thanks to this tutorial, I got my first job as a Software Engineer. Your life story is so inspiring and motivated me in my journey. I was a mechanical engineer and with so much hard work, I was able to shift my career. And on that journey, you played a most crucial role. May gods blessings be with you every day. Love and Respect form Sri Lanka ❤️

[kevyyar]

We need a full course Brad! You explain so much better than all those other instructors!

[karlchiucinco]

Thank you so much for that crash course! I think you covered all the fundamentals in building an Angular app.
No boring lectures, just straight coding which is what I need!

[muthu]

Finally!.. I've been waiting for Angular Crash Course for a long time👍

[alexanderbarsukov]

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.

[jinge]

I saw this tutorial 2 times, and it was well organized tutorial for a new learners means most concepts needed in Angular in just 2 hours with small todo app.
Did a good job!

[MubinKhanLodhi]

Brilliantly explained ... I've been doing Angular related projects for a while but mostly it was a Google search to get different things done, with your course, everything is covered so wonderfully that now I have a better hang of it. Thanks a ton ... Keep up the good work !!!

[bornultimat]

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!!

[reezuanrahim]

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.

[john_michael_white]

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!

[moefarid]

Brad, we love your work and amazing tutorials. Big fan!!

[marcogrillo]

I searched many other courses in yt and even though this is a crash course with older version than actual is still the best around. Keep going Brad!

[lenvaz]

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.

[robertjesuraj]

Wanted to appreciate the effort you put to make the points clear. Great teaching skill❤️. This angular 2 hr course is enough to build great applications.👍 covers all topics. 👏

[uncreativename]

Can I just say I love the little notes and comparisons you sprinkle in for people who are coming from React
Like saying "It's like props" or "You don't need to import this here" for example
It actually really helped me better understand this, and of course this is an amazing video as usual overall!
Thank you!

[rohitpurkait]

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;