Angular 19 Fundamentals

The Angular 19 Fundamentals course provides a comprehensive, hands-on introduction to building modern web applications using Angular’s latest standalone component model and reactive state management features. Designed for developers with basic knowledge of HTML, CSS, and JavaScript or TypeScript, this course teaches how to architect, develop, and style responsive single-page applications using Angular 19.

Through a series of guided lessons and labs, you will learn core Angular concepts such as components, routing, forms, dependency injection, signals, and services. You'll build multiple real-world applications—including a multi-step form, a book tracking system, and a data-driven dashboard—while applying best practices like modular design, reusable UI components, and integration with mock APIs using json-server.

By the end of the course, you'll have the confidence and skills to develop scalable, maintainable Angular applications using the latest techniques and tools.

Angular CLI and project structure
Standalone components and routing
Reactive and template-driven forms
Dependency injection with inject()
State management using Angular signal()
Component communication (@Input(), @Output())
Filtering, sorting, and dynamic views
Form validation and error handling
Integration with mock REST APIs (json-server)
Styling with Bootstrap and Tailwind CSS
Performance best practices and OnPush change detection

Category: Software Development
Level: Intermediate
Time Estimate: 10h 0m
Price: $199.99 for 3 months of access
Subscription: $74.99 per month after 7-day free trial
Lab Environment: Included
Free Trial: 7 Days

Lessons in this Course

Lesson 1: Introduction and Setup

Kick off your Angular journey by setting up your development environment and creating your first Angular 19 application. In this lesson, you'll install the Angular CLI, generate a new project, explore the default folder structure, and run the app locally. You'll also make your first code edit and see how Angular's live-reloading development server works—laying the foundation for everything to come.

Duration: 1 h 0 m

Exercises

Exercise 1: Setting Up Your First Angular 19 App In this exercise, you'll install the Angular CLI, create a new Angular 19 project, explore the default structure, and run your app locally. You'll also make a simple template change and see Angular’s live-reloading in action—establishing the foundation for all future development. Estimated Time: 30 minutes

Exercise 2: Signals and inject() In this exercise, you’ll enhance your Angular app by introducing signals for reactive state and inject() for streamlined dependency injection. You’ll update your component to display dynamic data, automatically react to changes, and set the document title—all using Angular 19’s modern reactivity model. Estimated Time: 30 minutes

Lesson 2: Components and Templates

Learn how to build the building blocks of any Angular application—components. In this lesson, you'll create standalone components, pass data using @Input(), and structure dynamic templates using Angular’s powerful binding syntax. You'll also explore content projection with <ng-content> and best practices for organizing reusable UI components.

Duration: 1 h 0 m

Exercises

Exercise 1: Creating and Using a Component In this exercise, you’ll generate a standalone Angular component and learn how to pass data into it using @Input(). You’ll update the template to display dynamic content and embed the component in the main app—building your understanding of how Angular components communicate and render data. Estimated Time: 60 minutes

Lesson 3: Services and State Management

Discover how to share logic and data across components using Angular services and signals. In this lesson, you’ll create a shared service to manage application state, use the inject() function for cleaner dependency injection, and build a reactive counter app. You'll also learn the difference between signals and observables, and when to use each for effective state management.

Duration: 1 h 0 m

Exercises

Exercise 1: Standalone Counter App Using Shared State In this exercise, you’ll build a simple counter app using a shared service and Angular signals to manage application state. You'll use inject() to access the service across standalone components and observe how changes to the counter are reflected in real time. Estimated Time: 60 minutes

Lesson 4: Routing and Navigation

Master client-side navigation in Angular by building a routing-enabled application. In this lesson, you'll define routes with parameters, use <router-outlet> to display dynamic views, and create navigation links with routerLink. You’ll also learn how to pass and access route parameters to build detail pages, laying the groundwork for scalable single-page applications.

Duration: 1 h 0 m

Exercises

Exercise 1: Standalone Routing App with Parameters and Lazy Loading In this exercise, you'll build a standalone Angular app with client-side routing. You'll configure routes, navigate between views, and use dynamic parameters to display user-specific content—laying the groundwork for lazy loading and scalable navigation in larger applications. Estimated Time: 60 minutes

Lesson 5: Forms and Validation

Learn how to build robust and interactive forms using Angular’s Reactive Forms module. In this lesson, you'll create a profile form with typed form controls, apply built-in validators, and display real-time validation feedback. You’ll also explore dynamic fields, custom validators, and best practices for managing form state in modern Angular applications.

Duration: 1 h 30 m

Exercises

Exercise 1: Building a Profile Form In this exercise, you'll build a reactive profile form using FormGroup and FormControl. You'll implement real-time validation, bind form inputs, and dynamically update form fields based on user selections—all while following best practices for clean and maintainable form handling in Angular. Estimated Time: 45 minutes

Exercise 2: Custom Validators In this exercise, you'll create and apply custom validators to enforce rules beyond Angular’s built-in validation. You'll learn how to build reusable validation functions, integrate them into reactive forms, and display meaningful error messages based on custom logic. Estimated Time: 45 minutes

Lesson 6: Create a Loan Qualification App

Build a multi-step, real-world application using Angular 19’s modern architecture. In this lesson, you’ll create a loan pre-qualification form with standalone components, reactive forms, routing, and persistent state managed by signals. You’ll validate user input, store form data across steps, and display a final review before submission—all styled with Tailwind CSS

Duration: 2 h 0 m

Exercises

Lab: Creating a Loan Qualification App This lab walks you through building a fully functional and professionally styled loan pre-qualification application using Angular 19 with standalone components, reactive forms, signals, routing, and Tailwind CSS. Estimated Time: 120 minutes

Lesson 7: Create a Book Tracker App

Apply everything you've learned to build a complete book tracking application. In this lesson, you'll use Angular signals for state management, template-driven forms for user input, and routing to navigate between views. You'll integrate with a mock REST API using json-server and implement features like filtering, sorting, and CRUD operations—all styled with Bootstrap for a polished UI.

Duration: 2 h 30 m

Exercises

Lab: Create a Book Tracker App In this lab, you'll build a complete book tracking application using Angular 19. You'll manage state with signals, implement filtering and sorting, use template-driven forms for CRUD operations, and connect to a mock REST API using json-server. The app will be styled with Bootstrap and structured with standalone components and routing. Estimated Time: 150 minutes