Angular 17 Training Course

Introduction to Angular 17

• Overview of Angular
• Comparison: Angular vs React vs Vue
• Snapshot of Angular 17 features and architecture
• Configuring the Development Environment

Getting Started

• Initializing a new Angular 17 project via Angular CLI
• Exploring the project structure and file organization
• Running and serving the application
• Displaying data through interpolation and expressions

Components

• The role of components in Angular 17
• Creating and integrating components
• Data transfer between components using inputs and outputs
• Leveraging component lifecycle hooks

Directives

• Distinguishing between structural and attribute directives
• Utilizing built-in directives like ngIf, ngFor, ngSwitch, and others
• Developing and implementing custom directives

Pipes

• The function of pipes within Angular 17
• Applying built-in pipes such as date, currency, json, and others
• Building and using custom pipes

Services

• The purpose of services in Angular 17
• Creating and utilizing services
• Dependency injection via providers

Modules

• The function of modules in Angular 17
• Creating and applying modules
• Importing and exporting modules

Data Binding

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

Routing

• The significance of routing in Angular 17
• Defining and configuring routes
• Navigating routes using routerLink and router.navigate()
• Handling route parameters, query parameters, and fragments

Forms

• Differences between template-driven and reactive forms
• Form creation and validation using form controls, groups, and arrays
• Applying built-in validators like required, minLength, maxLength, and others
• Developing and using custom validators

HTTP Client

• The role of the HTTP client in Angular 17
• Executing HTTP requests to interact with backend services
• Managing asynchronous data streams with observables
• Modifying or handling requests/responses using interceptors

New, Declarative Control Flow

• Explanation of the new template control block syntax and its simplification of tasks like conditional rendering, looping, and empty collection handling
• Demonstrations using new blocks such as @if, @else, @switch, @case, @default, @for, and @empty
• Comparison between the new syntax and previous iterations like *ngIf, *ngSwitch, and *ngFor
• Discussion on how new control blocks support zoneless applications with signals

Deferred Loading Blocks

• The concept of deferred loading and its impact on web application performance and user experience
• Introduction to the @defer control block for lazy-loading content and dependencies
• Examples of @defer usage in scenarios like loading components, directives, pipes, animations, and styles
• Integration of the @defer block with the new view transitions API

View Transitions API

• Benefits of the view transitions API for customizing animations and transitions between views
• Introduction to the withViewTransitions directive enabling the API's usage
• Examples of the directive with transition types like fade, slide, zoom, and flip
• Interaction between the view transitions API, the Angular router, and browser history

Other Features and Improvements

• Summary of additional Angular 17 features and improvements, including:
• Support for passing @Component.styles as a string
• Lazy-loadability of Angular's animations code
• TypeScript 5.2 support
• Stabilization of the core signal API
• Removal of Node.js v16 support, with v18.13.0 becoming the minimum version
• Esbuild as the default builder and Vite for the default dev server