Angular for Beginners Course [Full Front End Tutorial with TypeScript]

Learn Angular in this complete course for beginners. First you will learn the basics of Typescript and then you will learn about important Angular concepts such as binding, dependency injection, forms, routing, and more.

⭐️ Course Contents ⭐️
Introduction
⌨️ (0:00:00) Introduction to Angular
⌨️ (0:09:56) Introduction to Typescript
⌨️ (0:28:57) SPA and Local Setup
Typescript
⌨️ (0:42:09) Typescript Data Types and Functions
⌨️ (1:25:56) Classes and Interface
⌨️ (2:11:10) Typescript decorators and tsconfig file
Angular Installation and Basics
⌨️ (2:20:24) Angular Installation and Binding Syntax
⌨️ (3:25:04) Built-in Directives
⌨️ (4:07:36) Built-in Pipes
⌨️ (4:30:10) Adding Bootstrap CSS to App
Lifecycle Hook and Component Communication
⌨️ (4:44:53) ngOnInt and Component Communication using Input and Output
⌨️ (5:09:32) Change Detection and ngOnChanges
⌨️ (5:36:51) ngDoCheck
⌨️ (5:42:01) ViewChild, ViewChildren and AfterViewInit
⌨️ (6:22:41) Content Projection, AfterContentInit and OnDestroy
Dependency Injection
⌨️ (6:44:55) Introduction
⌨️ (7:09:34) Resolution Modifiers
⌨️ (7:24:06) Value Providers
HttpClient and RxJs
⌨️ (7:41:04) Setting Up HttpClientModule
⌨️ (7:44:07) HttpService , RxJs observables and http get
⌨️ (8:01:28) RxJs Observable and Observer
⌨️ (8:11:59) Http Put and Delete
⌨️ (8:27:10) Http Request
⌨️ (8:40:55) ShareReplay RxJs Operators
⌨️ (8:47:17) Async Pipe
⌨️ (8:57:15) catchError operator
⌨️ (9:05:29) map operator
⌨️ (9:09:06) Http Interceptor
⌨️ (9:29:11) APP_INITIALIZER
Routing Basics
⌨️ (9:35:06) Angular Router and default Route
⌨️ (9:51:01) Adding Angular material and navigation
⌨️ (10:00:35) Wild card, dynamic route and ActivatedRoute service
⌨️ (10:23:19) ParamMap and Activate Route Service
Template Driven Forms
⌨️ (10:25:45) Introduction
⌨️ (10:50:20) Validation
⌨️ (11:09:26) Pristine, Dirty State and Reset Form
⌨️ (11:19:08) Custom Directives and Custom Validation
Advanced Routing
⌨️ (11:49:33) Navigation using Router Service
⌨️ (11:52:34) Feature and Routing Module
⌨️ (12:10:57) Nested and Child Route
⌨️ (12:19:41) Lazy Loading
⌨️ (12:35:49) Configure Lazy Loading using CLI
⌨️ (12:42:46) Using ProvidedIn Any
⌨️ (12:59:15) Router Events
⌨️ (13:06:00) Listening to Router Events
Route Guards
⌨️ (13:08:49) CanActivate
⌨️ (13:21:24) CanActivateChild
⌨️ (13:26:53) CanLoad
Reactive Forms
⌨️ (13:30:44) Introduction
⌨️ (13:41:33) Using Material Controls
⌨️ (13:59:54) Nested Form Controls
⌨️ (14:17:38) Dynamic Forms
⌨️ (14:45:09) Built-in Validators
⌨️ (14:51:50) Reset Form
⌨️ (14:55:15) Control Level Validation
⌨️ (15:05:22) SetValue and PatchValue
⌨️ (15:09:23) ValueChanges and UpdateOn
⌨️ (15:17:40) map operator with Form
⌨️ (15:29:55) Custom Validator
CanDeactivate Guard
⌨️ (15:57:10) CanDeactivate Guard and Form
Custom Pipe
⌨️ (16:15:04) Custom Pipe
Resolve Guard
⌨️ (16:25:39) Resolve Guard
Global Error Handling
⌨️ (16:45:46) Error Handling
Testing Basics
⌨️ (16:50:08) Introduction
⌨️ (16:56:59) First test
⌨️ (17:01:43) Testing Component and Service
Deployment and CI/CD
⌨️ (17:15:44) Using Netlify for Deployment
⌨️ (17:28:06) GitHub Actions to Automate Tasks

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

--

[umhurram]

TImecodes for the first 11 hours

00:00 Introduction to this course
0:35 What is Angular? Angular.js / Angular
3:20 What is component?
4:33 Framework vs Libraries
4:36 Framework
6:00 Libraries
7:12 Features of Angular
8:26 Angular features in action
9:20 What is PWA?
10:00 What is TypeScript?
13:25 Why TypeScript?
16:50 Type Safety
19:25 Installing and Creating First Typescript Program
24:55 Configuration of tsconfig.json
26:15 First file
29:00 Single Page Application
32:20 How Angular helps to build SPA
33:53 Software Installation
42:12 Data Types
1:13:30 Functions
1:26:03 Generic Funciton
1:30:15 Classes
1:51:00 Interfaces
2:11:20 Decorators
2:14:08 ESModules
2:20:32 Setup and Installation of Angular
2:21:26 Installing Angular CLI
2:23:51 Creating Angular workspace
2:25:45 Creating Angular Application inside Workspace
2:30:22 Creating Angular Application
2:31:28 Wokrspace Walkthrough
2:48:34 Introduction to mono-repo
2:54:16 Running application locally
3:07:13 Template Syntax
3:15:25 Binding Syntax
3:20:59 Banana syntax & Box syntax
3:25:16 Directives
3:26:42 Types of Directives
3:27:16 Built-in Directives
3:32:22 *ngIf
3:48:40 *ngFor
4:03:19 [ngClass]
4:05:04 [ngStyle]
4:08:04 Pipes
4:09:45 Built-in Pipes
4:11:15 Pipe Docs References
4:36:02 Adding ng-bootstrap to the Application
4:45:10 Lifecycle Hooks
4:46:54 ngOnInit
4:51:50 Quick Introduction to Component Communication
4:56:17 @Input
5:00:18 Smart and Dumb Components
5:02:46 @Output & EventEmitter
5:16:43 ChangeDetectionStrategy
5:29:18 ngOnChanges
5:36:56 ngDoCheck
5:47:35 ViewChild
5:50:33 ngAfterViewInit
5:57:25 ngAfterViewChecked
6:02:05 ng-template
6:03:03 Dynamic loading of component
6:09:28 Accessing an HTML element using ref
6:16:00 ViewChildren & QueryList
6:23:26 ngAfterContentInit
6:23:44 Content Projection
6:25:23 ng-content
6:30:32 select property of ng-content
6:33:41 ngAfterContentInit
6:35:20 ContentChild
6:38:06 ngOnDestroy
6:43:20 Dependency Injection
6:47:01 Dependency Injection providers
6:50:35 Create a service via CLI
6:53:39 Using dependency injection
6:54:56 why it's important to make services private
6:56:41 Component Interaction Using Services
6:57:35 Dependency Resolution & providedIn: 'root'
6:59:44 A service has only one single instance
7:03:12 Multiple instances of a service (global/local)
7:05:53 Start of a service resolution
7:07:33 The consequence of missing providedIn
7:09:32 Resolution Modifiers
7:10:25 Self decorator
7:14:49 The consequence of missing providers in a component while using @Self
7:16:00 SkipSelf decorator
7:17:33 Optional decorator
7:21:08 Host decorator
7:24:38 Value providers
7:28:26 Creating a value provider
7:32:21 useValue property
7:33:12 Inject value provider
7:37:09 Using localStorage service as a value provider
7:37:38 InjectionToken
7:41:35 Angular Http and Observables
7:43:13 Setting up HttpClient
7:45:03 Mocked backend API
7:45:56 proxy.conf.json
7:48:10 ng serve --proxy-config
7:49:52 Using HttpClient
7:50:47 Getting data from the backend
7:53:24 Observables & RxJS
7:56:25 Push vs Pull architecture
7:58:35 Subscribing to an observable
7:59:50 Getting data from the server
8:00:25 Network tab in Chrome DevTools
8:02:39 Creating a new observable
8:05:23 Subscribing to the created observable
8:12:36 Post operation
8:17:07 Update operation
8:24:30 Delete operation
8:27:41 HttpRequest
8:36:03 Subscription to the multiple events coming from the HttpRequest
8:41:28 RxJS Operators
8:43:10 ShareReplay operator
8:45:58 Modifying stream data by using .pipe() method
8:51:00 saving a subscription for unsubscribing
8:53:55 Back to pipes - AsyncPipe
8:56:39 CatchError operator
9:01:09 Subject
9:06:03 Map operator
9:09:41 Modifying Http Request Headers
9:15:58 Http interceptors
9:18:15 Creating an interceptor
9:26:16 Cloning and modifying the original request
9:29:48 APP_INITIALIZER
9:31:46 Creating initializer service
9:35:44 Angular Routing
9:37:12 What is routes?
9:39:41 Setup router
9:41:37 Router configuration
9:44:21 router-outlet
9:47:15 do not use href
9:48:30 routerLink property
9:51:40 adding Angular Material
9:53:40 Angular Material options
9:56:36 Angular Material Navigation
10:02:17 404 route / wildcard route
10:07:27 Dynamic routes
10:15:07 ActivatedRoute service
10:20:38 ActivatedRoute snapshot
10:21:51 ActivatedRoute params
10:24:36 ActivatedRoute paramMap
10:27:16 Template Driven Forms
10:27:44 Setting up Template Driven Forms
10:31:17 Writing a form
10:42:43 Connecting model with the form
10:43:18 ngModel directive
10:45:20 Form submission
10:51:47 Validating Forms
10:53:51 accessing to the instance of the form
11:01:57 Accessing to the form control
11:10:07 Pristine and Dirty states

[ajayi]

Introduction
⌨ (0:00:00) Introduction to Angular
⌨ (0:09:56) Introduction to Typescript
⌨ (0:28:57) SPA and Local Setup
Typescript
⌨ (0:42:09) Typescript Data Types and Functions
⌨ (1:25:56) Classes and Interface
⌨ (2:11:10) Typescript decorators and tsconfig file
Angular Installation and Basics
⌨ (2:20:24) Angular Installation and Binding Syntax
⌨ (3:25:04) Built-in Directives
⌨ (4:07:36) Built-in Pipes
⌨ (4:30:10) Adding Bootstrap CSS to App
Lifecycle Hook and Component Communication
⌨ (4:44:53) ngOnInt and Component Communication using Input and Output
⌨ (5:09:32) Change Detection and ngOnChanges
⌨ (5:36:51) ngDoCheck
⌨ (5:42:01) ViewChild, ViewChildren and AfterViewInit
⌨ (6:22:41) Content Projection, AfterContentInit and OnDestroy
Dependency Injection
⌨ (6:44:55) Introduction
⌨ (7:09:34) Resolution Modifiers
⌨ (7:24:06) Value Providers
HttpClient and RxJs
⌨ (7:41:04) Setting Up HttpClientModule
⌨ (7:44:07) HttpService, RxJs observables and http get
⌨ (8:01:28) RxJs Observable and Observer
⌨ (8:11:59) Http Put and Delete
⌨ (8:27:10) Http Request
⌨ (8:40:55) ShareReplay RxJs Operators
⌨ (8:47:17) Async Pipe
⌨ (8:57:15) catchError operator
⌨ (9:05:29) map operator
⌨ (9:09:06) Http Interceptor
⌨ (9:29:11) APP_INITIALIZER
Routing Basics
⌨ (9:35:06) Angular Router and default Route
⌨ (9:51:01) Adding Angular material and navigation
⌨ (10:00:35) Wild card, dynamic route and ActivatedRoute service
⌨ (10:23:19) ParamMap and Activate Route Service
Template Driven Forms
⌨ (10:25:45) Introduction
⌨ (10:50:20) Validation
⌨ (11:09:26) Pristine, Dirty State and Reset Form
⌨ (11:19:08) Custom Directives and Custom Validation
Advanced Routing
⌨ (11:49:33) Navigation using Router Service
⌨ (11:52:34) Feature and Routing Module
⌨ (12:10:57) Nested and Child Route
⌨ (12:19:41) Lazy Loading
⌨ (12:35:49) Configure Lazy Loading using CLI
⌨ (12:42:46) Using ProvidedIn Any
⌨ (12:59:15) Router Events
⌨ (13:06:00) Listening to Router Events
Route Guards
⌨ (13:08:49) CanActivate
⌨ (13:21:24) CanActivateChild
⌨ (13:26:53) CanLoad
Reactive Forms
⌨ (13:30:44) Introduction
⌨ (13:41:33) Using Material Controls
⌨ (13:59:54) Nested Form Controls
⌨ (14:17:38) Dynamic Forms
⌨ (14:45:09) Built-in Validators
⌨ (14:51:50) Reset Form
⌨ (14:55:15) Control Level Validation
⌨ (15:05:22) SetValue and PatchValue
⌨ (15:09:23) ValueChanges and UpdateOn
⌨ (15:17:40) map operator with Form
⌨ (15:29:55) Custom Validator
CanDeactivate Guard
⌨ (15:57:10) CanDeactivate Guard and Form
Custom Pipe
⌨ (16:15:04) Custom Pipe
Resolve Guard
⌨ (16:25:39) Resolve Guard
Global Error Handling
⌨ (16:45:46) Error Handling
Testing Basics
⌨ (16:50:08) Introduction
⌨ (16:56:59) First test
⌨ (17:01:43) Testing Component and Service
Deployment and CI/CD
⌨ (17:15:44) Using Netlify for Deployment
⌨ (17:28:06) GitHub Actions to Automate Tasks

[skan]

A few days before my first day as a programmer intern, I've taken the challenge to change from a language I was more comfortable with (Node + React) and trade it for a path with Java, TypeScript and Angular. Java I already had a minimum experience, so I'm building on top of that. However, the curious thing is, this video was released the day before my first day at the on-boarding in my new job (DBServer, based here in Brazil). I have to say, when I saw the notification that morning, I took that as a sign that I made the right choice. Thank all of you for taking the time and effort to share that quality of a knowledge with us for free. Love from Brazil. ♥

[fernandoz]

Awesome course, digging in those little (sometimes annoying) details that every developer needs to know to properly master the language. My humble respects for the time invested in sharing this course.

[mitesh]

@tarasj192
1 month ago
The rest of the timecodes:
11:14:50 Submit and reset Forms
11:19:51 Custom Directive with Forms
11:42:31 Custom Validation
11:50:15 Router Service
11:53:17 Feature Module and Routing
12:11:41 Nested Routes and Child Route
12:20:25 Lazy Loading
12:43:42 Provider type any
13:00:04 Route Guards
13:10:15 CanActivate guard
13:22:15 CanActivateChild guard
13:28:06 CanLoad guard
13:31:32 Reactive Forms
13:37:38 Creating Forms
14:02:45 Submit Forms
14:09:05 Nesting Forms
14:18:32 Adding Controls Dynamically
14:46:02 Built-in Validation
14:52:43 Reset Forms
14:55:42 Validation messages
15:06:16 patchValue vs setValue
15:10:20 Listening to Form value changes
15:18:35 Using RxJs Map operators
15:34:46 Writing Custom Validation
15:58:07 CanDeactivate guard
16:16:05 FormControl with a custom pipe
16:26:39 Resolve guard
16:46:47 Global Error Handling
16:51:09 Testing
17:02:48 Test a service
17:16:47 Application Deploymen
after 11:00:00

[suryak]

Successfully finished 17 hours of course. Excellent

[manishbolbanda]

i havent completed full course yet, done with like 20% of it. but i must say the content is really in depth. this is a power pack. Thanks for putting all the efforts.

[BlyatifulButter]

I'm 9 months late, but I have to say, not only is this course the most effective and free one for me, but also I love the fact that Santosh includes the mistakes made throughout the course. It felt way more genuine, comfortable and relatable and, counter-intuitively, also helped me resolve and avoid them.

[Robcuisimplu]

I didn't know that a youtube course can be this great ! Thank you so much. Done all the 17 hours

[tqeufiy]

17 hours of true coding learning and experience. It's long, but worth it, you can't learn angular in just 2-3 hours.

[Alex-bcxe]

Now we talking, this is something we all waited for.

[INDERJEET-syvv]

00:00 Learn Angular basics and important concepts
06:15 Libraries can be combined to avoid writing extra code
17:50 Type safety in TypeScript
23:55 Introduction to TypeScript
35:10 Install Node.js and npm
41:15 Learn to install and use Visual Studio Code for TypeScript programming.
52:02 Typescript arrays and filter function
57:57 Different Javascript functions and enums.
1:09:45 Avoid using 'any' in codebase
1:16:12 Different ways to write functions in TypeScript
1:29:01 Generics and Classes in TypeScript
1:34:44 Learn TypeScript Basics
1:46:11 Interfaces are important in programming.
1:51:58 Interfaces in TypeScript provide type safety and flexibility
2:03:26 Learn object destructuring and array destructuring in TypeScript
2:09:42 Use classes instead of interfaces for retaining type information in production builds
2:22:03 Install and create an Angular workspace with default project
2:28:36 Learned how to install Angular CLI and create a workspace with default project
2:41:44 Polyfills and zone.js are important for browser compatibility in Angular.
2:47:05 Angular monorepo allows multiple applications and libraries in a single workspace
00:18 Components in Angular have four files associated with them: ts, spec.ts, css/html, and style sheet.
3:04:04 Learn how to write multi-line HTML and use inline styles with Angular 12.
3:16:09 Angular provides three ways to interact with the front-end: interpolation syntax, property binding, and event binding.
3:21:49 Learn about directives and their two types - structural and attribute based.
3:33:51 Use ngIf and optional chaining in Angular templates
3:40:46 Created a room list interface with properties like room type, amenities, price, photos, check-in and check-out time.
00:07 Structural directives modify DOM elements while attribute directives add attributes or logic to elements.
4:01:08 Learn about Pipes in Angular
4:14:44 Learned about currency and JSON pipe in Angular
4:20:34 Don't use slice for pagination in a real-time application
4:33:14 Bootstrap 5 is not compatible with Angular 13
4:41:37 Add Bootstrap to Angular application
4:53:02 Component communication using input and output
4:59:00 Create a reusable component and split components to smallest level possible
5:11:00 Optimizing change detection strategy in Angular
5:18:04 Use onPush change detection strategy for immutable data updates
5:30:59 Learned about input/output and ng on changes
5:37:20 Learn about ng do check lifecycle hook
5:49:50 View child with static true property provides safe access to child component instance
5:55:36 Use static property properly in component initialization
6:08:41 Accessing HTML elements using template references and native element property
6:15:23 View child allows access to first instance of a component while View children allows access to all instances
6:28:41 Create a reusable container component to load content
6:35:19 Accessing components at runtime using view child and content child
6:47:08 Create a service to move reusable code from component
6:53:12 Use dependency injection to create and access services in Angular
7:05:02 Understand Dependency Injection and its resolution modifiers
7:10:38 Use self decorator to ensure service availability at component level
7:23:05 Value providers can be useful to pass an object as a service
7:28:49 Create a service and value provider to use in app module
7:41:26 Learn how to interact with APIs using Angular HTTP and observables.
7:48:29 Set up proxy and make API call using HTTP client service
8:00:25 Learned how to create an observable using RXJS
8:06:25 Understand observable streams and how to create them manually using Observable class
01:10 Learned about making edit and delete calls to API
8:27:26 Learn about the powerful 'request' API and get more information about HTTP calls.
8:40:02 Use the share replay operator to cache requests and improve application speed
8:45:42 Utilize share replay operator and property get rooms to avoid multiple calls while caching the first request
8:57:32 Handling exceptions using catch error in Angular
9:03:38 Learn to use map operator to modify streams
9:15:34 HTTP interceptors can modify requests and responses.
9:23:17 Add token to all HTTP requests using an interceptor
9:34:38 Learn about Angular Router and its functionalities
9:40:33 Configure routes with a default URL
9:52:36 Installed and configured Angular Material and created a responsive navigation bar using schematics
9:59:42 Add a 404 page to handle invalid URLs
10:12:08 Configured dynamic routing and read parameter values
10:17:51 Access dynamic parameters using activated route service
10:30:15 Creating a form to add room functionality
10:37:29 Create a model and connect it to the form for two-way data binding.
10:52:21 Get form status and disable submit button
00:19 Validators can be used to ensure proper form input
11:11:31 Understand the importance of pristine and dirty states in forms
11:17:28 Learn how to reset and preset forms using template-driven forms in Angular
11:29:27 Access and manipulate HTML elements using Angular and JavaScript
11:37:35 Learn how to create a custom directive to validate components
01:36 Use feature modules to group related features together for easier management and sharing.
11:55:32 Refactor app module by creating feature module for rooms.
12:07:40 Refactored codebase into feature modules with its own routing module for better maintainability
12:12:47 Nested routing achieved using children property
12:25:10 Lazy loading modules should be isolated and focus on reusability
12:31:05 Implementing lazy loading for big modules with low frequency of usage
12:41:59 Lazy loading and dependency injection
12:48:33 Using injection tokens to control the number of instances of a service
13:01:23 Understand how to configure and use router events
13:07:16 Learn about router guards and how to implement them using can activate and can load.
13:18:19 Implement guards in Angular
03:52 Implement canLoad route guard for lazy loaded routes
13:35:37 Create a form using reactive forms.
13:42:04 Create and render a form using Material controls
03:27 Added a date picker and nested form controls
14:03:01 Create a form using Angular Material
14:15:54 Learn how to add and remove controls dynamically in Angular forms
14:22:23 Add a submit button to add guests to a form dynamically
14:35:36 Dynamic form control addition and removal
14:42:00 Learned about form array, dynamic controls, and validation using Angular Reactive Forms.
14:54:44 Control level validation added for guest name
15:01:01 Angular Reactive Forms: Setting and Patching Values
15:14:32 Control value changes can be listened to and controlled using ngModelOptions.
04:22 Using different map operators for booking data
15:35:32 Created custom validator for guest name
15:41:20 Implement custom validators in Angular
15:56:09 Add custom validator to your reactive form
16:02:36 Fixed room ID bug and added booking guard
16:18:12 Apply price filter to rooms list
02:08 Learn how to use Resolve Guard for prefetching data
16:39:51 Prefetching Data for Faster Navigation
16:48:17 Implement global error handling in Angular
17:00:04 Testing and Code Coverage
17:06:41 Fixing errors in Rooms Component
17:19:59 Deploy changes automatically with continuous integration using Netlify
17:26:39 Learn how to use Netlify for CI/CD and automate builds with GitHub Actions

[johnlambertasis]

Finally, my beloved fcc makes my angular have a spotlight right now. Thank you, fcc.

[SuryaPraKH]

Completed upto 7:00:00 and I can safely say this is an amazing course. He explains the use case, the reason why certain concepts exist.

[Billy_]

How, but how when i rrly need something this amazing channel surprised me so much! I just changed my current company, and the new one use only Angular...Thank you so much!!!

[graydhd]

What an absolute juggernaut of a video. I'm avoiding it for now in lieu of some shorter introductory vids to Angular, but I'm considering of going all in with understanding the ins and outs of Angular. I'll almost certainly return to watch it in chunks! Currently taking notes vigorously on your shorter Angular vid as it's so thorough.

[ItsMeLeto]

I was waiting for Angular <3 Thank you!

[DriveandThrive]

Change my mind about the audio not bad now for some reason. 4 hours into the video and really love it! So glad its so thorough and comprehensive.

[kaankrcakl]

Brilliant! Thank you, for this comprehensive course. This is definetly a gem.

[TheOGApplePie]

I really appreciate the course and value the length of the content. Santosh is a very knowledgeable individual with proven industry experience. He has a lot to share in this course. One thing I've struggled with in the past is understanding how things connect and why they would be used in the first place. As a form of feedback for @Tech Talks With Santosh, I'd say to design a project that you'd build along as with content this long it can just seem jarring by the amount of information we need to cover. Rather than coming up with use cases and random examples on the fly, a build along series would really help put all the puzzle pieces together and understand why we should do things in certain ways. I like how you started off with the hotel inventory example, but then it felt like there was so much to cover that they stopped adding to the "finished product." Still a fabulous tutorial!