Angular 17 Training Course

Introduction to Angular 17

• Defining the scope and purpose of Angular
• Comparing Angular against React and Vue
• Overview of Angular 17’s features and architectural shifts
• Setting up the Development Environment

Getting Started

• Initializing a new Angular 17 project via Angular CLI
• Navigating the project file structure and organization
• Executing and serving the application locally
• Rendering data through interpolation and expressions

Components

• The functional role of components in the Angular 17 ecosystem
• Building and integrating components
• Data exchange between components via 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 function and utility of pipes in Angular 17
• Using built-in pipes for dates, currency, JSON, etc.
• Crafting and utilizing custom pipes

Services

• The strategic role of services in Angular 17
• Creating and deploying services
• Managing dependencies through providers

Modules

• Understanding the organizational role of modules
• Building and utilizing modules
• Managing module imports and exports

Data Binding

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

Routing

• The importance of routing in Angular 17
• Configuring and creating application routes
• Navigation techniques using routerLink and router.navigate()
• Utilizing route parameters, query parameters, and fragments

Forms

• Comparing template-driven versus reactive forms
• Building and validating forms using controls, groups, and arrays
• Applying built-in validators like required, minLength, and maxLength
• Implementing custom validation logic

HTTP Client

• The function of the HTTP client in Angular 17
• Executing HTTP requests for backend communication
• Handling asynchronous data streams with observables
• Intercepting and modifying requests/responses using interceptors

New, Declarative Control Flow

• Explaining the new template control block syntax and its simplification of tasks like conditional rendering and looping
• Practical examples using @if, @else, @switch, @case, @default, @for, and @empty
• Comparing the new syntax with legacy approaches like *ngIf, *ngSwitch, and *ngFor
• Discussion on how new control blocks support zoneless applications via signals

Deferred Loading Blocks

• The concept of deferred loading and its impact on performance and UX
• Introduction to the @defer control block for lazy-loading content and dependencies
• Examples of using @defer for components, directives, pipes, animations, and styles
• Integration of @defer with the view transitions API

View Transitions API

• Purpose and advantages of the view transitions API for custom animations
• Using the new withViewTransitions directive to enable these features
• Examples with transition types: 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 enhancements, including:
• Support for passing @Component.styles as a string
• Lazy-loadable animation code
• Compatibility with TypeScript 5.2
• Stabilization of the core signal API
• Removal of Node.js v16 support, with v18.13.0 now the minimum requirement
• Esbuild as the default builder and Vite powering the default dev server