Angular 17

Build dynamic, responsive web applications using Angular 17. This hands-on course covers the full framework from components and routing to forms and HTTP, while introducing the latest features including declarative control flow, deferred loading, and the view transitions API, so you can develop modern Angular applications with confidence.

What You'll Learn

By the end of this course, you will be able to:

• Set up a development environment with Node.js, Visual Studio Code, and Angular CLI
• Build Angular 17 applications using components, directives, pipes, services, and modules
• Implement data binding, dependency injection, routing, forms, and HTTP client communication
• Apply the new declarative control flow syntax to simplify conditional rendering, looping, and empty state handling
• Use the @defer block to enable lazy loading of content and dependencies for improved performance
• Customize view animations and transitions using the new view transitions API
• Debug and test Angular 17 applications using Chrome DevTools, Jest, Karma, and Protractor

Requirements

• Solid understanding of HTML, CSS, and JavaScript
• Experience with TypeScript and RxJS
• General web development experience

Audience

• Web Developers building new applications with Angular 17
• Angular Developers upgrading from earlier versions of the framework
• Frontend Engineers looking to adopt Angular 17's latest features and patterns

Topics

Introduction and Setup

• What is Angular and How Does It Compare to React and Vue
• Overview of Angular 17 Features and Architecture
• Setting Up the Development Environment with Node.js, VS Code, and Angular CLI

Getting Started

• Creating a New Project with Angular CLI
• Exploring the Project Structure and Key Files
• Running and Serving the Application Locally
• Displaying Data Using Interpolation and Expressions

Components

• Understanding the Role of Components in Angular 17
• Creating Components and Defining Their Templates and Styles
• Passing Data Between Components Using Inputs and Outputs
• Managing Component Behavior with Lifecycle Hooks

Directives

• Distinguishing Between Structural and Attribute Directives
• Using Built-In Directives Including ngIf, ngFor, and ngSwitch
• Creating and Applying Custom Directives

Pipes

• Understanding the Role of Pipes in Angular 17
• Using Built-In Pipes Including date, currency, and json
• Creating and Applying Custom Pipes

Services and Dependency Injection

• Understanding the Role of Services in Angular 17
• Creating and Using Services for Shared Logic
• Injecting Dependencies Using Providers

Modules

• Understanding the Role of Modules in Angular 17
• Creating, Importing, and Exporting Modules
• Organizing Application Features with Module Structure

Data Binding

• One-Way vs. Two-Way Data Binding
• Using Property Binding, Event Binding, and Two-Way Binding Syntax
• Working with Template Reference Variables

Routing

• Configuring and Managing Application Routes
• Navigating Between Routes Using routerLink and router.navigate()
• Working with Route Parameters, Query Parameters, and Fragments

Forms

• Template-Driven vs. Reactive Forms
• Building and Validating Forms with Form Controls, Groups, and Arrays
• Applying Built-In Validators and Creating Custom Validators

HTTP Client

• Making HTTP Requests to Communicate with Backend Services
• Handling Asynchronous Data Streams with Observables
• Using Interceptors to Modify or Handle HTTP Requests and Responses

New Declarative Control Flow

• Understanding the New Template Control Block Syntax
• Using @if, @else, @switch, @case, @default, @for, and @empty Blocks
• Comparing the New Syntax with ngIf, ngSwitch, and ngFor
• Supporting Zoneless Applications with Signals

Deferred Loading with @defer

• Understanding Deferred Loading and Its Performance Benefits
• Using the @defer Block to Lazy-Load Content and Dependencies
• Applying @defer Across Components, Directives, Pipes, Animations, and Styles
• Combining @defer with the View Transitions API

View Transitions API

• Understanding the Purpose and Benefits of View Transitions
• Enabling View Transitions with the withViewTransitions Directive
• Implementing Transition Types Including Fade, Slide, Zoom, and Flip
• Integrating View Transitions with the Angular Router and Browser History

Other Features and Improvements

• Passing Styles as a String with @Component.styles
• Lazy-Loading Angular Animation Code
• TypeScript 5.2 Support
• Stable Core Signal API
• Esbuild as Default Builder and Vite as Default Dev Server
• Node.js Version Requirements and Compatibility Changes