Angular 17 Training Course

Introduction to Angular 17

• Defining Angular and its core purpose
• Comparing Angular with React and Vue
• Overview of key features and architecture in Angular 17
• Setting up the development environment

Getting Started

• Initializing a new Angular 17 project with Angular CLI
• Understanding the project structure and file organization
• Running and serving the application locally
• Displaying data using interpolation and expressions

Components

• The role of components in the Angular 17 ecosystem
• Creating and utilizing components
• Data flow between components using inputs and outputs
• Applying component lifecycle hooks

Directives

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

Pipes

• The purpose and utility of pipes in Angular 17
• Applying built-in pipes such as date, currency, and JSON
• Creating and using custom pipes

Services

• The role of services in Angular 17 architecture
• Creating and utilizing services
• Managing dependencies through providers

Modules

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

Data Binding

• Differentiating 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

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

Forms

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

HTTP Client

• The role of the HTTP client in Angular 17
• Executing HTTP requests for backend communication
• Managing asynchronous data streams with observables
• Using interceptors to process or modify HTTP requests and responses

New Declarative Control Flow

• Explaining the new template control block syntax and its simplification of conditional rendering, loops, and empty state handling
• Demonstrating usage of new blocks: @if, @else, @switch, @case, @default, @for, and @empty
• Comparing the new syntax with legacy directives like *ngIf, *ngSwitch, and *ngFor
• Discussing support for zoneless applications via signals

Deferred Loading Blocks

• Understanding deferred loading and its impact on web application performance and UX
• Introducing the @defer control block for lazy-loading content and dependencies
• Applying @defer to various scenarios: components, directives, pipes, animations, and styles
• Integrating the @defer block with the View Transitions API

View Transitions API

• Explaining the benefits of the View Transitions API for customizing view animations
• Using the withViewTransitions directive to enable these transitions
• Implementing different transition types: fade, slide, zoom, and flip
• Understanding how the API interacts with the Angular router and browser history

Other Features and Improvements

• Summary of additional enhancements in Angular 17, including:
• Support for passing @Component.styles as a string
• Lazy-loadable Angular animations code
• Compatibility with TypeScript 5.2
• Stabilization of the core signal API
• Removal of Node.js v16 support; minimum required version is now v18.13.0
• Esbuild as the default builder and Vite as the default dev server