Top 8 Recommended Angular Self-Study Materials! [November 2024]

Summing up, this course allows you to learn Angular in depth, from scratch, and in only 6 days. It's the best Angular course choice for every busy developer or individual in general.

Enroll in this course now and learn how to:

• Create comprehensive front-end applications using Angular

• Use Angular components, modules, and services to create maintainable applications

• Use the most important features of the Angular framework to build real-world applications

• Communicate with web servers for posting, getting, or deleting data from within your angular application

• Use the latest features like Angular Signals and Effects

  
  

What's inside this course:

• Setting up Development Environment for Angular projects

• Typescript Overview

• Angular CLI

• Components

• Modules

• Services (Injection and provider scopes)

• Validation

• Data Binding

• Adding Packages

• Routing

• Template Driven Form Binding (NgModel)

• Pipes

• Angular Material

• Building web apps with user experience (ux) in mind

  
  

In addition, you will easily apply and understand more advanced concepts like:

• NgRx for building reactive web applications

• State management using actions, reducers, store, effects, and selectors

• Reactive extensions like observables for asynchronous tasks

• Unit Testing using Karma and Jasmine

• HTTP RESTful API communication

• Setting up Mock servers using Mockoon

• Global Error Handling

• Directives

• Sending Data to Child Components (Input binding)

• Sending Data to Parent Components (output binding)

• Smart vs Presentational Components

• Component and Directive Selectors

• Angular Signals

• Angular Effects

  
  

30 Day Full Money Back Guarantee

This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture, and do the exercises, and if you feel like this course is not for you, ask for a full refund within 30 days. All your money back, no questions asked.

Enroll now, take the fast lane, and master Angular in only 6 days.

1. Day 1: Building an Appointment app with components and data-binding
2. Defining your Angular goal
3. Day 1 Topics
4. Angular building blocks
5. What you will build
6. Source Code: Appointment App
7. Building Angular applications in a web browser
8. Installing Node.js and Visual Studio Code
9. Important: Update Read this BEFORE you create an Angular project
10. Installing the Angular CLI
11. Angular 17 project creation flag
12. Creating and serving an angular application
13. Angular under the hood
14. Components
15. Creating the appointment-list component
16. Introduction to typescript
17. Using TypeScript in Angular
18. One-way data binding with appointment property
19. Creating an appointment interface
20. Visual Studio Code Angular extension
21. Adding two-way data binding
22. Adding a button click event listener
23. Adding an appointment to the array
24. Adding an appointment list using ngFor
25. Removing appointments
26. Storing appointments in the local storage
27. Using ngOnInit to load appointments from local storage
28. Adding bootstrap
29. Styling the application
30. The most commonly used commands in Angular
31. Handout Components
32. Working with Angular components
33. Day 1 Progress Report
34. Day 2: Build a Hotel Reservation App with Services, Forms, and Routing
35. Day 2 Topics
36. Step-By-Step Exercise: Building a book management system
37. The hotel reservation app
38. Source Code: Hotel App
39. Creating the hotel app project
40. Project architecture hotel app
41. Creating all modules, services and components
42. Creating the reservation interface
43. Creating routes
44. Building a simple navigation
45. Creating a form group
46. Creating the reservation form
47. Validating a form using reactive form validation
48. Dynamically toggle html attributes based on form state
49. Showing validation messages
50. Creating the reservation service
51. Injecting the reservation service into the form component
52. Using the localStorage in the reservation service
53. Showing all reservations in a list
54. ngtemplate and local reference
55. Using the router navigate method to redirect the user
56. Deleting reservations
57. Creating unique ids for reservations
58. Adding the edit route with parameter
59. Editing reservations
60. Combining components from different modules
61. Styling the home component
62. Styling the reservation form component
63. Styling the reservation list component using a table
64. Modules
65. Handout Modules
66. Services
67. Day 2 Progress Report
68. Day 3: Reactive programming with Observables, HTTP and Mock APIs
69. Day 3 Topics
70. Modern web architecture
71. What you will create during this section
72. Using Mockoon as a mock backend api
73. Preparing the project for the mock backend api
74. Calling the mock api using the http client and observables
75. Returning reservations from the mock api
76. Setting up all mock api endpoints
77. Finishing all CRUD operations with observable implementation
78. Handout Observables
79. Day 3 Progress Report
80. Day 4: Building an ecommerce web application with Angular Material and more
81. Day 4 Topics
82. Project overview
83. Important: Project Materials
84. Switching to a new angular version
85. Creating the product module, service and component
86. Creting the product class and clearing the template
87. Setting the product route
88. Setting up the mockoon api
89. Creating environments
90. Getting products from our product service
91. Product list displaying products
92. Serving for environments
93. Installing angular material and exploring cards
94. Creting mat-cards for products
95. Applying the angular material style and product images
96. Responsive product grid
97. Adding an eye-catching hover effect
98. Adding a container css class
99. Adding a navbar
100. Adding a description
101. Creating the cart module, component and service
102. Setting up the cart service methods
103. Getting all cart items
104. Using mat-list for cart items
105. Calculating the total cart price
106. Adding the clear cart and checkout button
107. Exercise: Adding the checkout logic
108. Adding products to cart and popup
109. Adding the search functionality Part 1
110. Adding the search functionality Part 2
111. Adding the sort functionality
112. Day 4 Progress Report
113. Day 5: NgRx - Building reactive web applications with Angular
114. Day 5 Topics
115. The problem NgRx can solve
116. NgRx explained
117. Angular 17 update hint
118. Creating a project for our reactive application
119. Creating the application state
120. Creating actions for adding and deleting books
121. Creating the book reducer part 1: Creating a reducer
122. Creating the book reducer part 2: Change functions
123. Creating the store
124. Creating a component and methods to dispatch our actions
125. Loading books from the store
126. Using the AppState interface for type safety
127. Creating the UI to see our reactive application in action
128. NgRx Basics
129. NgRx effects recap
130. Creating success and failure actions
131. Adjusting the reducer for effects
132. Creating the service for the effect
133. Creating the effect part 1
134. Creating the effect part 2
135. Registering the effect and using Angular Dev Tools to test the application
136. Day 5 Progress Report
137. Day 6: Unit Testing Angular applications with Karma and Jasmine
138. Day 6 Topics
139. Unit Testing in Angular
140. Creating our first unit test
141. Running unit tests using Karma
142. Creating a service to test
143. Unit testing the service
144. Creating a component to test
145. Component fixture for unit testing
146. Handling dependencies for component tests
147. Testing a component property that loads from ngOnInit
148. Testing a components UI functionality
149. Day 6 Progress Report
150. Angular Signals
151. What are Angular Signals
152. Creating an Angular Signal
153. Setting the value of a signal
154. Creating an effect for a signal
155. Computed signals
156. Signal Use Case
157. Signal Inputs
158. Additional Angular Exercises
159. Download Exercise Sheet
160. Moving on

June 17th 2024: Big update released!

The entire course was re-recorded from scratch and was therefore completely updated! It's now 100% up-to-date with the latest version of Angular again, covering crucial modern features like signals, standalone components etc.

Many new deep-dive sections on these core topics were added, hence ensuring that you learn ALL about modern Angular in-depth. In addition, the course also still covers older Angular versions & syntax, so that you get the most out of this course, no matter with which Angular version you're working.

May 23rd 2024: New "Essentials" Sections!

Brand-new "Essentials" sections were added, covering modern Angular (incl. standalone components, signals, new control flow & more) from the ground up.

This course therefore once again teaches modern Angular, whilst also teaching "older" Angular features since many projects are still stuck on old Angular versions. With this course, you'll be ready to work with Angular, no matter which version you might be using in your next project!

---

Join the most comprehensive and bestselling Angular course on Udemy and learn all about this amazing framework from the ground up, in great depth!

This course starts from scratch, you neither need to know Angular 1 nor Angular 2 or any other Angular version!

From Setup to Deployment, this course covers it all! You'll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular App with Modules and Offline Compilation and much more - and in the end: You'll learn how to deploy an application!

But that's not all! This course will also show you how to use the Angular CLI and feature a complete project, which allows you to practice the things learned throughout the course!

And if you do get stuck, you benefit from an extremely fast and friendly support - both via direct messaging or discussion. You have my word! ;-)

Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn as of today. It allows you to build great web apps which offer awesome user experiences! Learn all the fundamentals you need to know to get started developing Angular applications right away.

Hear what my students have to say

"Absolutely fantastic tutorial series. I cannot thank you enough. The quality is first class and your presentational skills are second to none. Keep up this excellent work. You really rock! - Paul Whitehouse"

"The instructor, Max, is very enthusiastic and engaging. He does a great job of explaining what he's doing and why rather than having students just mimic his coding. Max was also very responsive to questions. I would recommend this course and any others that he offers. Thanks, Max!"

"As a person new to both JavaScript and Angular 2 I found this course extremely helpful because Max does a great job of explaining all the important concepts behind the code. Max has a great teaching ability to focus on what his audience needs to understand."

This Course uses TypeScript

TypeScript is the main language used by the official Angular team and the language you'll mostly see in Angular tutorials. It's a superset to JavaScript and makes writing Angular apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular apps. Check out the free videos for more information.

TypeScript knowledge is, however, not required - basic JavaScript knowledge is enough.

Why Angular?

Angular is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular allow you to create complex, customizable, modern, responsive and user friendly web applications.

Angular is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.

Due to the drastic differences between Angular 1 and Angular (= Angular 2+) you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular.

Get a very deep understanding of how to create Angular applications

This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular offers and how to apply them correctly.

Specifically you will learn:

• Which architecture Angular uses

• How to use TypeScript to write Angular applications

• All about directives and components, including the creation of custom directives/ components

• How databinding works

• All about routing and handling navigation

• What pipes are and how to use them

• How to send HTTP requests (e.g. to REST APIs)

• What dependency injection is and how to use it

• How to use modules in Angular

• How to optimize your (bigger) Angular applications

• An introduction to NgRx and complex state management

• We will build a major project in this course so that you can practice all concepts

• And so much more!

Pay once, benefit a lifetime!

Don’t lose any time, gain an edge and start developing now!

1. Getting Started
2. Welcome To The Course!
3. What Exactly Is Angular?
4. Why Would You Use Angular?
5. Angular's Evolution & Stability
6. Creating A New Angular Project
7. Setting Up An Angular Development Environment
8. About This Course
9. Course Setup & Resources
10. Angular Essentials - Components, Templates, Services & More
11. Module Introduction
12. A New Starting Project & Analyzing The Project Structure
13. Understanding Components & How Content Ends Up On The Screen
14. Creating a First Custom Component
15. [Optional] JavaScript Refresher: Classes, Properties & More
16. Configuring the Custom Component
17. Using the Custom Component
18. Styling the Header Component & Adding An Image
19. Managing & Creating Components with the Angular CLI
20. Styling & Using Our Next Custom Component
21. Preparing User Data (To Output Dynamic Content)
22. Storing Data in a Component Class
23. Outputting Dynamic Content with String Interpolation
24. Property Binding & Outputting Computed Values
25. Attribute Binding
26. Using Getters For Computed Values
27. Listening to Events with Event Binding
28. Managing State & Changing Data
29. A Look Behind The Scenes Of Angular's Change Detection Mechanism
30. Introducing Signals
31. We Need More Flexible Components!
32. Defining Component Inputs
33. Required & Optional Inputs
34. Using Signal Inputs
35. We Need Custom Events!
36. Working with Outputs & Emitting Data
37. Using the output() Function
38. Adding Extra Type Information To EventEmitter
39. Exercise: Create a Configurable Component
40. TypeScript: Working With Potentially Undefined Values & Union Types
41. Accepting Objects As Inputs & Adding Appropriate Typings
42. TypeScript: Type Aliases & Interfaces
43. Outputting List Content
44. Outputting Conditional Content
45. Legacy Angular: Using ngFor & ngIf
46. Adding More Components to the Demo App
47. Outputting User-specific Tasks
48. Outputting Task Data in the Task Component
49. Storing Data Models in Separate Files
50. Dynamic CSS Styling with Class Bindings
51. More Component Communication: Deleting Tasks
52. Creating & Conditionally Rendering Another Component
53. Managing The "New Task" Dialog
54. Using Directives & Two-Way-Binding
55. Signals & Two-Way-Binding
56. Handling Form Submission
57. Using the Submitted Data
58. Content Projection with ng-content
59. Transforming Template Data with Pipes
60. Getting Started with Services
61. Getting Started with Dependency Injection
62. More Service Usage & Alternative Dependency Injection Mechanism
63. Time to Practice: Services
64. Using localStorage for Data Storage
65. Module Summary
66. Angular Essentials - Working with Modules
67. Module Introduction
68. A First Introduction To Angular Modules (NgModule)
69. Creating a First Empty Module
70. Bootstrapping Apps with Angular Modules
71. Declaring & Using Components
72. A First Summary
73. Migrating All Components To Use Modules
74. Creating & Using Shared Modules
75. Creating More Complex Module-based App Structures
76. Angular Essentials - Time To Practice
77. Module Introduction & Starting Project
78. Exercise Hints
79. Adding a Header Component With An Image
80. Adding a User Input Component
81. Handling Form Submission
82. Extracting Values with Two-Way-Binding
83. Calculating the Annual Investment Data
84. Cross-Component Communication with Outputs
85. Creating & Using a Data Model
86. Passing Data from Parent to Child with Inputs
87. Outputting Data in a Table
88. Formatting Output with a Pipe
89. Using Signals & Resetting The Form After Submission
90. Using a Service for Cross-Component Communication
91. Using Signals in Services
92. Migrating to Angular Modules
93. Module Summary
94. Debugging Angular Apps
95. Module Introduction
96. Understanding Error Messages & Fixing Errors
97. Debugging Logical Errors with the Browser DevTools & Breakpoints
98. Exploring the Angular DevTools
99. Components & Templates - Deep Dive
100. Module Introduction
101. Starting Project & An Opportunity For Smaller Components?
102. When & How To Split Up Components
103. Splitting A Component Into Multiple Components
104. Creating Reusable Components
105. Component Inputs: Repetition
106. Property Binding: Repetition
107. Using Content Projection & ng-content
108. Adding Forms to Components
109. A Possible, But Not Ideal Way Of Extending Built-in Elements
110. Extending Built-in Elements with Custom Components via Attribute Selectors
111. Supporting Content Projection with Multiple Slots
112. Exploring Advanced Content Projection
113. Defining Content Projection Fallbacks
114. Multi-Element Custom Components & Content Projection
115. Scoping CSS Styles to Components
116. Understanding & Configuring View Encapsulation
117. Making Sense of Component Host Elements
118. Using Host Elements Like Regular Elements
119. Interacting With Host Elements From Inside Components
120. When (Not) To Rely On Host Elements
121. Interacting with Host Elements via @HostListener & @HostBinding
122. Accessing Host Elements Programmatically
123. Class Bindings: Repetition
124. There's More Than One Way Of Binding CSS Classes Dynamically
125. A Closer Look At Dynamic Inline Style Binding
126. Manipulating State & Using Literal Values
127. Introducing the Component Lifecycle: ngOnInit
128. Implementing Lifecycle Interfaces
129. Component Lifecycle - A Deep Dive
130. Component Cleanup with ngOnDestroy
131. Component Cleanup with DestroyRef
132. Handling Form Submissions: Repetition
133. Working with Template Variables
134. Extracting Input Values via Template Variables
135. Template Variables & Component Instances
136. Getting Access to Template Elements via ViewChild
137. Using The viewChild Signal Function
138. ViewChild vs ContentChild
139. A Closer Look at Decorator-based Queries & Lifecycle Hooks
140. The afterRender and afterNextRender Lifecycle Functions
141. Making Sense of Signal Effects
142. Signal Effects Cleanup Functions
143. TypeScript & Type Models: Repetition
144. Component Outputs: Repetition
145. A Closer Look At Template For Loops
146. Revisiting Inputs & Signals
147. Updating Signal Values
148. Cross-Component Communication & State Management
149. Configuring Component Inputs & Outputs
150. Two-Way Binding: Repetition
151. Setting Up Custom Two-Way Binding
152. An Easier Way of Setting Up Custom Two-Way Binding
153. Enhancing Elements with Directives - Deep Dive
154. Module Introduction
155. Understanding Directives
156. The Starting Project
157. Analyzing a Built-in Attribute Directive: ngModel
158. Analyzing a Built-in Structural Directive: ngIf
159. Getting Started with Custom Directives
160. Using Attribute Directives To Change Element Behavior
161. Working with Inputs in Custom Directives
162. Directives & Dependency Injection
163. Building Another Directive
164. Building a Custom Structural Directive
165. Structural Directives & Syntactic Sugar
166. Host Directives & Composition
167. Transforming Values with Pipes - Deep Dive
168. Module Introduction
169. Making Sense of Pipes
170. Using Built-in Pipes
171. More Built-in Pipes Examples
172. Building a First Custom Pipe
173. Using Custom Pipes to Perform Custom Transformations
174. Accepting Parameters in Custom Pipes
175. Chaining Pipes & Being Aware of Limitations
176. Building a Pipe That Sorts Items
177. Understanding How Pipes Are Executed
178. Pure & Impure Pipes
179. Pipe Limitations & When Not To Use Them
180. Understanding Services & Dependency Injection - Deep Dive
181. Module Introduction
182. The Starting Project & The Need For A Centralized Service
183. Creating a Service
184. How NOT To Provide A Service
185. Using Angular's Dependency Injection Mechanism
186. Using The Alternative Dependency Injection Syntax
187. Outsourcing & Reusing Logic with Services
188. Angular Has Multiple Injectors!
189. There Are Multiple Ways Of Providing a Service
190. Providing Services via the Element Injector
191. Understanding the Element Injector's Behavior
192. Injecting Services Into Services
193. Analyzing Dependency Injection with the Angular DevTools
194. Using Custom DI Tokens & Providers
195. Preparing A Non-Class Value For Injection
196. Injecting Other Values (NOT Services)
197. Angular Modules (NgModule) & Dependency Injection
198. Working with Services Without Using Signals
199. Making Sense of Change Detection - Deep Dive
200. Module Introduction

This course has been refreshed and completely updated for .Net 8.0 and Angular 17/18.

Have you learnt the basics of ASP.NET Core and Angular?  Not sure where to go next?  This course should be able to help with that.  In this course we start from nothing and incrementally build up our API and Angular front end until we have a fully functional Web Application that we then publish to IIS and a Linux server.

These are 2 of the hottest frameworks right now for the 'back-end' (Microsoft's ASP.NET Core) and the 'front-end' (Google's Angular) and are well worth spending the time to learn.

In this course we build a complete application from start to finish and every line of code is demonstrated and explained.

This course is right up to date as at June 2024 using .Net 8.0 and Angular 17/18 and as these frameworks evolve, this course will evolve with it.  

Read some of the great reviews of the course:

Jim says "The absolute best course for building an API in .Net core and working with Angular!"

Daniyal says: "This is a complete project based course from start to finish with real world experience using technologies that are currently in demand in the market. People interested in learning latest technologies should consider this course."

Here are some of the things you will learn about in this course:

• Setting up the developer environment

• Creating the ASP.NET Core WebAPI and the Angular app using the DotNet CLI and the Angular CLI

• Adding a Client side login and register function to our Angular application

• Adding 3rd party components to add some pizzazz to the app

• Adding routing to the Angular application and securing routes.

• Using Automapper in ASP.NET Core

• Building a great looking UI using Bootstrap

• Adding Photo Upload functionality as well as a cool looking gallery in Angular

• Angular Template forms and Reactive forms and validation

• Paging, Sorting and Filtering

• Adding a Private Messaging system to the app

• Publishing the application to Heroku free of charge

• Using SignalR for real time presence and live messaging between users

• Many more things as well

Tools you need for this course

In this course all the lessons are demonstrated using Visual Studio Code, a free (and fantastic) cross platform code editor.   You can of course use any code editor you like and any Operating system you like... as long as it's Windows, Linux or Mac

Is this course for you?

This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project.  If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.  

On this course we will build an example Dating Application, completely from scratch using the DotNet CLI and the Angular CLI to help us get started.  All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application using ASP.NET Core and Angular.  

1. Introduction
2. Introduction to the course
3. Setting up the developer environment
4. Getting help
5. Course assets and source code
6. Building a walking skeleton part 1 - API
7. Introduction
8. Creating the .Net API Project using the dotnet CLI
9. Setting up VS code to work with C#
10. Getting to know the API project files
11. Creating our first Entity
12. Introduction to Entity Framework
13. Adding Entity Framework to our project
14. Adding a DbContext class
15. Creating the Connection string
16. Creating the database using Entity Framework Code first migrations
17. Adding a new API Controller
18. Making our code Asynchronous
19. Saving our code into Source control
20. Section 2 Summary
21. Building a walking skeleton part 2 - Angular
22. Introduction
23. Creating the Angular application
24. Running the angular project and reviewing the bootstrap of the app
25. Adding VS Code extensions to work with Angular
26. Making HTTP requests in Angular
27. Adding CORS support in the API
28. Displaying the fetched users in the browser
29. Adding bootstrap and font-awesome
30. Adding HTTPS to Angular using mkcert
31. Section 3 summary
32. Authentication basics
33. Introduction
34. Safe storage of passwords
35. Updating the user entity
36. Creating a base API controller
37. Creating an Account Controller with a register endpoint
38. Using DTOs
39. Using the debugger
40. Adding a login endpoint
41. JSON web tokens
42. Adding a token service
43. Adding the create token logic
44. Creating a User DTO and returning the token
45. Adding the authentication middleware
46. Adding extension methods
47. Section 4 summary
48. Client login and register
49. Introduction
50. Creating a nav bar
51. Introduction to Angular template forms
52. Introduction to Angular services
53. Injecting services into components
54. Using conditionals to show and remove content
55. Using the angular bootstrap components - dropdown
56. Introduction to observables and signals
57. Persisting the login
58. Adding a home page
59. Adding a register form
60. Parent to child communication
61. Child to parent communication
62. Hooking up the register method to the service
63. Section 5 summary
64. Routing in Angular
65. Introduction
66. Creating some more components
67. Adding the nav links
68. Routing in code
69. Adding a toast service for notifications
70. Adding an Angular route guard
71. Adding a dummy route
72. Adding a new theme
73. Section 6 summary
74. Error handling
75. Introduction
76. Creating an error controller for testing errors
77. Handling server errors
78. Exception handling middleware
79. Testing errors in the client
80. Adding an error interceptor
81. Validation errors
82. Handling not found
83. Adding a server error page
84. Section 7 summary
85. Extending the API
86. Introduction
87. Extending the user entity
88. Adding a DateTime extension to calculate age
89. Entity Framework relationships
90. Generating seed data
91. Seeding data part one
92. Seeding data part two
93. The repository pattern
94. Creating a repository
95. Updating the users controller
96. Adding a DTO for Members
97. Adding AutoMapper
98. Using AutoMapper
99. Configuring AutoMapper
100. Using AutoMapper queryable extensions
101. Section 8 summary
102. Building the user interface
103. Introduction
104. Using TypeScript
105. Creating the member interface
106. Adding a member service
107. Retrieving the list of members
108. Creating member cards
109. Adding some style to the cards
110. Adding animated buttons
111. Using an interceptor to send the token
112. Routing to the detailed page
113. Styling the member detailed page
114. Styling the member detailed page part two
115. Adding a photo gallery
116. Section 9 summary
117. Updating resources
118. Introduction
119. Creating a member edit component
120. Creating the edit template form
121. Adding the update functionality
122. Adding a Can Deactivate route guard
123. Persisting the changes in the API
124. Updating the user in the client app
125. Adding loading indicators
126. Using the service to store state
127. Section 10 summary
128. Adding photo upload functionality
129. Introduction
130. Cloudinary Account
131. Configuring cloudinary in the API
132. Adding a photo service
133. Updating the users controller
134. Testing the photo upload
135. Using the Created At Route method
136. Adding a photo editor component
137. Installing legacy npm packages
138. Adding a photo uploader
139. Adding a photo uploader part two
140. Setting the main photo in the API
141. Adding the main photo image to the nav bar
142. Setting the main photo in the client
143. Deleting photos - API
144. Deleting photos - Client
145. Section 11 summary
146. Reactive forms
147. Introduction
148. Reactive forms introduction
149. Client side validation
150. Adding custom validators
151. Validation feedback
152. Creating a reusable text input
153. Using the form builder service
154. Expanding the register form
155. Adding a reusable date input
156. Updating the API register method
157. Client side registration
158. Section 12 summary
159. Paging, sorting and filtering
160. Introduction
161. Adding a paged list class
162. Adding helper classes for pagination
163. Using the pagination classes
164. Setting up client pagination
165. Using the angular bootstrap pagination component
166. Adding filtering to the API
167. Adding additional filters
168. Cleaning up the member service
169. Adding filter buttons to the client
170. Adding sorting functionality
171. Sorting on the client
172. Adding an action filter
173. Making the Last Active action filter more optimal
174. Formatting dates
175. Restoring the caching for members
176. Restoring caching for member detailed
177. Remembering the filters for a user in the service
178. Section 13 Summary
179. Adding the likes feature
180. Introduction
181. Adding a likes entity
182. Adding a likes repository
183. Implementing the likes repository
184. Controller methods for the likes feature
185. Setting up the likes functions in the Angular app
186. Adding the toggle functionality
187. Adding the lists component
188. Adding pagination for the likes
189. Paginating the likes on the client
190. Section 14 summary
191. Adding the Messaging feature
192. Introduction
193. Setting up the entities for messaging
194. Setting up the message repository
195. Setting up the automapper profiles
196. Adding a message controller
197. Getting the messages from the Repo
198. Getting the message thread for 2 users
199. Setting up the Angular app for messaging
200. Designing the inbox

This course will give you a solid foundation on the Angular platform by giving you with an in-depth guide tour of all the advanced features available in the Angular Core and Common modules.

These are the baseline modules from which all other modules in the Angular ecosystem are built with, so this is the part of Angular that you want to learn first, and in as much detail as possible.

Angular has evolved a lot during the years, and since the introduction of Signals there is sometimes more than one way of doing things. In this course we will course each feature both ways where applicable, both with Signals and with decorators.

In this course, you will get an exhaustive guided tour of all the basic and also the advanced functionality available in these two Angular essential modules (including Angular Elements).

This guide will cover everything from the most commonly used features of Angular, up until the most advanced topics of Angular Core, such as the multiple modes of change detection, style isolation, dependency injection, content projection, internationalization, standalone components and more.

The course starts from the beginning, assuming no prior knowledge of Angular. Each concept is introduced based only on previous concepts, so there are no forward references to help with the learning process.

Even though the course starts with the essential concepts of Angular, it will quickly evolve into intermediate to advanced topics. So no matter what your current Angular level is, there is something for everyone in this course!   

To help you make the most out of the standalone components feature, you have available a full section on how to migrate an existing application to standalone components, and completely remove NgModules from your application.

Course Overview

This course will start with a quick and practical introduction to the Angular framework. You are going to set up your development environment, and using the Angular CLI you will quickly scaffold a small Angular project from scratch.

Using this initial playground, we are then going to answer some of the most common Angular questions: Why Angular, what are its main advantages and key features? We will answer this by demonstrating how the change detection mechanism works, and introduce some of the Angular template syntax.

We will then cover one by one all the features of the Angular Core and Common modules, which include:

• Custom components with @Component

• Components @Input and @Output, event Emitters

• Control flow syntax: @if, @for, @switch

• ngFor

• ngIf

• ngClass

• ngStyle

• ngSwitch

• @defer - Partial template loading

• Observables

• Built-In Pipes

• Async Pipe

• Custom Pipes

• @Injectable and Custom Services

• Lifecycle Hooks (ngOnInit, ngOnDestroy, etc.)

• HTTP Client - GET POST PUT DELETE

• @ViewChild and AfterViewInit

• @ViewChildren

• ng-content and Component Projection

• @ContentChild and AfterContentInit

• @ContentChildren

• ng-template & ng-container

• ngTemplateOutlet

• AfterContentChecked and AfterViewChecked

• ngDoCheck

• Normal Change Detection

• @Attribute

• OnPush Change Detection

• Custom Change Detection

• View Encapsulation modes

• @Directive

• @Host

• @HostListener

• @HostBinding

• Structural Directives

• @Inject

• @Optional

• @Self

• @SkipSelf

• Hierarchical Injector

• Custom Pipe

• @NgModule

• host, host-context, etc.

• @NgPlural and other i18n features

• Angular Elements

• Angular Standalone Components

• Angular Signals

What Will You Learn In this Course?

This course will give you advanced practical knowledge of the Angular framework. After taking this course you will feel very comfortable building Angular Applications, as you will have a detailed understanding of everything that is made available by the Angular framework core modules.

1. Introduction
2. Angular Core Deep Dive - Introduction
3. IMPORTANT - Recommended Software Versions
4. Course Kickoff - Development Environment Setup
5. The Typescript Jumpstart Ebook
6. Introduction To Angular - Custom HTML Elements, Model vs View
7. Why Angular? Learn the Key Features of Angular Core
8. Angular Components, Core Directives and Pipes
9. New Section - Angular Components and Core Directives
10. Building our First Angular Component
11. Component Inputs and the @Input Decorator
12. Angular Component @Output - Custom Events and Event Emitters
13. Angular 17 Control Flow Syntax
14. The Angular 17 @for syntax
15. Angular @for @empty, $index and other extra options
16. Understanding Angular 17 @for tracking functions
17. What's Next - The ngFor Directive
18. The Angular ngFor Core Directive
19. Angular 17 - Comparison between @for and ngFor
20. Angular 17 - @if Section Introduction
21. The Angular 17 @if else syntax
22. What's Next - The ngIf Directive
23. Angular ngIf Directive and the Elvis Operator
24. Angular 17 - Comparison between @if vs ngIf
25. Angular ngClass Core Directive - Learn All Features
26. Angular ngStyle Core Directive - When to use it and Why
27. Angular 17 @switch Section Introduction
28. The Angular 17 @switch syntax in action
29. Angular ngSwitch Core Directive In Detail
30. Angular ng-container Core Directive - When to use it?
31. Angular Built-In Pipes - Complete Catalog
32. Angular Local Template Querying In Depth
33. Angular View Child Decorator - How Does it Work?
34. View Child - Learn the multiple View Query Configuration Options
35. The AfterViewInit Lifecycle Hook - How deep can we query with View Child?
36. The View Children Decorator and Query List In Detail
37. Angular Content Projection In Depth
38. Angular Content Projection with ng-content In Detail
39. Angular Content Child Decorator - In-Depth Explanation
40. Angular Content Children and the AfterContentInit Lyfecycle Hook
41. Angular Templates In Depth
42. Angular Templates Introduction with ng-template
43. Angular Template Instantiation with ngTemplateOutlet
44. Angular Templates as Component Inputs
45. Angular Directives In Depth
46. Introduction to Angular Attribute Directives
47. Angular Host Binding in Detail - DOM Properties vs Attributes
48. Angular Host Listener - Handling Events in Directives
49. Angular Directive Export As syntax - When to Use it and Why
50. Angular Structural Directives - Understanding the Star Syntax
51. Angular Structural Directives - Step-by-Step Implementation
52. Angular View Encapsulation In Depth
53. Angular View Encapsulation - Under the Hood
54. Angular View Encapsulation - the Host Selector
55. Bypassing View Encapsulation with the ng-deep modifier
56. The Host Context Selector - Theming Use Case
57. Angular View Encapsulation - Default vs Shadow DOM
58. Angular Injectable Services In Depth
59. Angular Injectable Services - New Section Introduction
60. The Angular HTTP Client - GET calls with Request Parameters
61. The Async Pipe - a Better way of passing Observable data to the View
62. Angular Custom Services - The Injectable Decorator
63. Angular Custom Service - Fetching Data
64. Angular Custom Service - Data Modification with an HTTP PUT
65. Angular Dependency Injection In Depth
66. Introduction to the Angular Dependency Injection System
67. Angular DI - Understanding Providers and Injection Tokens
68. Angular DI - Understanding Simplified Provider Configuration
69. Understanding Hierarchical Dependency Injection
70. Understanding Angular Tree-Shakeable Providers
71. Angular DI - Injection Tokens In Detail
72. Angular DI Decorators - Optional, Self, SkipSelf
73. Angular DI Host Decorator and Section Conclusion
74. Angular Change Detection In Depth
75. Angular Default Change Detection - How does it Work?
76. Angular OnPush Change Detection - How does it Work?
77. OnPush Change Detection and Observables Data Streams
78. Angular Attribute Decorator - When to use it?
79. Angular Custom Change Detection with ChangeDetectorRef
80. Angular Lifecycle Hooks In Depth
81. Angular Lifecycle Hooks - OnInit and OnDestroy In Detail
82. Angular OnChanges Lifecycle Hook
83. Angular AfterContentChecked Lifecycle Hook - Use Cases and Pitfalls
84. Angular AfterViewChecked Lifecycle Hook - Use Cases and Pitfalls
85. Angular Lifecycle Hooks - Complete Overview
86. Angular Modules in Depth
87. Introduction to Angular Modules
88. Angular Feature Modules In Detail
89. Angular Pipes In Depth
90. Angular Custom Pipes - Step-by-Step Implementation
91. Angular Impure Pipes In Detail
92. Angular Internationalization (i18n) In Depth
93. Introduction to Angular Internationalization (i18n)
94. Understanding Angular i18n Unique Identifiers
95. Angular i18n Pluralization Support
96. Angular i18n Alternative Expressions Support
97. Running a Translated Angular Application using the Angular CLI
98. Angular Elements In Depth
99. Angular Elements In Detail
100. Angular Standalone Components In Depth
101. Angular Standalone Components - New Section
102. Migrating To Standalone Components Step 1 - Importing Dependencies
103. Migrating To Standalone Components Step 2 - Removing Unused Modules
104. Migrating To Standalone Components Step 3 - Refactor Application Bootstrapping
105. Angular 17 @defer - Partial Template Loading
106. Angular 17 @defer Section Introduction
107. Angular 17 @defer - How Does It Work?
108. Angular 17 @defer with @placeholder
109. Angular 17 @defer with @loading
110. Angular 17 @defer trigger (idle and immediate triggers)
111. Angular 17 @defer timer trigger - Understanding prefetch triggers
112. Angular 17 @defer @error block
113. Angular 17 @defer - The viewport built-in trigger
114. Angular 17 @defer - The built-in interaction trigger
115. Angular 17 @defer- the built-in on hover trigger
116. Angular 17 @defer Custom Triggers
117. Angular 17 Signals In Depth
118. Angular 17 Signals - Section Introduction
119. Introduction to Angular 17 Signals - Writing our first Signal
120. The Angular 17 Signal update() API and Read Only Signals
121. Angular Signals with Objects and Arrays - Avoid mutating signal values directly
122. Angular 17 derived signals with the compute() API
123. Understanding how dependencies between signals are created
124. The Angular 17 Signal effect() API
125. Angular 17 - Cleaning up Signal Effects manually
126. Angular 17 Signal-based Data Services
127. Introduction To Angular Input Signals - How Do They Compare With @Input?
128. How To Use Signal Inputs To Avoid The OnChanges Lifecycle Hook
129. Signal Input Options required, alias, transform functions
130. Conclusion & Bonus
131. Bonus Lecture (Updated November 2024)
132. Angular Core Deep Dive - Course Conclusion and Key Takeaways

Learn C# full stack web development with Angular and ASP.NET with this course and elevate your coding skills to a Professional Level.

Are you ready for the journey to becoming a full-stack web developer? Great!

Welcome to the Fullstack Web Development with Angular and C# ASP.NET course. A comprehensive course designed to transform your basic C# knowledge into full-stack expertise.

This course is perfect for those seeking to enhance their coding skills and secure a promising career in full-stack development.

Key features of this course include:

• C# web development with ASP.NET 8 for backend development

• Build frontend applications using Angular 18 including components, services, routes and validation

• Crafting RESTful APIs using Entity Framework and the Repository Design Pattern

• Using swagger for API testing

• Focus on building CRUD based full-stack web applications using the popular Angular & ASP net stack

The course is led by Jannick Leismann, a Certified Microsoft .NET developer, and Denis Panjuta, a former Oracle Consultant and creator of the world's most popular beginner C# BootCamp: "The C# Masterclass"

Enroll in the Fullstack Web Development with Angular and C# ASP.NET  course today and enjoy lifetime course access, in-depth video tutorials, 5 Star Support, real-world development focus, and a 100% no-quibble money-back guarantee.

Take the leap and upgrade your skills to become a full-stack web developer with this comprehensive course now.

1. Creating your first full-stack application Part 1: ASP.NET
2. Course Introduction
3. What is full stack development
4. Installing Visual Studio and ASP.NET
5. Creating an API project
6. In-Depth exploration of the API project
7. Structure of an ASP.NET API
8. Handout: ASP.NET
9. Creating the book model
10. Creating the book controller from scratch
11. A small request
12. HTTP requests and responses
13. Handout Http Requests
14. Creating the get all books endpoint
15. Configuring the project for controllers
16. Adding a redirection for the default route
17. API review before moving on
18. Quiz: ASP.NET Basics
19. Handout: Full-Stack Development
20. Creating your first full-stack application Part 2: Angular
21. Installing node.js
22. Installing the angular cli
23. Installing visual studio code and extensions
24. Setting the execution policy
25. Creating your first Angular project
26. Angular project deep-dive
27. Handout: Angular
28. Creating the book interface
29. Creating the book-list component
30. Binding data of components
31. Binding a book object
32. Creating an ngFor loop to show multiple books
33. Creating the angular book service
34. Building the book service
35. Handout: Angular services
36. Sending a get request with observable to the api
37. Handout angular observables
38. Using the book service in our component
39. Configuring CORS to allow api access
40. Quiz: Angular Basics
41. Employee Management System Part 1: ASP.NET
42. Project Introduction: Employee Management System
43. Source Code ASP API
44. Installing .NET 9.0
45. Updating visual studio
46. Enabling preview features in vs
47. Source Code: Employee Management API
48. Creating the asp employee management project
49. Employee model creation
50. Installing Entity Framework Core + In Memory Database
51. 306 Creating and registering a database context
52. Handout: DB Context
53. Adding a DbSet<> for our employees to the db context
54. Handout: Entity Framework
55. Configuring CORS for Angular
56. Using the repository design pattern and creating the repository interface
57. Creating the employee repository class
58. Employee repository logic for adding
59. Employee repository logic for getting
60. Employee repository logic for updating and deleting
61. Handout: Repository design pattern
62. Registration of the repository for the dependency injection
63. Creating the employee API conroller with a create endpoint
64. Adding and configuring Swagger
65. Testing an API endpoint with Swagger
66. GetAll Endpoint
67. GetById Endpoint
68. Create Endpoint
69. Delete Endpoint
70. Update Endpoint
71. API review
72. Handout: ASP Crud API
73. Quiz: ASP.NET
74. Employee Management System Part 2: Angular
75. Source Code Angular App
76. Angular project creation
77. Employee interface and employee table component
78. Environments for the api url
79. Creating the employee service
80. Loading employees from the api
81. Showing the employee data in a table
82. Defining routes in angular
83. Creating a simple navigation menu based on routes
84. Preparing the employee form
85. Creating the employee form and data binding
86. Finishing the employee form
87. Handout: Angular data-binding
88. Extending the service to send a http post request
89. Handling observable errors and showing error messages with conditional rendering
90. Deleting Employees
91. Edit Employee Route
92. Reading a param from the URL
93. Loading the employee to edit
94. Editing an existing employee
95. Quiz: Angular
96. Employee Management System Part 3: Styling
97. Exploring Bootstrap
98. Installing Bootstrap
99. Styling a navbar
100. Styling the employee table
101. Styling the employee form
102. Employee Management System Part 4: Validation
103. Why we need validation
104. ASP.NET validation with data annotations
105. ASP.NET validation logic based on model state
106. Handout: Validation and data annotations
107. Angular template driven form validation
108. Validating the entire form
109. Toggling the form button based on the form state
110. Handling general error messages
111. Validation
112. Course Completion
113. Good job! You have completed the course :-)
114. Old Project (Angular 14 and ASP 6) Typescript Basics
115. What you will learn
116. Source Code
117. SPA explanation
118. Installing the correct .NET Version
119. Installing Node.js
120. Installing Angular
121. Exploring the template
122. New Template!
123. Typescript Part 1
124. Typescript Part 2
125. Typescript Part 3
126. Handout
127. Data Binding
128. Intro
129. Data binding
130. Summary
131. Handout
132. Basic Routing
133. Intro
134. Exploring Routes in a Project
135. Creating and Routing a Custom Component
136. Handout
137. Visualizing a List in a Component
138. Presentation NPM packages
139. Install npm package fontawesome and reference it
140. Angular.json explanation
141. Showing some airline names
142. Building search flights html form
143. Presentation Interfaces
144. Creating interfaces
145. Styling Flight-Search Page
146. Handout
147. Getting Lists from Web API
148. Short API Intro
149. JSON EXPLAINATION
150. Search Flight Endpoint
151. Flight data as records
152. Setting up Swagger and OpenAPI
153. Handout
154. Downloading Data from Web API using Angular
155. Angular OpenAPI Gen Presentation
156. Installing and configuring ng-openapi-gen
157. Auto create client API
158. Implement client API to show flight data
159. Error handling
160. Changing swagger operation names
161. Handout
162. Parameterizing Angular Routes
163. Lifecycle hooks
164. Adding book-flight component
165. Routing from search-flight to book-flight
166. Router Parameters Presentation
167. Sending flightId Parameter
168. Find Flight Endpoint RestFUL API
169. Testing the new Find Flight Endpoint in Swagger
170. Handout
171. Documenting HTTP Response Codes
172. Presentation Http Status Codes
173. Attribute for returning responses
174. More response attributes
175. Display Book Flight Template
176. Handling errors
177. Navigating the user using router service
178. Addition to arrow functions
179. Handout
180. Posting Data
181. HTTP Post Presentation
182. Create Register-Passenger component
183. Register Form Markup
184. Passenger Controller and DTO
185. Implementing the form reactive form binding
186. Posting the register form to the server
187. Receiving the register call
188. Find Passenger Action
189. Handout
190. Using Angular Services - Part 1
191. Angular Service Presentation
192. Auth Service erstellen
193. Handling existing User
194. Refactoring the login method
195. Redirecting the user to registration
196. Handout
197. Using Angular Services Part 2
198. Book Flight Form
199. Book DTO and Controller Book Post Endpoint
200. Posting the Book Flight