Angular 17 Training Course

Introduction to Angular 17

• Fundamentals of Angular
• Comparative analysis: Angular vs React vs Vue
• Architectural overview and key features of Angular 17
• Environment setup procedures

Getting Started

• Initializing a new Angular 17 project via Angular CLI
• Navigating the project structure and file hierarchy
• Building and serving the application
• Data display techniques using interpolation and expressions

Components

• The strategic role of components within the Angular 17 ecosystem
• Creation and application of components
• Data flow between components via inputs and outputs
• Leveraging component lifecycle hooks

Directives

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

Pipes

• The utility of pipes in Angular 17 development
• Working with standard pipes such as date, currency, and json
• Developing and applying custom pipes

Services

• The function of services in Angular 17 architecture
• Service creation and utilization
• Dependency management through providers

Modules

• The purpose of modules in organizing Angular 17 code
• Module creation and usage
• Importing and exporting module configurations

Data Binding

• Differentiating one-way and two-way data binding
• Implementing property binding, event binding, and banana-in-a-box syntax
• Application of template reference variables

Routing

• The significance of routing in Angular 17 applications
• Defining and configuring application routes
• Navigation strategies using routerLink and router.navigate()
• Handling route parameters, query strings, and URL fragments

Forms

• Contrasting template-driven and reactive form approaches
• Form construction and validation using controls, groups, and arrays
• Employing standard validators like required, minLength, and maxLength
• Implementation of custom validation logic

HTTP Client

• The role of the HTTP client in Angular 17 backend communication
• Executing HTTP requests for service interaction
• Managing asynchronous data streams with observables
• Intercepting and modifying HTTP requests or responses

New, Declarative Control Flow

• Analysis of the new template control block syntax for simplified conditional rendering and looping
• Practical examples utilizing @if, @else, @switch, @case, @default, @for, and @empty
• Comparative review of new syntax versus legacy structures like *ngIf, *ngSwitch, and *ngFor
• Integration of control blocks with zoneless applications and signals

Deferred Loading Blocks

• Concepts of deferred loading and its impact on application performance and UX
• Introduction to the @defer block for lazy-loading content and dependencies
• Scenario-based examples for loading components, directives, pipes, animations, and styles
• Interaction between @defer blocks and the View Transitions API

View Transitions API

• Benefits and application of the View Transitions API for custom view animations
• Utilization of the withViewTransitions directive
• Examples featuring transition types like fade, slide, zoom, and flip
• Integration with the Angular router and browser history management

Other Features and Improvements

• Summary of additional Angular 17 enhancements, including:
• Ability to pass @Component.styles as a string
• Lazy-loadable animation code
• Support for TypeScript 5.2
• Stabilization of the core signal API
• Deprecation of Node.js v16; minimum supported version is now v18.13.0
• Esbuild as the default builder and Vite as the default development server