Angular – The Complete Guide (2025 Edition)
-
Getting Started
-
Angular Essentials – Components, Templates, Services & MoreModule Introduction0sA New Starting Project & Analyzing The Project Structure0sUnderstanding Components & How Content Ends Up On The Screen0sCreating a First Custom Component0s[Optional] JavaScript Refresher: Classes, Properties & MoreConfiguring the Custom Component0sUsing the Custom Component0sStyling the Header Component & Adding An Image0sManaging & Creating Components with the Angular CLI0sStyling & Using Our Next Custom Component0sPreparing User Data (To Output Dynamic Content)0sStoring Data in a Component Class0sOutputting Dynamic Content with String Interpolation0sProperty Binding & Outputting Computed Values0sAttribute BindingUsing Getters For Computed Values0sListening to Events with Event Binding0sManaging State & Changing Data0sA Look Behind The Scenes Of Angular’s Change Detection Mechanism0sIntroducing Signals0sWe Need More Flexible Components!0sDefining Component Inputs0sRequired & Optional Inputs0sUsing Signal Inputs0sWe Need Custom Events!0sWorking with Outputs & Emitting Data0sUsing the output() Function0sAdding Extra Type Information To EventEmitter0sExercise: Create a Configurable Component0sTypeScript: Working With Potentially Undefined Values & Union Types0sAccepting Objects As Inputs & Adding Appropriate Typings0sTypeScript: Type Aliases & Interfaces0sOutputting List Content0sOutputting Conditional Content0sLegacy Angular: Using ngFor & ngIf0sAdding More Components to the Demo App0sOutputting User-specific Tasks0sOutputting Task Data in the Task Component0sStoring Data Models in Separate Files0sDynamic CSS Styling with Class Bindings0sMore Component Communication: Deleting Tasks0sCreating & Conditionally Rendering Another Component0sManaging The “New Task” Dialog0sUsing Directives & Two-Way-Binding0sSignals & Two-Way-Binding0sHandling Form Submission0sUsing the Submitted Data0sContent Projection with ng-content0sTransforming Template Data with Pipes0sGetting Started with Services0sGetting Started with Dependency Injection0sMore Service Usage & Alternative Dependency Injection Mechanism0sTime to Practice: Services0sUsing localStorage for Data Storage0sModule Summary0s
-
Angular Essentials – Working with ModulesModule Introduction0sA First Introduction To Angular Modules (NgModule)0sAngular 19, Standalone Components & ModulesCreating a First Empty Module0sBootstrapping Apps with Angular Modules0sDeclaring & Using Components0sA First Summary0sMigrating All Components To Use Modules0sCreating & Using Shared Modules0sCreating More Complex Module-based App Structures0s
-
Angular Essentials – Time To PracticeModule Introduction & Starting Project0sExercise HintsAdding a Header Component With An Image0sAdding a User Input Component0sHandling Form Submission0sExtracting Values with Two-Way-Binding0sCalculating the Annual Investment Data0sCross-Component Communication with Outputs0sCreating & Using a Data Model0sPassing Data from Parent to Child with Inputs0sOutputting Data in a Table0sFormatting Output with a Pipe0sUsing Signals & Resetting The Form After Submission0sUsing a Service for Cross-Component Communication0sUsing Signals in Services0sMigrating to Angular Modules0sModule Summary0s
-
Debugging Angular Apps
-
Components & Templates – Deep DiveModule Introduction0sStarting Project & An Opportunity For Smaller Components?0sWhen & How To Split Up Components0sSplitting A Component Into Multiple Components0sCreating Reusable Components0sComponent Inputs: Repetition0sProperty Binding: Repetition0sUsing Content Projection & ng-content0sAdding Forms to Components0sA Possible, But Not Ideal Way Of Extending Built-in Elements0sExtending Built-in Elements with Custom Components via Attribute Selectors0sSupporting Content Projection with Multiple Slots0sExploring Advanced Content Projection0sDefining Content Projection Fallbacks0sMulti-Element Custom Components & Content Projection0sScoping CSS Styles to Components0sUnderstanding & Configuring View Encapsulation0sMaking Sense of Component Host Elements0sUsing Host Elements Like Regular Elements0sInteracting With Host Elements From Inside Components0sWhen (Not) To Rely On Host Elements0sInteracting with Host Elements via @HostListener & @HostBinding0sAccessing Host Elements Programmatically0sClass Bindings: Repetition0sThere’s More Than One Way Of Binding CSS Classes Dynamically0sA Closer Look At Dynamic Inline Style Binding0sManipulating State & Using Literal Values0sIntroducing the Component Lifecycle: ngOnInit0sImplementing Lifecycle Interfaces0sComponent Lifecycle – A Deep Dive0sComponent Cleanup with ngOnDestroy0sComponent Cleanup with DestroyRef0sHandling Form Submissions: Repetition0sWorking with Template Variables0sExtracting Input Values via Template Variables0sTemplate Variables & Component Instances0sGetting Access to Template Elements via ViewChild0sUsing The viewChild Signal Function0sViewChild vs ContentChild0sA Closer Look at Decorator-based Queries & Lifecycle Hooks0sThe afterRender and afterNextRender Lifecycle Functions0sMaking Sense of Signal Effects0sSignal Effects Cleanup FunctionsTypeScript & Type Models: Repetition0sComponent Outputs: Repetition0sA Closer Look At Template For Loops0sRevisiting Inputs & Signals0sUpdating Signal Values0sCross-Component Communication & State Management0sConfiguring Component Inputs & Outputs0sTwo-Way Binding: Repetition0sSetting Up Custom Two-Way Binding0sAn Easier Way of Setting Up Custom Two-Way Binding0s
-
Enhancing Elements with Directives – Deep DiveModule Introduction0sUnderstanding Directives0sThe Starting Project0sAnalyzing a Built-in Attribute Directive: ngModel0sAnalyzing a Built-in Structural Directive: ngIf0sGetting Started with Custom Directives0sUsing Attribute Directives To Change Element Behavior0sWorking with Inputs in Custom Directives0sDirectives & Dependency Injection0sBuilding Another Directive0sBuilding a Custom Structural Directive0sStructural Directives & Syntactic Sugar0sHost Directives & Composition0s
-
Transforming Value with Pipes – Deep DiveModule Introduction0sMaking Sense of Pipes0sUsing Built-in Pipes0sMore Built-in Pipes Examples0sBuilding a First Custom Pipe0sUsing Custom Pipes to Perform Custom Transformations0sAccepting Parameters in Custom Pipes0sChaining Pipes & Being Aware of Limitations0sBuilding a Pipe That Sorts Items0sUnderstanding How Pipes Are Executed0sPure & Impure Pipes0sPipe Limitations & When Not To Use Them0s
-
Understanding Services & Dependency Injection – Deep DiveModule Introduction0sThe Starting Project & The Need For A Centralized Service0sCreating a Service0sHow NOT To Provide A Service0sUsing Angular’s Dependency Injection Mechanism0sUsing The Alternative Dependency Injection Syntax0sOutsourcing & Reusing Logic with Services0sAngular Has Multiple Injectors!0sThere Are Multiple Ways Of Providing a Service0sProviding Services via the Element Injector0sUnderstanding the Element Injector’s Behavior0sInjecting Services Into Services0sAnalyzing Dependency Injection with the Angular DevTools0sUsing Custom DI Tokens & Providers0sPreparing A Non-Class Value For Injection0sInjecting Other Values (NOT Services)0sAngular Modules (NgModule) & Dependency Injection0sWorking with Services Without Using Signals0s
-
Making Sense of Change Detection – Deep DiveModule Introduction0sAnalyzing the Starting Project0sUnderstanding How Angular Performs Change Detection0sChange Detection During Development: ExpressionChangedAfterChecked Errors0sWriting Efficient Template Bindings0sAvoiding Zone Pollution0sUsing the OnPush Strategy0sUnderstanding the OnPush Strategy0sWorking with OnPush & Signals0sUsing Signals for Sharing Data Across Components (with OnPush)0sThe Problem With OnPush, Cross-Component Data & Not Using Signals0sTriggering Change Detection Manually & Using RxJS Subjects0sIntroducing The async Pipe0sGoing Zoneless!0s
-
Working with RxJS (Observables) – Deep DiveModule Introduction0sWhat Are Observables & What Is RxJS?0sCreating & Using an Observable0sWorking with RxJS Operators0sWorking with Signals0sSignals vs Observables0sConverting Signals To Observables0sConverting Observables To Signals0sDeep Dive: Creating & Using A Custom Observable From Scratch0sModule Summary0s
-
Sending HTTP Requests & Handling ResponsesModule Introduction0sThe Starting Projects: Frontend & Backend0sHow To Connect Angular Apps To A Backend0sOptional: HTTP EssentialsGetting Started with Angular’s Http Client0sProviding the HttpClient when using NgModulesSending a GET Request To Fetch Data0sConfiguring Http Requests0sTransforming & Using Response Data0sShowing a Loading Fallback0sHandling HTTP Errors0sSending Data To A Backend0sMore Data Fetching & Some Code Duplication0sOutsourcing HTTP Request Logic Into A Service0sManaging HTTP-loaded Data via a Service0sImplementing Optimistic Updating0sPotential Problems Introduced by Optimistic Updating0sImproved Optimistic Updating0sImplementing App-wide Error Management0sPractice: Sending DELETE Requests0sIntroducing HTTP Interceptors0sOptional: Class-based InterceptorsIntroducing HTTP Response Interceptors0s
-
Handling User Input & Working with Forms (Template-driven & Reactive)Module Introduction0sTemplate-driven vs Reactive Forms0sTemplate-driven: Registering Form Controls0sGetting Access to the Angular-managed Form0sExtracting User Input Values0sValidating Input with Form Validation Directives0sUsing the Form Validation Status To Provide User Feedback0sAdding Validation Styles0sInteracting With The Underlying Form Object In The Component0sUpdating Form Values Programmatically0sReactive Forms: Getting Started0sSyncing Reactive Form Definition & Template0sHandling Form Submission (Reactive Forms)0sAdding Validators To Reactive Forms0sBuilding Custom Validators0sCreating & Using Async Validators0sInteracting with the Form Programmatically0sExercise: Problem0sExercise: Solution0sConnecting & Registering Inputs For A Complex Form0sWorking with Nested Form Groups0sWorking with Form Arrays0sPractice: Adding More Validation0sCreating Multi-Input Validators / Form Group Validators0sModule Summary0s
-
Routing & Building Multi-page Single Page ApplicationsModule Introduction0sWhat Is Routing?0sEnabling Routing & Adding a First Route0sRendering Routes0sRegistering Multiple Routes0sAdding Links The Right Way0sStyling Active Navigation Links0sSetting Up & Navigating To Dynamic Routes0sExtracting Dynamic Route Parameters via Inputs0sExtracting Dynamic Route Parameters via @Input()Extracting Dynamic Route Parameters via Observables0sWorking with Nested Routes0sRoute Links & Relative Links0sAccessing Parent Route Data From Inside Nested Routes0sLoading Data Based On Route Parameters In Child Routes0sLink Shortcuts & Programmatic Navigation0sAdding A “Not Found” Route0sRedirecting Users0sSplitting Route Definitions Across Multiple Files0sActivated Route vs Activated Route Snapshot0sSetting Query Parameters0sExtracting Query Parameters via Inputs0sExtracting Query Parameters via Observables0sUsing Query Parameters For Data Manipulation0sAdding Static Data To Routes0sResolving Route-related Dynamic Data0sOptional: Class-based ResolversAccessing Route Data In Components0sControlling Route Resolver Execution0sSetting & Resolving Titles0sIntroducing Route Guards0sOptional: Class-based GuardsMaking Sense of The CanDeactivate Guard0sImproving The CanDeactivate Logic0sReloading Pages via the Angular Router & Configuring Programmatic Navigation0s
-
Code Splitting & Deferrable ViewsModule Introduction0sWhat Is Lazy Loading / Code Splitting?0sIntroducing Route-based Lazy Loading0sImplementing Route-based Lazy Loading0sLazy Loading Entire Route Groups0sUsing Lazy Loading & Routing to Lazy-load Services0sIntroducing Deferrable Views0sDefer Loading Until Viewport Visibility0sDeferrable Views: Using Other Triggers0sPrefetching Lazy-loaded Code0sDeferrable Views: Summary0s
-
Deploying Angular Apps – CSR, SSR, SGAModule Introduction0sThe Starting ProjectPreparing a Project For Deployment: Building It For Production0sBuilding SPAs: Pros & Cons0sSPAs: Deployment Example0sUsing “ng add”, “ng deploy” & Angular’s Built-in Deployment Support0sServer-side Rendering (SSR) Introduction0sSetting Up SSR For An Angular App0sBuilding and Service an SSR App0sAuthoring SSR-ready Code (Beware of Pitfalls!)0sSSR and Client-Server Mismatches0sStatic Site Generation (SSG) Introduction0sConfiguring & Using SSG0sDeployment Methods – A Summary0sSSR & SSG Deployment Example
-
Course Roundup & Next Steps
-
The Basics [Angular < 16]About This SectionModule Introduction0sHow an Angular App gets Loaded and Started0sComponents are Important!0sCreating a New Component0sUnderstanding the Role of AppModule and Component Declaration0sWorking with Standalone ComponentsUsing Custom Components0sCreating Components with the CLI & Nesting Components0sWorking with Component Templates0sWorking with Component Styles0sFully Understanding the Component Selector0sPracticing Components[OPTIONAL] Assignment Solution0sWhat is Databinding?0sString Interpolation0sProperty Binding0sProperty Binding vs String Interpolation0sEvent Binding0sBindable Properties and EventsPassing and Using Data with Event Binding0sImportant: FormsModule is Required for Two-Way-Binding!Two-Way-Databinding0sCombining all Forms of Databinding0sPracticing Databinding[OPTIONAL] Assignment Solution0sUnderstanding Directives0sUsing ngIf to Output Data Conditionally0sEnhancing ngIf with an Else Condition0sAngular 17: Alternative “if” SyntaxStyling Elements Dynamically with ngStyle0sApplying CSS Classes Dynamically with ngClass0sOutputting Lists with ngFor0sAngular 17: Alternative “for” SyntaxPracticing Directives[OPTIONAL] Assignment Solution0sGetting the Index when using ngFor0s
-
Course Project – The Basics [Angular < 16]About This SectionProject Introduction0sPlanning the App0sCreating a New App CorrectlySetting up the Application0sCreating the Components0sUsing the Components0sAdding a Navigation Bar0sAlternative Non-Collapsable Navigation BarCreating a “Recipe” Model0sAdding Content to the Recipes Components0sOutputting a List of Recipes with ngFor0sDisplaying Recipe Details0sWorking on the ShoppingListComponent0sCreating an “Ingredient” Model0sCreating and Outputting the Shopping List0sAdding a Shopping List Edit Section0sWrap Up & Next Steps0s
-
Debugging [Angular < 16]
-
Components & Databinding Deep Dive [Angular < 16]Module Introduction0sSplitting Apps into Components0sProperty & Event Binding Overview0sBinding to Custom Properties0sAssigning an Alias to Custom Properties0sBinding to Custom Events0sAssigning an Alias to Custom Events0sCustom Property and Event Binding Summary0sUnderstanding View Encapsulation0sMore on View Encapsulation0sUsing Local References in Templates0s@ViewChild() in Angular 8+Getting Access to the Template & DOM with @ViewChild0sProjecting Content into Components with ng-content0sUnderstanding the Component Lifecycle0sSeeing Lifecycle Hooks in Action0sLifecycle Hooks and Template Access0s@ContentChild() in Angular 8+Getting Access to ng-content with @ContentChild0sWrap Up0sPracticing Property & Event Binding and View Encapsulation[OPTIONAL] Assignment Solution0s
-
Course Project – Components & Databinding [Angular < 16]
-
Directives Deep Dive [Angular < 16]Module Introduction0sngFor and ngIf Recap0sngClass and ngStyle Recap0sCreating a Basic Attribute Directive0sUsing the Renderer to build a Better Attribute Directive0sMore about the RendererUsing HostListener to Listen to Host Events0sUsing HostBinding to Bind to Host Properties0sBinding to Directive Properties0sWhat Happens behind the Scenes on Structural Directives0sBuilding a Structural Directive0sUnderstanding ngSwitch0s
-
Course Project – Directives [Angular < 16]
-
Using Services & Dependency Injection [Angular < 16]Module Introduction0sWhy would you Need Services?0sCreating a Logging Service0sInjecting the Logging Service into Components0sAlternative Injection SyntaxCreating a Data Service0sUnderstanding the Hierarchical Injector0sHow many Instances of Service Should It Be?0sInjecting Services into Services0sUsing Services for Cross-Component Communication0sA Different Way Of Injecting ServicesPracticing Services[OPTIONAL] Assignment Solution0s
-
Course Project – Services & Dependency Injection [Angular < 16]Introduction0sSetting up the Services0sManaging Recipes in a Recipe Service0sUsing a Service for Cross-Component Communication0sAdding the Shopping List Service0sUsing Services for Pushing Data from A to B0sAdding Ingredients to Recipes0sPassing Ingredients from Recipes to the Shopping List (via a Service)0s
-
Changing Pages with Routing [Angular < 16]Module Introduction0sWhy do we need a Router?0sUnderstanding the Example ProjectSetting up and Loading Routes0sNavigating with Router Links0sUnderstanding Navigation Paths0sStyling Active Router Links0sNavigating Programmatically0sUsing Relative Paths in Programmatic Navigation0sPassing Parameters to Routes0sFetching Route Parameters0sFetching Route Parameters Reactively0sAn Important Note about Route Observables0sPassing Query Parameters and Fragments0sRetrieving Query Parameters and Fragments0sPracticing and some Common Gotchas0sSetting up Child (Nested) Routes0sUsing Query Parameters – Practice0sConfiguring the Handling of Query Parameters0sRedirecting and Wildcard Routes0sImportant: Redirection Path MatchingOutsourcing the Route Configuration0sAn Introduction to Guards0sProtecting Routes with canActivate0sProtecting Child (Nested) Routes with canActivateChild0sUsing a Fake Auth Service0sControlling Navigation with canDeactivate0sPassing Static Data to a Route0sResolving Dynamic Data with the resolve Guard0sUnderstanding Location Strategies0sWrap Up0s
-
Course Project – Routing [Angular < 16]Planning the General Structure0sSetting Up Routes0sAdding Navigation to the App0sMarking Active Routes0sFixing Page Reload Issues0sChild Routes: Challenge0sAdding Child Routing Together0sConfiguring Route Parameters0sPassing Dynamic Parameters to Links0sStyling Active Recipe Items0sAdding Editing Routes0sRetrieving Route Parameters0sProgrammatic Navigation to the Edit Page0sOne Note about Route Observables0sProject Cleanup
-
Understanding Observables [Angular < 16]
-
Course Project – Observables [Angular < 16]
-
Handling Forms in Angular Apps [Angular < 16]Module Introduction0sWhy do we Need Angular’s Help?0sTemplate-Driven (TD) vs Reactive Approach0sAn Example Form0sTD: Creating the Form and Registering the Controls0sTD: Submitting and Using the Form0sTD: Understanding Form State0sTD: Accessing the Form with @ViewChild0sTD: Adding Validation to check User Input0sBuilt-in Validators & Using HTML5 ValidationTD: Using the Form State0sTD: Outputting Validation Error Messages0sTD: Set Default Values with ngModel Property Binding0sTD: Using ngModel with Two-Way-Binding0sTD: Grouping Form Controls0sTD: Handling Radio Buttons0sTD: Setting and Patching Form Values0sTD: Using Form Data0sTD: Resetting Forms0sPracticing Template-Driven FormsIntroduction to the Reactive Approach0sReactive: Setup0sReactive: Creating a Form in Code0sReactive: Syncing HTML and Form0sReactive: Submitting the Form0sReactive: Adding Validation0sReactive: Getting Access to Controls0sReactive: Grouping Controls0sFixing a BugReactive: Arrays of Form Controls (FormArray)0sReactive: Creating Custom Validators0sReactive: Using Error Codes0sReactive: Creating a Custom Async Validator0sReactive: Reacting to Status or Value Changes0sReactive: Setting and Patching Values0sPracticing Reactive Forms[OPTIONAL] Assignment Solution0s
-
Course Project – Forms [Angular < 16]Introduction0sTD: Adding the Shopping List Form0sAdding Validation to the Form0sAllowing the Selection of Items in the List0sLoading the Shopping List Items into the Form0sUpdating existing Items0sResetting the Form0sAllowing the the User to Clear (Cancel) the Form0sAllowing the Deletion of Shopping List Items0sCreating the Template for the (Reactive) Recipe Edit Form0sCreating the Form For Editing Recipes0sSyncing HTML with the Form0sFixing a BugAdding Ingredient Controls to a Form Array0sAdding new Ingredient Controls0sValidating User Input0sSubmitting the Recipe Edit Form0sAdding a Delete and Clear (Cancel) Functionality0sRedirecting the User (after Deleting a Recipe)0sAdding an Image Preview0sProviding the Recipe Service Correctly0sDeleting Ingredients and Some Finishing Touches0sDeleting all Items in a FormArray
-
Using Pipes to Transform Output [Angular < 16]Introduction & Why Pipes are Useful0sUsing Pipes0sParametrizing Pipes0sWhere to learn more about Pipes0sChaining Multiple Pipes0sCreating a Custom Pipe0sParametrizing a Custom Pipe0sExample: Creating a Filter Pipe0sPure and Impure Pipes (or: How to “fix” the Filter Pipe)0sUnderstanding the “async” Pipe0sPracticing Pipes
-
Making Http Requests [Angular < 16]A New IDE0sModule Introduction0sHow Does Angular Interact With Backends?0sThe Anatomy of a Http Request0sBackend (Firebase) Setup0sSending a POST Request0sGETting Data0sUsing RxJS Operators to Transform Response Data0sUsing Types with the HttpClient0sOutputting Posts0sShowing a Loading Indicator0sUsing a Service for Http Requests0sServices & Components Working Together0sSending a DELETE Request0sHandling Errors0sUsing Subjects for Error Handling0sUsing the catchError Operator0sError Handling & UX0sSetting Headers0sAdding Query Params0sObserving Different Types of Responses0sChanging the Response Body Type0sIntroducing Interceptors0sManipulating Request Objects0sResponse Interceptors0sMultiple Interceptors0sWrap Up0sUseful Resources & Links
-
Course Project – Http [Angular < 16]
-
Authentication & Route Protection in AngularModule Introduction0sHow Authentication Works0sAdding the Auth Page0sSwitching Between Auth Modes0sHandling Form Input0sPreparing the Backend0sMake sure you got Recipes in your backend!Preparing the Signup Request0sSending the Signup Request0sAdding a Loading Spinner & Error Handling Logic0sImproving Error Handling0sSending Login Requests0sLogin Error Handling0sCreating & Storing the User Data0sReflecting the Auth State in the UI0sAdding the Token to Outgoing Requests0sAttaching the Token with an Interceptor0sAdding Logout0sAdding Auto-Login0sAdding Auto-Logout0sAdding an Auth Guard0sWrap Up0sUseful Resources & Links
-
Dynamic Components [Angular < 16]Module Introduction0sAdding an Alert Modal Component0sUnderstanding the Different Approaches0sUsing ngIf0sPreparing Programmatic Creation0sCreating a Component Programmatically0sAbout entryComponentsUnderstanding entryComponents0sData Binding & Event Binding0sWrap Up0sUseful Resources & Links
-
Angular Modules & Optimizing Angular Apps [Angular < 16]Module Introduction0sWhat are Modules?0sAnalyzing the AppModule0sGetting Started with Feature Modules0sSplitting Modules Correctly0sAdding Routes to Feature Modules0sComponent Declarations0sThe ShoppingList Feature Module0sUnderstanding Shared Modules0sUnderstanding the Core Module0sAdding an Auth Feature Module0sUnderstanding Lazy Loading0sImplementing Lazy Loading0sMore Lazy Loading0sPreloading Lazy-Loaded Code0sModules & Services0sLoading Services Differently0sUseful Resources & Links
-
Standalone ComponentsModule Introduction0sStarting Setup & Why We Want Standalone Components0sBuilding a First Standalone Component0sStandalone Components Are Now StableStandalone Directives & Connecting Building Blocks0sMigrating Another Component0sA Standalone Root Component0sServices & Standalone Components0sRouting with Standalone Components0sLazy Loading0sSummary0s
-
Angular SignalsModule Introduction0sSignals: What & Why?0sCreating a New Signal0sUpdating a Signal Value0sReading & Outputting a Signal Value0sSignal Updating: set(), update() & mutate()0sImportant: Signals are NOT Finished Yet!0sSignals: What’s To Come?Computed Values & Effects0sModule Summary0s
-
Bonus: Using NgRx For State ManagementModule Introduction0sWhat Is NgRx?0sUnderstanding NgRx & Its Building Blocks0sProject Setup & Installing NgRx0sAdding a First Reducer & Store Setup0sAn Alternative Way Of Creating Reducers0sReading Data From The Store0sIntroducing Actions & State Changing Reducers0sDispatching Actions0sAttaching Data To Actions0sHandling Actions Without createReducer0sAn Alternative Way Of Defining Actions0sTime To Practice: A Second Action0sExploring Selectors0sIntroducing Effects0sInstalling the Effects Package0sDefining a First Effect0sThe Old @Effect Decorator & Registering Effects0sUsing Store Data In Effects0sAdding a Second Effect0sSummary0sNgRx – The Old Syntax
-
Angular AnimationsMaking Animations Work with Angular 4+Introduction0sSetting up the Starting Project0sAnimations Triggers and State0sSwitching between States0sTransitions0sAdvanced Transitions0sTransition Phases0sThe “void” State0sUsing Keyframes for Animations0sGrouping Transitions0sUsing Animation Callbacks0s
-
Adding Offline Capabilities with Service Workers
-
A Basic Introduction to Unit Testing in Angular AppsAbout this SectionIntroduction0sWhy Unit Tests?0sAnalyzing the Testing Setup (as created by the CLI)0sRunning Tests (with the CLI)0sAdding a Component and some fitting Tests0sTesting Dependencies: Components and Services0sSimulating Async Tasks0sUsing “fakeAsync” and “tick”0sIsolated vs Non-Isolated Tests0sFurther Resources & Where to Go Next
-
Angular as a Platform & Closer Look at the CLIModule Introduction0sA Closer Look at “ng new”0sIDE & Project Setup0sUnderstanding the Config Files0sImportant CLI Commands0sThe “angular.json” File – A Closer Look0sAngular Schematics – An Introduction0sThe “ng add” Command0sUsing Custom “ng generate” Schematics0sSmooth Updating of Projects with “ng update”0sSimplified Deployment with “ng deploy”0sUnderstanding “Differential Loading”0sManaging Multiple Projects in One Folder0sAngular Libraries – An Introduction0sWrap Up0s
-
Bonus: TypeScript Introduction (for Angular 2 Usage)Module Introduction0sWhat & Why?0sInstalling & Using TypeScript0sBase Types & Primitives0sArray & Object Types0sType Inference0sWorking with Union Types0sAssigning Type Aliases0sDiving into Functions & Function Types0sUnderstanding Generics0sClasses & TypeScript0sWorking with Interfaces0sConfiguring the TypeScript Compiler0sModule Resources
Ready for Angular 19
This course was built for Angular 19+! It uses standalone components & signals right from the start.
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.
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!
What's included
- 55.5 hours on-demand video
- Assignments
- 56 articles
- 142 downloadable resources
- Access on mobile and TV
- Closed captions
- Certificate of completion