Angular 17 Training Course

Introduction to Angular 17

• What is Angular?
• Comparing Angular with React and Vue
• Overview of Angular 17 features and architecture
• Setting up the Development Environment

Getting Started

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

Components

• The role of components in Angular 17
• Creating and utilizing components
• Data transfer between components using inputs and outputs
• Leveraging 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

• The purpose of pipes in Angular 17
• Using built-in pipes for date, currency, json, etc.
• Creating and implementing custom pipes

Services

• The function of services in Angular 17
• Creating and using services
• Dependency injection using providers

Modules

• The significance of modules in Angular 17
• Creating and utilizing modules
• Module import and export strategies

Data Binding

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

Routing

• The role of routing in Angular 17
• Configuration and creation of routes
• Navigation via routerLink and router.navigate()
• Handling route parameters, query parameters, and fragments

Forms

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

HTTP Client

• The role of HTTP client in Angular 17
• Executing HTTP requests for backend communication
• Managing asynchronous data streams with observables
• Modifying or handling requests/responses via interceptors

New, Declarative Control Flow

• Simplifying conditional rendering, looping, and empty collections with new template control block syntax
• Examples using @if, @else, @switch, @case, @default, @for, and @empty
• Comparison with legacy syntax like *ngIf, *ngSwitch, and *ngFor
• Support for zoneless applications using signals

Deferred Loading Blocks

• Improving performance and UX through the concept of deferred loading
• Lazy-loading content and dependencies via the @defer control block
• Applying @defer to components, directives, pipes, animations, and styles
• Integration of @defer with the view transitions API

View Transitions API

• Customizing view animations and transitions for better user experience
• Enabling the API via the withViewTransitions directive
• Examples: fade, slide, zoom, and flip transition types
• Integration with the Angular router and browser history

Other Features and Improvements

• Summary of additional enhancements in Angular 17, including:
• String support for @Component.styles
• Lazy-loadable animation code
• TypeScript 5.2 compatibility
• Stable core signal API
• Removal of Node.js v16 support; minimum version is now v18.13.0
• Esbuild as the default builder and Vite for the dev server