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
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
Does differ much? I mean if this course Is about new angular Will be the same if i actually Need to learn about old One? Most concepts i bet they are the same but maybe the structure May be different?
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. ♥
Hi mate! Im in the same situation, I was using MERN and now for the internship I will go for Angular. How did you manage to migrate from React to Angular? Can you tell about your experience such as, which topics were hard to understand compared with React? I am familiar with AngularJS btw.
@@dilantaskn928 Hey! Well what do you know, it's happening to me as well! :D Im a React developer who just got into an internship where I will be using Angular. I have zero experience with Angular. Any advice would be greatly appreciated. Thank you!
@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
Exactly. I'm still at directives, but so far it was an amazing course. Especially becasue I'm a backend dev, so he answered every "but why" question that I had, while explaining concepts or functionalities in the standard way. Plus, he showed some great things like - how to use a debugger in the browseer.
@@TechTalksWithSantosh thank you for the awesome video. Pls I am currently stuck at the point where api proxying was used. After I added the proxy.config file... I couldn't move further. I noticed you destructured your main.ts away from the default template provided by Angular. I am not using nextJs and don't intend to for this my mock project. Pls how do I configure my project to be able to use the api for the hotelinventoryapp project?
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 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
@@ScrotoloOttavoNano Enough for basic stuff, suggest to watch at least 2 times then read the docs to see what's new in the latest angular for improvements.
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.
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.
I am getting an error after executing tsc --init. What to do The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
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.
@@josestudyingenglish-vk6ie It’s pretty useful for you to form a solid foundation on Angular. However, I do suggest that, instead of just copying line for line everything he does, try to build a completely different app and only use this video for reference. That way, you can actually absorb the knowledge better. For example, instead of coding a to-do list like him, I created an app that allows you to upload posts, with stuff like captions, tags, and images. Although my app is more complicated, it uses the same, fundamental functions as his app: create, edit, and delete entries from a database.
@@josestudyingenglish-vk6ie Yes its still relevant and guy is part of Angular developers so we are lucky these days that stuff like this is here for free. developers 20 years ago were not this lucky.
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!!!
This a great course of angular beginners. To the people who are criticising the course for not going into the details, First of all it’s a free course on UA-cam. If you want a detailed explanation on every single thing go through the documentation else get a paid course where you’d get all the detailed explanation you want. Second, It’s an angular course, you should be good in the basics of OOP and JavaScript before starting angular
I've completed up to 12:20:00 and I have to say that this is one of the best courses I've taken. Santhosh is pretty great at clearing up why and when a concept is required.
If vs code terminal doesn't work to run Angular project using ng serve, open a powershell terminal and paste it: Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned then type Y to answer the question
What I really like about the instructor is that he goes into great depth on each topic and gives good examples. The only thing I have to add is that to watch this video you must know how to master the basic concepts of programming and especially JavaScript. Otherwise, everything is excellent. 9 hours and a half for now.
Timestamp from 14 hours 14:02:53 How to submit the Form 15:35:35 Custom validators in reactive form 15:54:00 Add the custom-validation error to the control
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!
I am watching this, and Angular 16 is the newest version right now. I have been learning React, but I want to learn Angular for general knowledge. The teacher is great, for sure, but I don't understand it clearly. For those who are watching this course, God bless you. You are actually learning two things at the same time.
This session is not just about learning angular, but also learning " the experience" of an angular experienced developer, this is rare to get from tutorials. Glad that i found this tutorial.
Cara, que curso incrível e de graça... me faz ficar triste por ter gastado dinheiro com esses professores de plataforma que querem dividir todo o conteúdo em vários cursos. muuuito obrigado
For anyone who thinks the tutorial is going too slow for your taste, I would like to confess I felt that too. But I can assure you, if you skip this tutorial you are going to miss information that no other tutorial is ever going to touch. When you work on a project with a particular language, ever had that feeling of, 'damn I didn't know this thing can be done with this ' . Yeah this video goes to that depth. So, if you think this tutor is going slow, is keep repeating himself, stuttering every now and then and leave, know that you are missing out getting free experience from an experienced developer.
@@aammssaamm Standard packages for common tasks, if you install react you only get maybe state management then you have to decide what else to install, with angular you get: forms, pwa, testing, web components, animations, i18n and more from just installing the angular package. For me what I love is that Angular was built from the ground up in typescript, when I use other frameworks the typescript configuration feels like an afterthought.
What is the extension you use that has the smart autocomplete. On your video, when you type something, it's smart enough to figure out what you are gonna type next, so it displays it in a "gray" font-color, and then you can press the Tab button to add it. What is that extension? Best Angular Tutorial I've seen, bravo!!!!
~16:23:32 that error is solved like this: 1. in room-list.component.ts in the line @Input() rooms: Array | null = [ ]; 2. remove the ' | null = [ ] ' 3. And there you have it. Idk why Santosh doesnt show it, but there is the solution. filter custom pipe room of rooms
Since we are getting a lot of info every week, please upload a course on Digital Note-making. Like Notion or Obsidian. That will really help to manage all this info.
thank you so much Sir. Your teaching skills are amazing. I found this video getting progressively better. Utilizing so much open source things really making in me urge to give it back to the world in some way or other. And I really want it to continue for long...
If you are again having problem at 4:57:50 then copy this in your roomlist.component.ts file on above import { CommonModule } from '@angular/common'; And then also replace your @component decorator thing with this @Component({ selector: 'hinv-rooms-list', standalone: true, imports: [CommonModule], templateUrl: './rooms-list.component.html', styleUrl: './rooms-list.component.css' }) Here imports have changes to [CommonModule]
I'm learning a lot here. 5.5 hours in. On a lighter note, has anyone who's completed the 17 hours, counted how many times the room was mistyped as romm..??
hey I am also trying to go accordingly with this video, but when I am trying to create a component and do all stuff done at 3:13:32, the rooms component is not getting rendered, so how did you resolve this issue? did you install angular 13 like this course or 17 (latest angular)
@@Grovelaar most people don't have to watch it in 1 sitting. You can always use it as a reference. For example, if u ever need video documentation on something like ngIf, you can either google it for the written docs but if you find that confusing, a video like this is an excellent quick starter on the topic.
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.
As the course says, angular for beginners it needs more explanation than just tutorials - at some points i felt like i get what you are dng but not exactly why and how are you dng it. For eg: like the @Input @viewchild it should been explained like for transferring data from parent -> child its @input and from child-> patent is @viewchild But here it just felt like open a random file give a variable then open another html file bind it.. then use it into another file using @Input I just felt understanding angular more difficult. I tried to followup but then went on to another course and it made things easier This course is not bad either but it should have been explained more as its a beginners course
Special Thanks to you. Angular was a Huge step to learn it for me. You maked it very easy to me. I love the theme you used : can u tell me the name of your vscode Theme. Thank you.
Even though angular 17 is out now, learning from this video is still resourceful. Obviously you will have to use the angular docs, but learning with that is very helpful, and by reading docs, you will get more acquainted of learning from docs, and this is a great skill for a software developer
Thank you for this great video @TechTalkWithSantosh.. Please I need help at the http and observations section of the video... can anyone offer me help. I am not able to access the api after creating the proxy.config file
First of all I'd like to say thank you for the awesome course. At 8:00:49 how come you mentioned the "api" is on localhost/3000 but the get request is sent to localhost:4200? This keeps returning an error on my end as Not Found because the request is sent to 4200 and not 3000 I followed every instruction. In my experience with apis the get request is always sent to the endpoint of the server and not the client.
2:28:59 it didn't asked for server-side rendering for the instructor, but asked me in terminal, so to get similar results as instructor (i.e. same files) say no to server-side rendering when asked on terminal
I have reached midway into the course. I can say that although the explanation is good, but without the github link to the code, it is pretty useless to complete the tutorial. In the end the user (i.e. you, the beginner) will get confused about all of it. Santosh should have created a separate file for each new topic and shared the complete code link in the description.
@@aditikhedkar8514 Beacuse of minor errors that cause us frustration. And because we are repeatedly commenting out older code and writing newer code in same file. Ultimately, older code becomes unusable even on uncommenting.
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
thank you sir for doing the needful
blessings upon you
thank you
thank you very much
Thank you. U saved me so much time
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
The hero we needed
Great ya super
thank u
can I know the version of Angular being used? TY
You are a life saver
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
Successfully finished 17 hours of course. Excellent
how many days it took??
@@akbarshaik6781 almost a week
How to download API code brother
pls I need help with adding the api to my code
@@suryak4224 in x4
2:31:00
update in Angular 17 use --no-standalone to create app.module files
ty
Does differ much? I mean if this course Is about new angular Will be the same if i actually Need to learn about old One? Most concepts i bet they are the same but maybe the structure May be different?
or just use the versions of angular and node he is using.not that hard to do and teaches you a little about nvm
You are a GOD
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. ♥
Java is definitely the better choice than Node. Also give Blazor Server a try. It's pretty amazing!
Hi mate! Im in the same situation, I was using MERN and now for the internship I will go for Angular. How did you manage to migrate from React to Angular? Can you tell about your experience such as, which topics were hard to understand compared with React? I am familiar with AngularJS btw.
@@dilantaskn928 Hey! Well what do you know, it's happening to me as well! :D Im a React developer who just got into an internship where I will be using Angular. I have zero experience with Angular. Any advice would be greatly appreciated. Thank you!
I’m coming to Brazil 😂😂
I hope it did work out for you my man! Have a good one mate!
@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
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.
Exactly. I'm still at directives, but so far it was an amazing course. Especially becasue I'm a backend dev, so he answered every "but why" question that I had, while explaining concepts or functionalities in the standard way. Plus, he showed some great things like - how to use a debugger in the browseer.
I didn't know that a youtube course can be this great ! Thank you so much. Done all the 17 hours
Thank you 💙 please do share with your friends and if possible, share a word on Twitter you can tag me as well.
@@TechTalksWithSantosh thank you for the awesome video. Pls I am currently stuck at the point where api proxying was used. After I added the proxy.config file... I couldn't move further. I noticed you destructured your main.ts away from the default template provided by Angular. I am not using nextJs and don't intend to for this my mock project. Pls how do I configure my project to be able to use the api for the hotelinventoryapp project?
@@a_betatv for API you can choose Anu dummy API if you don't want to use nestjs
@@TechTalksWithSantosh where can I find that API?
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
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
17 hours of true coding learning and experience. It's long, but worth it, you can't learn angular in just 2-3 hours.
But can you do that in 17?
@@ScrotoloOttavoNano You can learn enough to improve on your own, it's like driving a car, you learn enough to be able to improve without a tutor
@@ScrotoloOttavoNano Enough for basic stuff, suggest to watch at least 2 times then read the docs to see what's new in the latest angular for improvements.
How long have you token to finish?
Do i need to learn JavaScript in order to learn this course
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.
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.
my thoughts, exactly. thanks, Fernando, for articulating for all of us : )
Thank you 💙💙
@@stephanieezat-panah7750 Thank you 💙💙
I am getting an error after executing tsc --init. What to do The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the
spelling of the name, or if a path was included, verify that the path is correct and try again.
@@AlokKumar-ot9sx add the path of tsc in environment variables
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.
do you think that this tutorial is useful yet ? i have to learn angular for a posible work and i don't know what course i should take.
@@josestudyingenglish-vk6ie It’s pretty useful for you to form a solid foundation on Angular. However, I do suggest that, instead of just copying line for line everything he does, try to build a completely different app and only use this video for reference. That way, you can actually absorb the knowledge better. For example, instead of coding a to-do list like him, I created an app that allows you to upload posts, with stuff like captions, tags, and images. Although my app is more complicated, it uses the same, fundamental functions as his app: create, edit, and delete entries from a database.
@@josestudyingenglish-vk6ie Yes its still relevant and guy is part of Angular developers so we are lucky these days that stuff like this is here for free. developers 20 years ago were not this lucky.
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!!!
This a great course of angular beginners. To the people who are criticising the course for not going into the details, First of all it’s a free course on UA-cam. If you want a detailed explanation on every single thing go through the documentation else get a paid course where you’d get all the detailed explanation you want. Second, It’s an angular course, you should be good in the basics of OOP and JavaScript before starting angular
I've completed up to 12:20:00 and I have to say that this is one of the best courses I've taken. Santhosh is pretty great at clearing up why and when a concept is required.
Is it worth it? I'm thinking to start this course
@@Bartwal11 definitely. Make sure to take notes as and when you learn because you will definitely need to revise these topics every now and then
Can I start this course with no prior knowledge of JavaScript?
Appreciating myself for completing this course in just two weeks while balancing my job (7-Oct-2024)
Thank you for this, I finished university two weeks ago and got my first job as a java / angular developer. This is so great
Where u learnt angular
@@shantivaranasi231 never learnt it, I’ve worked with react before but this will be my first time working with angular
Same here :) Hope your job start went well!
How to popup a image when we click on that in a tag?
personal progress - day1 3:27:37
day 2 5:07:14
day3 5:36:57
Finally, my beloved fcc makes my angular have a spotlight right now. Thank you, fcc.
If vs code terminal doesn't work to run Angular project using ng serve, open a powershell terminal and paste it:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
then type Y to answer the question
0:30 Typescript Starts
2:20:20 Angular Starts
4:10:00
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.
Very interesting ryt?
Thank you for having this free video tutorial. I am now at Directives ngIf @ 3:34:20 moving to ngFor . I am looking forward to finish this video. :)
Helpline📲📥⬆️
Questions can come in⬆️
What I really like about the instructor is that he goes into great depth on each topic and gives good examples. The only thing I have to add is that to watch this video you must know how to master the basic concepts of programming and especially JavaScript. Otherwise, everything is excellent. 9 hours and a half for now.
Can I start this course with no prior knowledge of JavaScript?
@@vedasathvikamadapati4 i recomend to learn javascript, at least cover all the topics such as dom manipulation, wokring with API and so on.
I know a decent amount of JS. I wan to know if I need to take a Typescript course before taking this course.
@@joelkwashie25 yes
Greatest tutorial on angular. Full of details on all important concepts/topics of Angular. Thank you sir.
Please try asking him on his own channel maybe he might respond.
~1:25:00 confusion of rest/spread operators, rest will take the "rest" of the arguments, and put them into an array into the "rested" parameter
Timestamp from 14 hours
14:02:53 How to submit the Form
15:35:35 Custom validators in reactive form
15:54:00 Add the custom-validation error to the control
A amazing video, love the interactivity. love how he doesnt make the content sound too confusing. Thank!
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!
Thank you so much for creating such wonderful content! Thanks to all the members that are associated with this course🌸
I am watching this, and Angular 16 is the newest version right now. I have been learning React, but I want to learn Angular for general knowledge. The teacher is great, for sure, but I don't understand it clearly. For those who are watching this course, God bless you. You are actually learning two things at the same time.
which two things
Hey everyone, a lot of people were looking for API code, now it's added into the description
Can I start this course with no prior knowledge of JavaScript?
@@vedasathvikamadapati4 it covers basics of typescript, you can start from here and make sure to dive deep into typescript later.
This session is not just about learning angular, but also learning " the experience" of an angular experienced developer, this is rare to get from tutorials. Glad that i found this tutorial.
Is angular still relevant in 2024 ?
The instructor says he's teaching Angular 12 in this course. How could this have come out a year ago?
@@rahulgaurr09 Great question! I'm not sure, companies still use it though.
Cara, que curso incrível e de graça... me faz ficar triste por ter gastado dinheiro com esses professores de plataforma que querem dividir todo o conteúdo em vários cursos. muuuito obrigado
Sim, concordo, é uma ótima oportunidade de aprendizado e o preço é justo. Obrigado também
I was waiting for Angular
Bhai badiya course banaya hai. Thank you from my bottom of my heart . 😊
Thank you 💙💙
pls I need a head on on the http and observation segment, would you be willing to help?
Bro where is api?
For anyone who thinks the tutorial is going too slow for your taste, I would like to confess I felt that too. But I can assure you, if you skip this tutorial you are going to miss information that no other tutorial is ever going to touch. When you work on a project with a particular language, ever had that feeling of, 'damn I didn't know this thing can be done with this ' . Yeah this video goes to that depth. So, if you think this tutor is going slow, is keep repeating himself, stuttering every now and then and leave, know that you are missing out getting free experience from an experienced developer.
I love ANGULAR. I cant wait to dive into this1
What to love there?
@@aammssaamm Standard packages for common tasks, if you install react you only get maybe state management then you have to decide what else to install, with angular you get:
forms, pwa, testing, web components, animations, i18n and more from just installing the angular package.
For me what I love is that Angular was built from the ground up in typescript, when I use other frameworks the typescript configuration feels like an afterthought.
@@TayambaMwanza And no event flow management. 😂 Let's not talk about codebase size and performance. 😂
Thanks!
What is the extension you use that has the smart autocomplete. On your video, when you type something, it's smart enough to figure out what you are gonna type next, so it displays it in a "gray" font-color, and then you can press the Tab button to add it.
What is that extension?
Best Angular Tutorial I've seen, bravo!!!!
github copilot
~16:23:32 that error is solved like this:
1. in room-list.component.ts in the line @Input() rooms: Array | null = [ ];
2. remove the ' | null = [ ] '
3. And there you have it. Idk why Santosh doesnt show it, but there is the solution.
filter custom pipe room of rooms
Since we are getting a lot of info every week, please upload a course on Digital Note-making.
Like Notion or Obsidian.
That will really help to manage all this info.
or separate this video in chapters, to re-view important concepts, please!
@@dexdexdex the video has timestamps to easily keep track of your progress
i'm thrilled to thank the way you tought us Typescript in this video, really i came from zero to hero in typescript.
thank you so much Sir. Your teaching skills are amazing. I found this video getting progressively better. Utilizing so much open source things really making in me urge to give it back to the world in some way or other. And I really want it to continue for long...
If you are again having problem at 4:57:50 then copy this in your roomlist.component.ts file on above
import { CommonModule } from '@angular/common';
And then also replace your @component decorator thing with this
@Component({
selector: 'hinv-rooms-list',
standalone: true,
imports: [CommonModule],
templateUrl: './rooms-list.component.html',
styleUrl: './rooms-list.component.css'
}) Here imports have changes to [CommonModule]
Amazing Course (so helpful and understandable) .. thank you ❤❤
Thank you 💙
At some moments I thought this guy is learning ts together with us :)
I know. but, you know, it is nice that Santosh also made mistakes and had to figure them out.
such humility. appreciate that : )
Thanks for the course, Santosh! Finished it last week and it was amazing. Learned a lot!
I'm learning a lot here. 5.5 hours in. On a lighter note, has anyone who's completed the 17 hours, counted how many times the room was mistyped as romm..??
i can tell you that he mistyped room as romm til the end of the course, that's just funny but this is an excellent free course
The rest parameter to a function (e.g ...num) is equivalent to params[] in C#. (At 1:27:00)
Within a week i had to make front end project in Angular.
And boom FCC came up with this video 🔥
Thank you Santosh for amazing course. 5hrs into lecture and will complete whole.
Santosh ji is an inspiration for us. ❤️🇮🇳
I just starting the tutorial , just the first 30 minutes. It looks to be very good tutorial as Mr. Santhosh explain the what and the why
This course is really good. Everything is clear and understandable.
Thank you 💙💙
@@TechTalksWithSantosh Thanks for the video I have watched it two times now!
Thank you so much! Currently at 5 hours, and so far this is the best course i've found anywhere... 🥰
hey I am also trying to go accordingly with this video, but when I am trying to create a component and do all stuff done at 3:13:32, the rooms component is not getting rendered, so how did you resolve this issue? did you install angular 13 like this course or 17 (latest angular)
@@rlm3227 you have to import CommonModule:
import { CommonModule } from '@angular/common';
imports: [CommonModule, RoomsListComponent],
and then run.
I can't believe stuff like this are free 🤑
@@Grovelaar most people don't have to watch it in 1 sitting. You can always use it as a reference.
For example, if u ever need video documentation on something like ngIf, you can either google it for the written docs but if you find that confusing, a video like this is an excellent quick starter on the topic.
Dia 1
33:53 Software Installation
Dia 2
1:13:30
Dia 4
2:20:24
This is what i am looking for thanks a looooot🙂🙂🙂🙂🙏
3:40:30 as for this we could also use
Room List
I'm an automation testing Java Developer.
Starting this course to start learning Front End.
Wish me luck!
Good luck friend!
he gives a lecture for 17 hours without stopping. this man is a fucking machine
Im good at math too :D great videos Santosh
I'm good at lazy
This channel is just wonderful
Thank you for the course.. really helpful as you covered almost everything.. loved it
Longer than yesterday's version.
But the complete one I believe.
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.
As the course says, angular for beginners it needs more explanation than just tutorials - at some points i felt like i get what you are dng but not exactly why and how are you dng it. For eg: like the @Input @viewchild it should been explained like for transferring data from parent -> child its @input and from child-> patent is @viewchild
But here it just felt like open a random file give a variable then open another html file bind it..
then use it into another file using @Input
I just felt understanding angular more difficult. I tried to followup but then went on to another course and it made things easier
This course is not bad either but it should have been explained more as its a beginners course
bro what course did you got, can you please tell me, im on 8hrs here
can you suggest me a more beginner friendly angular course?
Mad respect for sharing so much for free.
Excellent thanks for the course ❤
One of the best course with realtime use cases, thanks a lot 😊
Really good teacher. Nice and calm. Will follow your channel to learn more from you.
Thank you 💙💙
@@TechTalksWithSantosh Where to find api code?
finished 17 hours of course
Thank you
how long did it take
Special Thanks to you. Angular was a Huge step to learn it for me. You maked it very easy to me.
I love the theme you used : can u tell me the name of your vscode Theme.
Thank you.
Thank you 💙💙 its night owl by Sarah Drasner
Great Course for Web Devlopment
I am looking forward for MEAN Full stack on freecodecamp. Please upload MEAN latest video , it will be really helpful.
MEAN or MERN ?
@@LevisRaju A for Angular
Angular - MEAN. , For react there are lot of videos and examples , but for Angular there are very very few which are also years old
@@mozes_ma oh... Thanks bro.
That's gonna be super useful for the next six months. Thank you freecodecamp!
Even though angular 17 is out now, learning from this video is still resourceful. Obviously you will have to use the angular docs, but learning with that is very helpful, and by reading docs, you will get more acquainted of learning from docs, and this is a great skill for a software developer
Thank you for this great video @TechTalkWithSantosh.. Please I need help at the http and observations section of the video... can anyone offer me help. I am not able to access the api after creating the proxy.config file
I met Santosh last year in december at ng-rome!
Awesome speech of him! 😎
Nice course, thanks!
i must say great quality of content with detailed explaination . thank you
First of all I'd like to say thank you for the awesome course.
At 8:00:49 how come you mentioned the "api" is on localhost/3000 but the get request is sent to localhost:4200? This keeps returning an error on my end as Not Found because the request is sent to 4200 and not 3000 I followed every instruction. In my experience with apis the get request is always sent to the endpoint of the server and not the client.
restarting the app (ng serve -o) helped me
where did you get the api file? I've been looking all over because he said he would provide the code for it.
@@geonyeongkim546 me too
@@ukemeedet8675 did you find the source code?
Api code can’t be found
Best Angular course ever
Thanks for the course! Timestamps would have been helpful though :-)
they are in the description!
@@mz1710 Haha..sorry for that, I was just looking for the timestamps in the time progress bar in the video! Great thanks! 🙂
1:54:13 PIN is Postal Index Number (also PIN Code) similar to ZIP code.
If $tsc --init command does not work, as it was happening with me, try npx --package typescript tsc --init
Thanks for putting 17 hours to make this wonderful tutorial
Would be possible to get API repo for practicing API calls by own? BTW amazing course!
Thank you 💙💙 can you send me a DM on twitter or LinkedIn as Yutube deletes the link posted.
Brilliant! Thank you, for this comprehensive course. This is definetly a gem.
Advance PHP tutorial... ( Design Patterns, MVC and OOP will be useful )... This will really help a lot
That would be amazing
RIP PHP 🪦
2:28:59 it didn't asked for server-side rendering for the instructor, but asked me in terminal, so to get similar results as instructor (i.e. same files) say no to server-side rendering when asked on terminal
Thanks for your efforts
Just finished the whole 17 hours. Thank you so much Santosh!.
Please can you make a tutorial on ngrx in Angular for us. More advance Angular concepts
In progress, it should be released around June, do subscribe to my channel
@@TechTalksWithSantosh Alright
3:40:17 Santosh were trying to compare a possibly undefined value and a number, that's what Typescript compiler didn't like
I have reached midway into the course. I can say that although the explanation is good, but without the github link to the code, it is pretty useless to complete the tutorial. In the end the user (i.e. you, the beginner) will get confused about all of it. Santosh should have created a separate file for each new topic and shared the complete code link in the description.
why do we require code when we should be doing it paraelly with him
@@aditikhedkar8514 Beacuse of minor errors that cause us frustration. And because we are repeatedly commenting out older code and writing newer code in same file. Ultimately, older code becomes unusable even on uncommenting.
@@rameshshinde1193 oh right ,totally
Respect exponentially growing for this amazing teacher ❤❤❤