Angular Full Course - Complete Zero to Hero Angular full Tutorial

we learn about Angular A to z from scratch, so this is an Angular Full course where you can learn Angular Javascript framework top to bottom.

00:00:00 Course Introduction
00:01:42 Angular & Angular CLI
00:02:12 What is Angular?
00:07:21 What is Single Page Application?
00:09:27 What is Angular CLI?
00:10:34 Angular CLI Setup
00:12:30 First Angular App
00:15:21 Angular File Structure Part I
00:20:07 Angular File Structure Part II
00:21:46 Angular File Structure Part III
00:24:57 End Section Angular & Angular CLI
00:25:33 Intro Angular Components
00:26:06 What is Angular Component
00:31:27 Create an Angular Component
00:40:51 How Loads Components Inside the Browser
00:44:24 Templates & Styles Component Properties
00:49:42 Better Approach for Templates & Styles
00:55:17 Generate Angular Components using Angular CLI
01:00:06 NgOnInit() Lifecycle Hook
01:02:11 Data Binding
01:05:43 Sharing Data Between Components
01:07:55 Parent Child Relationship
01:11:04 @Input Decorator
01:15:27 Task
01:16:51 Solution
01:21:17 @ViewChild Decorator
01:29:11 @Output & Event Emitter
01:37:47 End Section Component
01:38:43 Section Intro Display Data & Event Handling
01:39:06 String Interpolation
01:43:53 Property Binding
01:47:30 Class Binding
01:50:17 Style Binding
01:55:49 Event Binding
02:00:46 Event Filtering
02:07:15 Template Variable
02:10:25 Two-Way Data Binding
02:14:54 One-Way Vs Two-Way Data Binding
02:21:19 Task
02:23:37 Solution I
02:29:10 Solution II
02:37:01 End Section Data Binding
02:37:53 Section Intro Directives
02:38:32 What is Angular Directive?
02:40:44 NgFor Directive
02:47:22 Fetch Object Array
02:53:03 Angular Change Detection
02:58:18 Usage of Array Index
03:01:11 NgIf Directive
03:06:06 NgTemplate Directive
03:10:29 NgSwitchCase Directive
03:17:40 NgStyle Directive
03:22:11 NgClass Directive
03:25:26 Structural Directive VS Attribute Directives
03:29:40 Task
03:31:11 Solution I
03:43:56 Section Intro Pipes
03:44:21 What is Angular Pipes & types of Pipes
03:45:30 Uppercase Lowercase Pipes
03:47:45 Number Pipes
03:51:40 Currency Pipes
03:55:22 Date Pipes
03:57:35 JSON Pipe
03:59:21 Percent Pipe
04:00:37 Slice Pipe
04:02:51 Custom Pipe I
04:11:03 Create Custom Pipe Using Angular CLI
04:13:08 Custom Pipes With Arguments
04:17:13 Section Intro - Angular Services
04:17:46 What is Angular Service
04:20:13 Create Angular Service Manual
04:22:25 Dependency Injection
04:28:42 DI Providers and Injectable Decorator
04:35:55 Generate Angular Service Using Angular CLI
04:37:46 Usage of Angular Service
04:41:29 Angular Interface
04:49:27 Section Intro - Template Driven Forms
04:49:59 Angular Forms Types
04:51:50 Creating Bootstrap Forms
04:56:53 NgForm Directive
05:01:43 NgForm & Form Group Class
05:05:27 NgModel & FormControl Class
05:09:45 Form Validation
05:16:47 Styling Invalid Inputs
05:19:53 Form Validation Types
05:22:22 Validating Email Input Field
05:25:18 Validating Text Area
05:26:17 Error Fix
05:26:48 Styling All invalid input fields Validation Error
05:27:58 Form Submission
05:30:44 Disable Submit Button
05:32:50 Section End
05:33:17 Section Intro Reactive Forms
05:33:53 Reactive Form Setup
05:36:47 Creating Reactive Form Controls Programmatically
05:42:42 Reactive Form Basic Validations
05:44:51 Reactive Form Adding Multiple Validations

05:57:04 Reactive Form Submit and Getting Form Values
06:00:47 Nested Form Groups
06:08:30 Reactive Form Array
06:18:53 Reactive Form Builder
06:26:26 Adding Custom Validations I

06:52:42 Angular Router Outlet
06:55:21 Angular Router Link
06:57:00 Angular Base URL
07:00:10 Angular Base Router
07:02:08 Router Vs Href
07:06:07 Angular RouterLinkActive
07:08:39 Router Parameter Variables
07:14:36 Get Router Parameters
07:19:52 What is Observable
07:23:54 Observable Subscribe
07:25:45 Observable Next
07:28:05 RXJS Observable Vs Functions
07:30:31 Synchronous Vs Asynchronous Programming
07:34:10 Observable Subscribe & Unsubscribe
07:36:49 Multiple Router Parameters
07:40:02 Query Parameters
07:46:22 Separate Module for Angular Routing
07:52:38 Navigate Programmatically
07:56:28 Wild Card Routers
08:00:07 Section End

#angular #angular_developer

[OctAcademy]

Course Content
00:00:00 Course Introduction
00:01:42 Angular & Angular CLI
00:02:12 What is Angular?
00:07:21 What is Single Page Application?
00:09:27 What is Angular CLI?
00:10:34 Angular CLI Setup
00:12:30 First Angular App
00:15:21 Angular File Structure Part I
00:20:07 Angular File Structure Part II
00:21:46 Angular File Structure Part III
00:24:57 End Section Angular & Angular CLI
00:25:33 Intro Angular Components
00:26:06 What is Angular Component
00:31:27 Create an Angular Component
00:40:51 How Loads Components Inside the Browser
00:44:24 Templates & Styles Component Properties
00:49:42 Better Approach for Templates & Styles
00:55:17 Generate Angular Components using Angular CLI
01:00:06 NgOnInit() Lifecycle Hook
01:02:11 Data Binding
01:05:43 Sharing Data Between Components
01:07:55 Parent Child Relationship
01:11:04 @Input Decorator
01:15:27 Task
01:16:51 Solution
01:21:17 @ViewChild Decorator
01:29:11 @Output & Event Emmiter
01:37:47 End Section Component
01:38:43 Section Intro Display Data & Event Handling
01:39:06 String Interpolation
01:43:53 Property Binding
01:47:30 Class Binding
01:50:17 Style Binding
01:55:49 Event Binding
02:00:46 Event Filtering
02:07:15 Template Variable
02:10:25 Two-Way Data Binding
02:14:54 One-Way Vs Two-Way Data Binding
02:21:19 Task
02:23:37 Solution I
02:29:10 Solution II
02:37:01 End Section Data Binding
02:37:53 Section Intro Directives
02:38:32 What is Angular Diresctive?
02:40:44 NgFor Directive
02:47:22 Fetch Object Array
02:53:03 Angular Change Detection
02:58:18 Usage of Array Index
03:01:11 NgIf Directive
03:06:06 NgTemplate Directive
03:10:29 NgSwitchCase Directive
03:17:40 NgStyle Directive
03:22:11 NgClass Directive
03:25:26 Structural Directive VS Attribute Directives
03:29:40 Task
03:31:11 Solution I
03:36:36 Solution II
03:43:10 Section End
03:43:56 Section Intro Pipes
03:44:21 What is Angular Pipes & types of Pipes
03:45:30 Uppercase Lowercase Pipes
03:47:45 Number Pipes
03:51:40 Currency Pipes
03:55:22 Date Pipes
03:57:35 JSON Pipe
03:59:21 Precent Pipe
04:00:37 Slice Pipe
04:02:51 Custom Pipe I
04:08:06 Custom Pipe II
04:11:03 Create Custom Pipe Using Angular CLI
04:13:08 Custom Pipes With Arguments
04:17:13 Section Intro - Angular Services
04:17:46 What is Angular Service
04:20:13 Create Angular Service Manual
04:22:25 Dependency Injection
04:28:42 DI Providers and Injectable Decorator
04:35:55 Generate Angular Serviec Using Angular CLI
04:37:46 Usage of Angular Service
04:41:29 Angular Interface
04:49:04 Section End
04:49:27 Section Intro - Template Driven Forms
04:49:59 Angular Forms Types
04:51:50 Creating Bootstrap Forms
04:56:53 NgForm Directive
05:01:43 NgForm & Form Group Class
05:05:27 NgModel & FormControl Class
05:09:45 Form Validation
05:16:47 Styling Invalid Inputs
05:19:53 Form Validation Types
05:22:22 Validating Email Input Field
05:25:18 Validating Text Area
05:26:17 Error Fix
05:26:48 Styling All invalid input fields Validation Error
05:27:58 Form Submission
05:30:44 Disable Submit Button
05:32:50 Section End
05:33:17 Section Intro Reactive Forms
05:33:53 Reactive Form Setup
05:36:47 Creating Reactive Form Controls Programmatically
05:42:42 Reactive Form Basic Validations
05:44:51 Reactive Form Adding Multiple Validations
05:46:58 Complete all Validations
05:57:04 Reactive Form Submit and Getting Form Values
06:00:47 Nested Form Groups
06:08:30 Reactive Form Array
06:18:53 Reactive Form Builder
06:26:26 Adding Custom Validations I
06:33:24 Adding Custom Validations II
06:40:59 Section End
06:41:52 Section Intro - Angular Routing & Navigation
06:42:29 What is Angular Routing & Navigation
06:44:09 How to implement Angular Routing & Navigation
06:45:10 Create New Angular App
06:47:20 Configure Angular Router
06:52:42 Angular Router Outlet
06:55:21 Angular Router Link
06:57:00 Angular Base URL
07:00:10 Angular Base Router
07:02:08 Router Vs Href
07:06:07 Angular RouterLinkActive
07:08:39 Router Parameter Variables
07:14:36 Get Router Parameters
07:19:52 What is Observable
07:23:54 Observable Subscribe
07:25:45 Observable Next
07:28:05 RXJS Observable Vs Functions
07:30:31 Synchronous Vs Asynchronous Programming
07:34:10 Observable Subscribe & Unsubscribe
07:36:49 Multiple Router Parameters
07:40:02 Query Parameters
07:46:22 Separate Module for Angular Routing
07:52:38 Navigate Programmatically
07:56:28 Wild Card Routers
08:00:07 Section End (Angular Routing & Navigation)

[lukmanhakkim]

This is the Best Angular Tutorial i have ever seen. i could not hold my hand after learn from your video. So i've contribute something for your teaching. you conveyed the knowledge Beautifully. Thanks a lot.

[akshayasharmidevi]

Highly recommended for beginners.. who are searching for a clarity understanding inside Angular..✌

[vxffshp]

Bro this course is a premium level course. I thank you from my heart. Made it so much easy to shift from React to Angular

[harish.bhuvanachandar]

Great tutorial. Simple English. Very crisp explanation. Thanks a ton!

[harisankar]

the best ever tutorial on Angular I have come across .. Thank you so much for your hard work to make it so easy for learners

[andreiaribas]

Thank you so much! Your course is helping me a lot!

[CalebStephensPlaysPiano]

For those that are just now using this tutorial, there obviously has been updates. Angular puts out updates every 6 months. When sharing data from parent to child following the tutorial you might run into an error. The solution is: @Input()
fromParent!: string;

This will allow angular to assign the value coming from the parent at runtime.

[zoro]

Mate, you are god gifted! Thank you for this course.

[shafnisha]

Really proud of you as a Sri Lankan!!!

[gintoki_sakata__]

This guy made it impossible for me to want to learn from anyone else
Youre an awesome teacher 👏

[subramanyaaithal]

You are so good. Patiently explained the topics so well. Thank You so much!

[SonicFictionTV]

Beside <any> solution, at 2:51:43 you can solve the problem on other way .
First I had to export the interface in the app.component.ts file. You can name it how you like it, I choose Post for this exercise.

export interface Post {
id: number;
testTitle: string;
}
Then I had to replace <object> with the Post interface:

objArray: Array <Post> = [
{ id:1, postTitle: 'Post 1'},
{ id:1, postTitle: 'Post 2'},
{ id:1, postTitle: 'Post 3'},
{ id:1, postTitle: 'Post 4'},
{ id:1, postTitle: 'Post 5'},
];

[himanshufulmali]

great content, I'm a beginner in Angular and your teaching is really helping me to understand it easily. Thanks a lot ❤

[sflqihv]

Love the energy you bring to your videos!

[tkumar]

i have watched countless tutorials, but you are definitely one of the best, if not the best out there for tutorials, i did your blog website tutorial and it was amazing! first time i was independently able to do something after just watching your tutorials!

[anghai]

the best tutorial for beginners like me! thanks.

[srikarravoori]

I have seen many tutorials and videos on youtube including udemy, but I don't find this kind of explanation, very simple, and straight forward, great content for free . Thank you

[AmongUs-qtuo]

Im 1.5 hrs into the course. You have taught me more than I learnt in the last 2 months in my class. Hats off to you. god bless u

[RaviPrasad-cqod]

Your Angular tutorial is fantastic! Your teaching style is clear and insightful, and it has made learning these concepts much easier for me as a beginner. Thank you for sharing your knowledge and expertise with us. You have positively impacted my learning journey, Keep up the fantastic work, and please keep sharing your incredible content with us! Thank for the amazing tutorial!