Angular 17 Training Course

Introduction to Angular 17

• An overview of what Angular is
• A comparative analysis of Angular, React, and Vue
• A summary of Angular 17's features and architectural changes
• Setting up the development environment

Getting Started

• Initializing a new Angular 17 project using the Angular CLI
• Examining the project structure and key files
• Running and serving the application
• Displaying data through interpolation and expressions

Components

• Understanding the function of components within Angular 17
• Creating and implementing components
• Transferring data between components via inputs and outputs
• Utilizing component lifecycle hooks

Directives

• Distinguishing between structural and attribute directives
• Implementing built-in directives like ngIf, ngFor, and ngSwitch
• Developing and applying custom directives

Pipes

• Understanding the utility of pipes in Angular 17
• Using built-in pipes such as date, currency, and json
• Creating and applying custom pipes

Services

• Understanding the role of services in Angular 17
• Creating and utilizing services
• Injecting dependencies through providers

Modules

• Understanding the role of modules in Angular 17
• Creating and using modules
• Managing module imports and exports

Data Binding

• Distinguishing between one-way and two-way data binding
• Implementing property binding, event binding, and the banana-in-a-box syntax
• Utilizing template reference variables

Routing

• Understanding the importance of routing in Angular 17
• Creating and configuring routes
• Navigating between routes using routerLink and router.navigate()
• Managing route parameters, query parameters, and fragments

Forms

• Comparing template-driven and reactive forms
• Creating and validating forms using controls, groups, and arrays
• Applying built-in validators like required, minLength, and maxLength
• Developing and implementing custom validators

HTTP Client

• Understanding the function of the HTTP client in Angular 17
• Making HTTP requests to interact with backend services
• Handling asynchronous data streams with observables
• Using interceptors to modify or process HTTP requests and responses

New, Declarative Control Flow

• An explanation of the new template control block syntax and its simplification of tasks like conditional rendering and looping
• Examples demonstrating new blocks such as @if, @else, @switch, @case, @default, @for, and @empty
• A comparison between the new syntax and legacy directives like *ngIf, *ngSwitch, and *ngFor
• A note on how the new control blocks facilitate zoneless applications with signals

Deferred Loading Blocks

• An overview of deferred loading and its impact on web application performance and user experience
• An introduction to the @defer control block for lazy-loading content and dependencies
• Examples of using @defer for scenarios involving components, directives, pipes, animations, and styles
• How the @defer block integrates with the view transitions API

View Transitions API

• An explanation of the benefits of the view transitions API for customizing view animations
• An introduction to the withViewTransitions directive
• Examples of using withViewTransitions for fade, slide, zoom, and flip effects
• The interaction between the view transitions API, the Angular router, and browser history

Other Features and Improvements

• A summary of additional enhancements in Angular 17, including:
• Support for passing @Component.styles as a string
• Lazy-loading capability for Angular's animations code
• Support for TypeScript 5.2
• The core signal API is now stable
• Removal of Node.js v16 support, with a minimum requirement of v18.13.0
• Esbuild becoming the default builder and Vite powering the default dev server