Back to courses

Complete Angular Developer in 2023

Learn Angular from a senior industry professional. This is the only Angular course you need to learn Angular, build enterprise-level applications from scratch, and get hired as an Angular Developer in 2023. Go from Zero To Angular Mastery.

instructor

Taught by: Luis Ramirez Jr

Last updated: March 2023

Course overview

Using the latest Angular features for 2023, we guarantee you this is the most comprehensive online course on Angular. You will learn Angular and become a confident Angular Developer by building real-world projects (including a massive video sharing application) step-by-step alongside a Senior Developer.

What you'll learn

  • Build enterprise-level applications using Angular and TypeScript and deploy them to production
  • Learn to lead Angular projects by making good architecture decisions and helping others on your team
  • Use WebAssembly and Rust in your applications to improve performance and combine with the power of Angular
  • Learn the latest features in Angular: Routing, Directives, Pipes, Services, Ahead of time Compilation + much more
  • Use RxJS and Streams in your applications
  • Master Angular Design Patterns
  • Set up authentication and user accounts
  • Use Firebase to build full-stack applications
  • Learn to build reactive, performant, large-scale applications like a Senior Developer
  • Learn to deal with Memory Leaks in your projects to improve performance
  • Master Production and Deployment of a professional Angular app
  • Learn to use TailwindCSS in an Angular application
  • Master the latest ecosystem of a Angular Developer from scratch
  • Become a top 10% Angular Developer

Using the latest version of Angular, this course is focused on efficiency. So you never have to waste your time on confusing, out-of-date, incomplete tutorials anymore.

Instead, we'll push you beyond the basics so that you can build modern, enterprise-level apps and become a professional Angular Developer.

And you'll be learning Angular in good company.

By enrolling today, you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors.

Active. Thriving. Supportive. Helpful. Friendly. Motivating. Essential.

These are just a few of the words students use to describe the ZTM Discord which is also one of the biggest and most active developer communities on Discord.

Most importantly, you will be learning from a senior industry professional (Luis) that has actual real-world experience using Angular.

This project-based course will introduce you to the modern toolchain of an Angular (formally AngularJS/Angular.js) Developer in 2023.

Along the way, you will build a massive video sharing application using Angular, TypeScript, WebAssembly, Rust, RxJS, TailwindCSS, Firebase, and much more.

This is a full-stack app unlike what you will find in most Angular tutorials online!

We will also build other mini projects along the way so you feel confident deploying any Angular project to production in the future by yourself.

All code is provided step-by-step so even if you don’t like to code along, you will get access to all the code from the projects we build to add to your portfolio.

Here is what this course will cover to take you from Zero to Angular Mastery:

The curriculum is very hands-on as we walk you from start to finish of releasing a professional Angular project all the way into production.

We start from the very beginning by teaching you Angular fundamentals.

But we don't stop there, we'll then dive into advanced topics so that you can make good decisions on architecture and tools for any of your future Angular projects.

Finally, this course will be constantly evolving and updating as the landscape changes. Just as the Angular ecosystem evolves, we will ensure this course is constantly updated with new lectures and resources.

It will be your one go-to place to get all the latest Angular best practices anytime in the future.

Here's a section by section breakdown:

1. BOOTSTRAPPING ANGULAR - In this section, we'll explore how an Angular application is bootstrapped on the browser. Unlike other frameworks, Angular gives developers a lot of boilerplates for starter projects.

How does Angular load an application? What is ahead-of-time compilation? What are platforms? These are the types of questions that'll be answered in this section along with an introduction to modules and components.

2. (Optional) TYPESCRIPT - In this section, you'll learn the fundamentals of TypeScript. While optional, Angular is heavily written with TypeScript. The goal of this section is to get you up to speed on TypeScript for Angular development. Topics include type annotations, type inference, generics, interfaces, and decorators.

3. COMPONENT FUNDAMENTALS - In this section, we'll explore components in-depth. Components are considered the building blocks of an application. They're a feature for teaching browsers new HTML tags.

We'll start from the basics of property binding and work our way up to topics like inputs/outputs, content projection, and lifecycle hooks.

4. TRANSFORMING CONTENT - In this section, we'll take the next step of working with components by discovering directives and pipes. They're a feature for transforming the output of content whether it's through appearance or behavior. Angular ships dozens of pipes and directives, most of which will be covered.

5. MASTER PROJECT: COMPONENT DESIGN - In this section, we will finally start working on the master project for this course. We're going to be building a video-sharing application for gamers!

Building large-scale applications can be challenging but we break it down step-by-step for you. You'll learn how to structure an application by utilizing common design patterns for components.

Concepts such as services, singletons, multi-slot content projection, dealing with memory leaks, and TailwindCSS integration are discussed in this section.

6. MASTER PROJECT: REACTIVE FORMS - In this section, we'll start working on registering accounts with reactive forms. Forms can be tricky to deal with. Angular ships a module for helping us deal with validating, submitting, and rendering forms. This section will focus on dealing with forms in Angular.

7. MASTER PROJECT: TEMPLATE FORMS - In this section, we'll look at an alternative module for working with forms called template forms. We'll talk about the differences between template forms and reactive forms. By the end, you'll have a good idea of when to use either module system.

8. INTRO TO RXJS - In this section, we'll learn about RXJS for helping us deal with asynchronous operations. RXJS is a library that helps us deal with streams of data and feed it into various components. In some cases, you may need to subscribe to multiple sources of data. With RxJS, we can easily simplify the flow of data from beginning to end.

9. MASTER PROJECT: AUTHENTICATION - In this section, we'll revisit our master project to add authentication. Behind the scenes, we'll integrate Firebase to help us store user data, handle tokens, and authenticate users. Lastly, we'll use RxJS to help us handle the response from Firebase.

10. MASTER PROJECT: CUSTOM VALIDATORS - In this section, we're going to revisit forms to handle custom validation. Synchronous and asynchronous validation is supported in Angular. This will get us into a design pattern called factory functions for creating dynamic validators. Most importantly, we'll learn how to handle custom errors.

11. MASTER PROJECT: ROUTING - In this section, we'll learn how routing will open the door for organizing our project into separate pages/components. Under the hood, Angular leverages the history API for boosting the performance of the app by preventing the browser from re-downloading assets on navigation.

Angular is packed with features support parameters, queries, wildcards, generating links, redirection and so much more.

12. MASTER PROJECT: UPLOADING FILES - In this section, we're going to start uploading files to Firebase. It's vital we validate files with Firebase. We don't want users to accidentally download a malicious file when watching videos.

We'll cover how to enforce validation with Firebase rules. After doing so, we'll store additional information in a database. We'll even cover how to implement a fallback solution in case drag and drop is not available.

13. WEBASSEMBLY & RUST - In this section, we'll step away from the master project to discuss WebAssembly and Rust.

WebAssembly is a new technology for interacting with the user's hardware from the browser. It won't be long before WebAssembly becomes a common skill amongst developers. Get ahead of the curve by learning how it can help us bring desktop experiences to the browser.

Don't worry if you don't have any experience with systems programming, this section is designed to be as friendly as possible to beginners.

14. MASTER PROJECT: PROCESSING VIDEOS WITH FFMPEG - In this section, we'll get back into the master project to process videos with FFmpeg. FFmpeg is a tool for interacting with audio and video files.

Your new knowledge of WebAssembly will come in handy since FFmpeg is not a JavaScript library but a CLI tool. Additional topics include bypassing sanitization, working with blobs, and learning a new RxJS operator.

15. MASTER PROJECT: PLAYING VIDEOS - In this section, we're going to finalize our app by playing videos with the popular Video.js library. Users will be able to search through uploads with infinite scrolling. Lastly, we'll run into CORS issues, which is notorious for confusing developers. Learn why CORS errors appear when embedding content.

16. MASTER PROJECT: DEPLOYMENT & PRODUCTION - In this section, we'll share our project with the world by deploying the App with Vercel. Final adjustments are made to the build such as updating the Firebase rules and updating budgets.

What's the bottom line?

This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial... No!

This course will push you and challenge you to go from an absolute beginner in Angular to someone that is in the top 10% of Angular developers 💪.

How do we know?

Because thousands of Zero To Mastery graduates have gotten hired and are now working at companies like Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies.

They come from all different backgrounds, ages, and experiences. Many even started as complete beginners.

So there's no reason it can't be you too.

And you have nothing to lose. Because you can start learning right now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. But the sooner, the better. So start learning Angular today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to build your own projects, get hired, and advance your career.

Start learning now
Expand Overview

What you'll build

The best way you learn is by doing. Not just watching endless tutorials. That's why a key part of this course is the massive real-world project that you'll get to build. Plus it'll look great on your portfolio.

Clips

Clips

Build a self-hosting video application where users can upload and share their gaming highlights with their friends. You'll learn how to securely upload files, extract screenshots with WebAssembly, and how to architect an extensive application with Angular.

start learning now

Course curriculum

To make sure this course is a good fit for you, you can start learning Angular for free right now by clicking any of the PREVIEW links below.

Introduction

5 lectures

Complete Angular Developer: Zero to Mastery2:22

PREVIEW

What Are We Building?4:17

PREVIEW

Exercise: Meet Your Classmates and Instructor

START

Complete Course Resources + Code

START

How-to's: Speed up videos, Downloading videos, Subtitles

START

Bootstrapping Angular

21 lectures

Understanding Frameworks4:40

PREVIEW

The Angular CLI4:08

PREVIEW

Latest Version Of Angular2:21

PREVIEW

Web Developer Monthly

START

Creating a New Application3:34

PREVIEW

Starting the server5:08

PREVIEW

Time For TypeScript

PREVIEW

Angular Cheat Sheet

START

Reviewing the Configuration Files9:59

PREVIEW

Main Entry File1:25

PREVIEW

AOT Compilation5:01

PREVIEW

Loading a Platform2:59

PREVIEW

Bootstrapping Angular2:47

PREVIEW

Enabling Production Mode8:32

PREVIEW

Understanding Modules3:59

PREVIEW

Creating Modules6:05

PREVIEW

Understanding Components1:58

PREVIEW

Creating Components6:00

PREVIEW

External Templates and Styles5:59

PREVIEW

Everything else3:44

START

Unlimited Updates

START

OPTIONAL: TypeScript

13 lectures

Introduction to TypeScript5:08

PREVIEW

Installing TypeScript3:45

START

Type Annotations4:49

START

Variables4:39

START

Union Types3:14

START

Arrays3:00

START

Objects3:30

START

Interfaces3:45

START

Classes3:31

START

Generics7:41

START

Why Decorators?4:38

START

TypeScript Configuration1:55

START

Writing Decorators6:31

PREVIEW

Component Fundamentals

12 lectures

Interpolation7:45

START

Property Binding3:49

START

Event Binding6:17

START

Type Assertions5:37

START

Creating a Component5:31

START

Custom Properties6:43

START

Input Aliases2:44

START

Emitting Events9:10

START

Content Projection3:17

START

Discovering Lifecycle Hooks6:07

START

Exploring More Lifecycle Hooks10:32

START

Scoped CSS4:23

START

Transforming Content

12 lectures

Understanding Pipes2:06

START

Pipe Basics5:42

START

Angular Dev Tools2:39

START

Pipe Parameters6:14

START

Dealing with Numbers7:13

START

Debugging with Pipes1:50

START

Understanding Directives1:59

START

The ngClass Directive5:09

START

The ngStyle Directive4:10

START

Understanding ng-template2:11

START

The ngIf Directive3:50

START

The ngFor directive5:43

START

Master Project: Component Design

34 lectures

Introduction to Master Project6:02

START

What is Tailwind?5:36

START

Installing Tailwind13:16

START

Configuring Tailwind7:22

START

Practicing with Tailwind5:25

START

Loading Static Assets4:41

START

What’s Next?3:30

START

Creating a User Module4:35

START

Navigation and Modal Components5:33

START

Exporting Components3:24

START

Designing a Modal2:23

START

Creating a Shared Module4:09

START

Creating a Reusable Modal2:47

START

Multi-slot Content Projection3:12

START

Understanding Services3:31

START

Creating a Service1:41

START

Understanding Dependency Injection5:34

START

Injecting Services5:11

START

Opening the Modal5:51

START

Closing the Modal3:09

START

Understanding Singletons3:46

START

Creating an ID System5:45

START

Refactoring the Service5:04

START

Updating the Components4:46

START

Memory Leaks6:02

START

Fixing the memory leak4:46

START

CSS Issues5:49

START

Creating a Tabs Component6:03

START

The ContentChildren Decorator5:40

START

The QueryList Object3:22

START

Looping through the Tabs3:20

START

Setting an Active Tab7:07

START

Toggling Tabs4:17

START

Preventing the Default Behavior1:59

START

Master Project: Reactive Forms

20 lectures

Preparing the Forms5:42

START

Adjusting the "noPropertyAccessFromIndexSignature" option

START

Registering a new Form4:15

START

Adding Form Controls3:15

START

Binding a Form3:05

START

Form Validation7:11

START

Understanding Errors4:16

START

Handling Errors5:16

START

Form Controller Status5:49

START

Designing an Input Component3:50

START

Binding Form Controls8:23

START

Updating the Template6:27

START

Validating Emails6:49

START

Validating Numbers5:57

START

Validating Passwords with Patterns6:00

START

Input Masking5:51

START

Applying Input Masking6:05

START

Disabling Buttons11:40

START

Handling Form Submission2:49

START

Designing an Alert Component29:41

START

Master Project: Template Forms

9 lectures

Importing the FormsModule2:22

START

Registering a new Form4:04

START

Two-way Binding6:38

START

Template Variables5:46

START

Attribute Validation3:24

START

Handling Error Messages3:40

START

Preparing the Password Field4:13

START

Handling Form Submission4:49

START

Exercise: Imposter Syndrome2:55

START

Intro to RxJS

23 lectures

Introduction to RxJS6:02

START

Observables5:21

START

Observers4:20

START

Pushing Asynchronous Values3:39

START

Unsubscribing from Observables3:33

START

Declarative Programming with Operators5:47

START

Timing Operators5:25

START

DOM Event Operators2:15

START

The of and from operators5:53

START

Understanding Pipeable Operators4:01

START

The Map Operator4:04

START

Marble Diagram2:43

START

Pluck Operator3:39

START

Filter Operator6:10

START

Reduce Operator4:03

START

Take Operator4:16

START

Tap Operator3:26

START

Understanding Flattening Operators7:01

START

mergeMap Operator6:14

START

switchMap Operator4:41

START

concatMap Operator2:28

START

exhaustMap Operator2:31

START

Flattening Operators Recap2:21

START

Master Project: Authentication

23 lectures

Setting up Firebase7:08

START

Reviewing the Rules6:14

START

Installing AngularFire3:57

START

Importing AngularFire6:37

START

User Registration15:17

START

Handling the Response8:37

START

Buckets, Collections, and Documents3:17

START

Storing User Data6:32

START

Refactoring to a Service6:18

START

Interfaces vs. Classes14:11

START

Collection Types6:20

START

Connecting the User with their Data10:08

START

Database Rules2:39

START

Understanding Authentication4:13

START

Authentication after Registration3:19

START

The User Observable5:52

START

The Async Pipe7:37

START

Initializing Firebase First9:32

START

Setting up the Login9:25

START

Destroying the Modal6:07

START

The Delay Operator4:05

START

Signing Out4:26

START

Sidebar: JSON Web Tokens9:31

START

Master Project: Custom Validators

8 lectures

Creating a Validator Class3:56

START

Static Methods3:18

START

Validating Passwords6:12

START

Factory Functions6:15

START

Handling Errors6:03

START

Creating an Asynchronous Validator5:26

START

Validating Unique Emails5:24

START

Finalizing the Validator7:27

START

Master Project: Routing

21 lectures

Understanding Routing5:28

START

Configuring the Router5:49

START

Registering Routes7:00

START

Exercise: Registering a Route3:39

START

Adding Navigation Links3:12

START

Active Links6:45

START

Generating a Routing Module5:56

START

Forcing Redirection4:39

START

A Quick Refactor3:28

START

Adding Route Data5:24

START

Filtering Router Events4:34

START

Retrieving Data Outside of the Outlet7:41

START

Exercise: Registering a Route with Data4:36

START

Route Parameters6:52

START

Subscribing to Route Parameters4:35

START

Query Parameters9:29

START

Learning More About Query Parameters8:42

START

Selecting an Option1:47

START

Wildcard Routes5:06

START

Updating Routes3:49

START

Route Guards5:51

START

Master Project: Uploading Files

30 lectures

Understanding File Uploads3:24

START

Blocking Events with Directives9:01

START

Handling Drag and Drop Events7:09

START

Handling Files7:53

START

Multi Step Form4:29

START

The Upload Form17:34

START

Uploading Files with Firebase6:54

START

Firebase Rules and Validation7:23

START

Adding an Alert Component5:15

START

Upload Progress Observable3:46

START

Handling Errors and Successful Uploads10:22

START

Storing the File Data8:28

START

Adding the File Data to the Database8:12

START

Firebase References and Snapshots2:22

START

Disabling Forms2:47

START

Fallback Upload6:17

START

Canceling Uploads5:46

START

Redirection after Upload6:24

START

Storing a Timestamp4:38

START

Querying the Database8:53

START

Storing the List of Clips7:20

START

Displaying the List of Clips2:12

START

Preparing the Form7:05

START

Passing on the Clip Data3:27

START

Binding the Edit Form12:21

START

Updating Clips9:17

START

Updating the List of Clips6:59

START

Deleting a Clip from the Storage/Database10:01

START

Sorting Clips with Behavior Subjects11:05

START

Composite Indexes4:31

START

WebAssembly & Rust

26 lectures

What is WebAssembly?8:51

START

Getting Started with Rust6:17

START

Exploring the Starter Project6:46

START

Variables5:14

START

Data Types6:46

START

Debugging with Macros6:51

START

Control Flow4:38

START

Match Expressions7:48

START

Arrays2:49

START

Vectors5:18

START

Structures4:06

START

Ownership6:48

START

Results8:19

START

Preparing the Project3:40

START

Installing Webpack3:39

START

Configuring Webpack10:05

START

Reading Files8:09

START

Compiling Rust with Webpack4:47

START

Importing Web Assembly5:42

START

Logging Files9:14

START

Base64 Decoding3:06

START

Loading an Image from Memory6:20

START

Grayscaling an Image2:57

START

Buffering an Image4:19

START

Encoding an Image5:39

START

App Deployment4:05

START

Master Project: Processing Videos with FFmpeg

18 lectures

Understanding FFmpeg2:44

START

Installing FFmpeg5:00

START

Custom Asset Paths5:25

START

Adding support for SharedArrayBuffer6:45

START

Loading FFmpeg with a Service4:11

START

Initializing FFMPeg6:46

START

Saving Files in Memory5:45

START

Generating a Screenshot11:00

START

Generating Multiple Screenshots5:08

START

Creating Screenshot URLs5:46

START

Bypassing Sanitization with Pipes8:24

START

Adding Feedback3:38

START

Selecting a Screenshot4:15

START

Updating the Firebase Storage Rules2:02

START

Uploading a Blob6:31

START

Recalculating the Upload Progress4:47

START

The forkJoin Operator7:22

START

Deleting Screenshots3:45

START

Master Project: Playing Videos

19 lectures

Section Overview1:43

START

Creating a List Component1:47

START

Handling Scroll Events7:40

START

Querying for Clips10:38

START

Rendering Clips on the Home page4:50

START

Understanding Cross Origin Issues3:43

START

Fixing Cross Origin Issues8:09

START

Fixing the Timestamp8:15

START

Rendering Clips on the Clip Page

START

Installing Videojs1:37

START

Selecting elements with the ViewChild Decorator5:58

START

Initializing the Video Player2:02

START

Styles without View Encapsulation5:16

START

Tailwind’s Aspect Ratio Classes3:55

START

Resolving Data with a Guard8:09

START

Dynamically Rendering the Video7:02

START

Fixing the Manage Page1:03

START

Copying Links to the Clipboard6:04

START

Lazy Loading Modules6:31

START

Master Project: Deployment

3 lectures

Production Budgets3:26

START

Modifying Firebase Rules3:42

START

Deploying an App with Vercel10:44

START

Master Project: Testing

20 lectures

Introduction to Testing11:20

START

Understanding Karma and Jasmine8:13

START

Preparing our App for Testing2:56

START

Writing a Sanity Test6:01

START

Angular’s Test Bed Utility5:55

START

Testing a Component’s Instance6:27

START

Querying the Component’s Template6:39

START

Inverting Matchers3:10

START

Testing Nested Components4:41

START

Testing Content Projection6:24

START

Custom Matcher Error Messages2:30

START

Mocking Services6:32

START

Overriding a Dependency2:44

START

Importing the Router Testing Module1:59

START

Exercise: Testing the Logout Link3:05

START

Simulating DOM Events3:58

START

Installing Cypress6:09

START

Exploring Cypress6:04

START

Writing an E2E Sanity Test6:04

START

Testing the Video Player8:52

START

Where To Go From Here?

6 lectures

Thank You!1:17

START

Review This Course!

START

Learning Guideline

START

LinkedIn Endorsements

START

Become An Alumni

START

Coding Challenges

START

Meet your instructor

Your Angular instructor (Luis) isn't just an expert with years of real-world professional experience. He has been in your shoes. He makes learning fun. He makes complex topics feel simple. He will motivate you. He will push you. And he will go above and beyond to help you succeed.

Luis Ramirez Jr

Hi, I'm Luis Ramirez Jr!

Luis uses his 10+ years of experience in web application development to teach and guide new students to learn to code, get hired and become successful Software Engineers.

SEE MY BIO & COURSES

Luis Ramirez Jr

Frontend Developer

Frequently asked questions

Are there any prerequisites for this course?

  • A computer (Windows, Mac, or Linux) with an internet connection
  • Basic HTML, CSS and JavaScript knowledge (which we will teach you here if you don't already have this knowledge)
  • You do not need any experience with Angular or any other JS framework
  • A willingness and enthusiasm to learn and take action

Who is this course for?

  • Developers that want a step-by-step guide to learn and master Angular from scratch all the way to being able to get hired at a top company
  • Students who want to go beyond all of the "beginner" Angular tutorials out there
  • Programmers who want to learn one of the most in-demand skills of a Web Developer
  • Developers that want to be in the top 10% of Angular Developers
  • Students who want to gain experience working on a large, scalable application
  • Bootcamp or online tutorial graduates that want to go beyond the basics
  • Students who want to learn from a Senior Developer who has real-world industry experience, not just another online instructor that teaches off of documentation

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Can I use the course projects in my portfolio?

Yes, you’d be crazy not to in our slightly biased opinion! All projects are downloadable and ready to use the minute you join.

Many of our students tell us the projects they built while following along with our courses were what got them interviews and because they built the projects themselves, they could confidently explain and walk through their work during the interview.

You know what that means? Job offer!

Can I download the videos?

Definitely. You can download any and all lessons for personal use. We do everything we can to make learning easy, fun and accessible. Whether that’s on your commute, on a flight or just when you have limited access to good WiFi.

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Take the next step and invest in a better you

Choose your currency:
$ USD US Dollar
Monthly
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now
Save 40% vs. monthly (that's $189 a year)
Annual
100% OFF$279 / year
$279 / year
$23 / month
You're committed to getting hired and starting a career in tech
Start Learning Now
Lifetime
100% OFF$999
$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, workshops, and career paths
Invite to private Discord with 400,000+ members
Access to private Linkedin networking group
Custom ZTM course completion certificates
Download all lessons for offline learning
Unlimited, priority access to all future courses, content, and features
100% RISK FREE

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.