Angular 17 Training Course

Introduction to Angular 17

• An overview of Angular
• Comparing Angular with React and Vue
• A summary of Angular 17’s key features and architectural changes
• Configuring the development environment

Getting Started

• Initiating a new Angular 17 project via the Angular CLI
• Reviewing the project structure and file organization
• Executing and serving the application
• Displaying data through interpolation and expressions

Components

• Understanding the function of components in Angular 17
• Building and utilizing components
• Transferring data between components via inputs and outputs
• Applying component lifecycle hooks

Directives

• Distinguishing between structural and attribute directives
• Using built-in directives such as ngIf, ngFor, and ngSwitch
• Developing and implementing custom directives

Pipes

• Understanding the utility of pipes in Angular 17
• Applying built-in pipes for date, currency, and JSON formatting
• Creating and using custom pipes

Services

• Understanding the role of services within Angular 17
• Creating and using services
• Injecting dependencies through providers

Modules

• Understanding the role of modules in Angular 17
• Creating and using modules
• Managing the import and export of modules

Data Binding

• Understanding the distinctions 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 role of routing in Angular 17
• Configuring and creating routes
• Navigating between routes using routerLink and router.navigate()
• Utilizing route parameters, query parameters, and fragments

Forms

• Understanding the differences between template-driven and reactive forms
• Building and validating forms using controls, groups, and arrays
• Applying built-in validators such as required, minLength, and maxLength
• Creating and using custom validators

HTTP Client

• Understanding the role of the HTTP client in Angular 17
• Creating and executing HTTP requests for backend communication
• Handling asynchronous data streams using observables
• Using interceptors to modify or process HTTP requests and responses

New Declarative Control Flow

• Explaining the new template control block syntax and its simplification of tasks like conditional rendering, looping, and handling empty collections
• Providing examples with new blocks such as @if, @else, @switch, @case, @default, @for, and @empty
• Comparing the new syntax against previous iterations like *ngIf, *ngSwitch, and *ngFor
• Discussing how these new control blocks support zoneless applications using signals

Deferred Loading Blocks

• Explaining deferred loading and its impact on performance and user experience
• Introducing the @defer control block for lazy-loading content and dependencies
• Providing examples of @defer usage for loading components, directives, pipes, animations, and styles
• Discussing the interaction between @defer blocks and the view transitions API

View Transitions API

• Explaining the purpose and benefits of the view transitions API for customizing animations and view changes
• Introducing the withViewTransitions directive to enable this API
• Providing examples using withViewTransitions for fade, slide, zoom, and flip transitions
• Discussing how the view transitions API integrates with the Angular router and browser history

Other Features and Improvements

• Summarizing additional enhancements in Angular 17, including:
• Support for passing @Component.styles as a string
• Lazy-loadability of Angular’s animation code
• Support for TypeScript 5.2
• Stability of the core signal API
• Removal of Node.js v16 support, with v18.13.0 now the minimum required version
• Esbuild becoming the default builder and Vite powering the default dev server